ちょっと新しい見せ方、CSSなどで実現する今っぽいエフェクトまとめ

• 作成：2016/05/23
• 更新：2016/06/29
• Webデザイン

CSSで実現する今っぽく新しいエフェクトをまとめました。2016年のトレンドをおさえてピックアップ。クリックしたときや既存の画像に面白いフィルターや動きを加えたり、今までにない効果を出したいときに。

10種のSVGフィルタ

SVGフィルタは、ぼかし・色相・モノクロ・明度などの視覚効果をかける機能です。

こちらはSVGフィルタを使った10種類のボタンエフェクト。SVG内で作ったフィルターをCSSで適用しています。下のコードの例だと、feGaussianBlurはぼかし、stdDeviationはぼかし幅・半径（x軸 y軸）を指定しています。feColorMatrixに変えると色変換をするので、彩度・色相・セピア・グレーなどのフィルターが可能です。

フィルター効果の種類についてはsvg要素の基本的な使い方まとめを参考に。

<filter id="filter">
  <feGaussianBlur stdDeviation="5 10" />
  <!-- feGaussianBlurはぼかし、stdDeviationはぼかし幅  -->
</filter>

.button {
  -webkit-filter: url("#filter");
  filter: url("#filter");
}

• Distorted Button Effects with SVG Filters | Codrops

SVGフィルタの対応ブラウザはこちら。

• Can I use... SVG filters

ミックスブレンドモード

２つの要素がレイヤーした時の見せ方を指定できる「mix-blend-mode」。

background-blend-modeは背景属性の中でブレンドモードを適用しますが、mix-blend-modeは、もっと自由度が高いプロパティです（参考：CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう - ICS MEDIA）。

こちらはスクロールしても背景色と合わせて色を変更していくエフェクト。以下のソースだと、値にdifferenceを指定で画像の絶対値、screenで明るくなり、darkenで暗めに。

See the Pen CSS background change on scroll by Giana (@giana) on CodePen.

こちらは画像の差分を取得する「mix-blend-mode: exclusion;」（除外）を適用した例。

See the Pen mix-blend-mode demo by CSS-Tricks (@css-tricks) on CodePen.

ミックスブレンドモードの対応ブラウザはこちら。

• Can I use... mixblendmode

ページホッパー

クリックすると飛ぶように中心の円が移動するエフェクトが美しいページネーション。シンプルで分かりやすいUI。

• SVG Page Hopper

ポッドスライダー

こちらも上記と同じくクリックで滑らかに移動するスライダー。

• SVG Pod Slider

クリックから完了の動きを示すダウンロードボタン

ダウンロードを表すボタンをクリックすると、アニメーションが起き完了を示すチェックアイコンに変化する、意外とありそうで無かった動き。CSSのみで実現。

• Download Animation - CSS Only

もう一つ、わかりやすいタイプ。

• SVG Download Icon

１列表示のRWDテーブル

製品比較などで使えるレスポンシブテーブル。伸縮時に１列だけ表示し、ボタンで切り替えが可能。スライドやトグルなどは今までありましたが、切り替えタイプは見たことなかったのでメモ。

• Responsive Product Comparison Table

チェックボックスアニメーション

チェックボックスのアニメーションを簡単に実現する「Checkbox css」。バウンド・傾き・回転などの動きをつけることが可能です。以下のようにcheckbox後方のクラス名を変更すればOK。

<input type="checkbox" class="checkbox-hey"/>
<input type="checkbox" class="checkbox-away"/>

• デモ：Checkbox css
• 使い方：720kb checkbox css github

アニメーションライブラリ

11種類のアニメーションライブラリ。全体に広がるようにアニメーションします。

• Animated Transition Effects in CSS and jQuery | CodyHouse

• 1
• 2

2016/02/29

Webデザインに必要な知識が一通り学べるベスト記事8選

今年の頭にWeb制作に必要な知識が一通り学べるベスト記事9選をまとめましたが、今回はWebデザイン版をコムテブログの中から厳選してピックアップしました。総集編的な感じです。

2014/03/17

スキルが増えた！今後を生き抜くためにＷｅｂデザイナーも習得しておきたい技術

クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナ

2013/11/18

ノンデザイナーでも分かった！色に関する基本と配色に困ったときの知識まとめ

先月、リーフレットを作ったときに「なぜか同じように印刷されない」とか、サイトを作るときにイメージが伝わりにくいと感じたことが多々ありました。で配色に関して勉強してみたんですが、

2013/10/7

デザイナーも見ておきたい！エクセルを使った便利な小技３５

保守レポート、請求書、競合調査、検索ボリュームなどもそうですけど、Web屋さんに限らず仮説の答えになるデータを探したり、お客さんの提出物や社内レポート関係も必ずエクセルをつかい