CSSの素晴らしいアイデアが満載！2015年スタイルシートのテクニックのまとめ
Post on:2015年12月9日
sponsors
今年もCSSの進化がすごいです！ 次のプロジェクトに使ってみたくなるようなワクワクする素晴らしいアイデア満載のスタイルシートのテクニックを紹介します。
CSSアニメーションはより洗練され、単に要素を動かして楽しむだけでなく、意味のある動きとしてより効果的に利用されるものが目立ちました。
まずは、アニメーションの表現もここまでできるのかと驚いた「Marvel Logo animation」から。
※一部は、実際に動作するデモのコードを埋め込んでいます（全部をコードにしたらページが重すぎました）。
Marvel Logo animation | pure CSS
このアニメーションはぜひ、ブラウザでいっぱいに表示して楽しんでください。
Product Magnification without JavaScript
商品写真を拡大してぐりぐり動かすのをスクリプト無しで実装。仕組みは、divで3x3の透明グリッドを作成し、そのエリアのホバー時に画像のポジションとスケールを変形させています。
ぷるぷるしてると、ついクリックしたくなりますね。
今年はCSSのフィルタを使ったデモも数多く、ようやく実用性がでてきた感じです。
CSS background change on scroll
中央に固定配置された要素は、スクロールするとその背景に合わせて色が変化します。
背景にアニメーションで動く霧をかけます。
CSS Scroll Jacking Demo Using :hover
ホバーしているセクションエリアだけスクロールコンテンツを見せます。
画像は一切無し、CSSグラデーションで実装された背景。
Responsive pure CSS background
レスポンシブ対応で、CSSで実装された背景がアニメーションします。
divで実装されたさまざまな形がアニメーションで動きます。
キューブに実装された文字がくるっと回転します。かわいい！
ゴムひものようにしなやかな動きでラインが弾みます。「Elastic Animation」を採用しているサイトも数多く見かけました。
虫眼鏡アイコンがモーフィングのアニメーションで検索ボックスに変形します。
マウスを動かすと美しい幾何学模様をCanvasで描きます。
レスポンシブ対応の六角形のグリッドレイアウト。
レスポンシブ対応の新聞レイアウト。アニメーションGIFとか動画を組み合わせると面白いですね。
ダイヤモンド型のグリッドにメッシュ状に配置されたナビゲーション。
ホバー時に現在位置以外をブラーさせます。他にもいろいろ使えそうです。
ボタンの上下左右、4つのポイントをクリックするとそれぞれその方向にくるっと回転するボタン。一方向にしか動かないボタンだと違和感がでることがありますが、どの動作をしても自然な動きを体験できるので、こだわりたい実装ですね。
スクロールすると、リストで実装された各アイテムを拡大表示します。
モーダルボックスを表示するさまざまなアニメーション。ひと昔前と比べると、動きがかなり洗練されています。
カード型メニューの新しいコンセプトで、大きいスクリーンでも小さいスクリーンでも機能します。
Pure CSS Color Tabs (no label)
タブ型ナビゲーションのコンテンツスライダー。
大胆に斜めにレイアウトされたタブ型コンテンツ。
こんなボーダーもできるんですね！
ボタンを囲むボーダーにさまざまなアニメーションを適用。
Expanding Card | Material Design
ボタンをクリックすると、Material Designのカードコンポーネントに拡大します。
左右をクリックすると、少し弾む心地よいアニメーションでスライドします。
CSSで実装されたインタラクティブなマップコンテンツ。しかもレスポンシブ対応です。
各パネルをホバーすると拡大表示します。
美しく実装されたフォーム。
フォームのインプット要素をかわいいアニメーションで楽しませます。
テキストを気持ちいいアニメーションでハイライト表示。使ってるサイト、たまに見ますね。
ハイライトとはちょっと違いますが、これもテキストのホバー時のかわいいエフェクト。
CSSで実装されたシンプルでかっこいいローディング用のスピナー。
ゼリーのように美しく実装されたプログレスバー。一番下のリキッドタイプがすごいです！
こんなページのローディングにでてきたら見いっちゃいますね。
最後は、CSSのコーディングの様子を再現したデモ。
いやー、CSSってすごい！
sponsors
