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

CSSで実現する今っぽく新しいエフェクトをまとめました。2016年のトレンドをおさえてピックアップ。クリックしたときや既存の画像に面白いフィルターや動きを加えたり、今までにない効果を出したいときに。
エンジニア速報は Twitter の@commteで配信しています。
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"); }
SVGフィルタの対応ブラウザはこちら。

ミックスブレンドモード
2つの要素がレイヤーした時の見せ方を指定できる「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.
ミックスブレンドモードの対応ブラウザはこちら。

ページホッパー

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

こちらも上記と同じくクリックで滑らかに移動するスライダー。
クリックから完了の動きを示すダウンロードボタン

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

1列表示のRWDテーブル

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

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

11種類のアニメーションライブラリ。全体に広がるようにアニメーションします。
スポンサード リンク
関連記事
- キャラクター作成に使えた!人物やストーリーなども生成できるツールや素材集
- 右脳派必見!論理的に作れるWebデザインの法則
- Webデザインの参考にしたい、ファーストビューのアイデアその2
- さりげなく目立つフッターデザイン
- 2018年に使いたいWebデザイントレンド !ファーストビューのアイデア集
- Photoshopで簡単にできる不規則な円の作り方
- Photoshopで波を作る最も簡単な方法
- 45秒くらいでできる、Photoshopによるアナグリフ風な3Dエフェクトの作り方
- 404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集
- PhotoshopやCSSを使い、背景だけを薄くしてデュオトーン加工する方法
Leave a Comment