WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。
もくじ
マスク
フルスクリーン系
画像可変
図形
画像切り抜き
高解像度ディスプレイ対応
マスク
Transitionプロパティはループがなく、自然と最初の状態に戻るという特徴があります。マウスホバーなどのキッカケを与えて動かしたいときに使用します。
１．マスク・キャプション
マウスオーバー時に透過レイヤーさせ、文字を重ねて表示させる様々な方法をデモとコード付きで解説してあります。
transition-durationプロパティはどれくらいかけて変化させるか（実行時間）、transition-delayプロパティはいつ変化させるか（開始されるまでの時間）を意味します。transform:translate()は表示位置を移動、transform: scale();は拡大です。
２．円形キャプション
円形のホバーエフェクトアニメーション。transition: all 0.8s ease-in-out;のease~は、ease(ゆっくり) ease-in(ゆっくり→最高速) ease-out(最高速→ゆっくり) ease-in-out(ゆっくり→最高速→ゆっくり) linear(等速変化) 。
３．全画面+オーバーレイ
オーバーレイでメニューを出します。visibilityプロパティでボックスを消さず、表示・非表示を切り替えています。
visibility: visible;
４．ストライプの背景
repeating-linear-gradient()を使うと簡単にストライプができます。サンプルの45deg（45度）はストライプの角度(この場合、to right にすると縦縞)、色、始点、終点といった感じです。
例：background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
IE9以下でグラデーションを使用したい場合は、filterを使います。
フルスクリーン系
５．スライド＋フルスクリーン
フルスクリーン背景画像のスライドショーをCSSのみで表示。
６．全画面背景動画
レスポンシブ対応でvideo要素に対応していないブラウザでは、代替の背景画像が表示されるとのこと。jQueryプラグインではtubularといったものもあります。
７．パララックス
CSSだけで作るパララックス。
８．フルスクリーンにフィット
background-size: cover;は縦横比を維持したまま、指定領域に画像が必ず表示されている状態にします。
- background-size:coverで背景画像をフルスクリーンにフィットさせたレスポンシブウェブデザイン | Dress Cording
- CSSだけで背景を画面全体にする方法 | Ri-mode Rainbow | No:1053
９．背景画像をブラウザごとに最適化
background-size: contain;を使うと縦横比を維持したまま、指定領域に画像のすべてが表示されるようにします。
１０．メガメニュー
メニューアイコンをクリックすると、横幅いっぱいに落ちてくるメガメニュー。フルスクリーン系のサイトによく合いそうです。
画像可変
１１．画像で枠線を表現する
区切り線を入れると情報の区切りが明確になるので可読性が向上します。hrを使わずにborder-imageを使います。１枚の画像で上下左右の画像ボーダーを実現できます。
１２．半透明＋フィルタ
CSS3ではfilterプロパティでフィルタをかけることができます。ベンダープレフィックスと一緒に使用してください。例：ぼかす場合は-webkit-filter: blur(10px);、白黒にする場合は-webkit-filter: grayscale(1);など。
１３．文字以外を透明にしてレイヤーさせる
rgba()はcolor やbackground-color の値を透明度と同時に指定できます。例えばalpha の値 .3 は30%を表します。
セレクタ { color : rgba(赤, 緑, 青, アルファ); }
図形
１４．ループ＋ローディング
ループさせるような同じ動きを繰り返すアニメーションであれば、CSS Animations を使います。Animationsプロパティはウィンドウ読み込みと同時に動かせます。キーフレームの定義は、「@-webkit-keyframes」+「任意の名前」、始まりと終わりの状態は「%」を使います。
１５．3Dボックス
最近WordPressテーマでよく見かけるようになってきた3Dのボタンやボックス。
１６．矢印ナビ
矢印をからめたナビゲーションスタイル一覧。マウスホバーで横幅を変え、コンテンツを表示したり様々なエフェクトを実現します。画像ギャラリーやスライドなどに。
画像切り抜き
１７．六角形
linear-gradient()で角度を変更し、画像を六角形にくり抜く方法。プロフィール写真やアイコンなどを囲んだり、かわいい見せ方ができそうです。
１８．卵型＋星形
こちらはradial-gradient()を使い卵型、linear-gradientで星形で画像をくり抜く方法。
高解像度ディスプレイ対応
１９．ピクセル比に応じて画像を指定
鮮明な写真を使うとき、ボケが目立たないように高解像度ディスプレイ用に画像を最適化したいところです。image-set関数を仕様するとデバイスピクセル比に応じて画像を指定することができます。現在ではChrome/safariなどで対応してます。
例：background:-webkit-image-set( url(1x.png) 1x, url(2x.png) 2x );
スポンサード リンク