CSSの素晴らしいアイデアが満載！2017年スタイルシートを使ったテクニックのまとめ

2017年も、CSSの進化がすごかったですね。
CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。
さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。

イラスト: Girls Design Materials

2017年によく目にしたもの一つが、グラデーションです。一昔前は同一色相のグラデーションが多かったですが、最近では複数の色相をし、グラデーション自体も大胆に使用するのが増えています。

Webページにグラデーションを使用する時に悩むのが、レスポンシブへの対応です。calc()を使用することで、サイズに合わせてグラデーションを変化させることができます。

一昔前まではJavaScriptを使用しないとできなかったことが、CSSのみで実装できることが増えました。CSSで実装されたスライドショーは、動作も軽快です。

スライドショーもSVGを使用すると、さらに表現が広がります。美しいブラーのアニメーションで、斜めのアイテムをスライドさせます。

粒子がアニメーションで動く背景をCSSのみで実装します。

デスクトップとスマホで、カラムが変化するレイアウト。ホバー時のエフェクトもかわいいです。

垂直に分割したパネルをスクロールすると、半分ずつスクロールさせます。ここでの表示だと幅が狭いので楽しめないのですが、右上の「Edit on Codepen」をクリックして別タブで開いてみてください。

文字を紙に書いたようなエフェクト。ホバーすると、平らになります。

パネルをホバーすると、その方向によってエフェクトを変化させます。しかもCSSのみで実装されており、JavaScriptは一切無しです。

ナビゲーションのアクティブなアイテムのみにエフェクトを与えます。こういう仕組みの多くはラジオボタンを使いますが、そこは無理しないで、JavaScriptに任せる方がスマートです。

Flexboxで実装されたハンバーガーメニュー。ここでは表示幅が狭いので、スマホ時になっていると思いますが、右上の「Edit on Codepen」をクリックすると、別タブで表示できます。
切り替わる時のアニメーションも素敵です。

レスポンシブ対応のパンくず。今まで見たことがないデザインで、垂直方向に場所は取りますが、面白いアイデアです。

パララックス、視差効果の多くはページのスクロール時に背景とコンテンツに使用されているのを多く見かけます。これはカードが回転する時に使用されており、カードとコンテンツが立体的に見えます。

これもCSSのみで実装されており、非常に軽快なアニメーションを楽しめます。

カードを使ったシンプルなホバーエフェクト。実用性も高いと思います。画像のキャプションを表示するのにもいいですね。

スクロールすると、ヘッダとコンテンツの境界線がアニメーションで変化します。

スクロールすると、4枚のパネルがそれぞれ異なる動きでアニメーションします。

弾むように追従する気持ちいいホバーエフェクト。

デフォルトの棒グラフはホバーすると、アニメーションで3Dに表示されます。

a要素一つだけで実装されたリンクにさまざまなエフェクトを与えます。

Material Designのボタンの実装例。

Material Designのカードの実装例。

ラジオボタンをこういうデザインにする発想はなかったです。

見た目シンプルな垂直型のメニューですが、ホバー時にかわいいエフェクトが隠されています。

CSSのみで実装された進捗ステップ。経過する時のアニメーションまでしっかり用意されています。

レスポンシブ対応のタイムライン。タイムラインはリスト要素で実装されています。

上記の別バージョン。デスクトップ時はデザイン違いで構造は一緒ですが、スマホ時の表示が異なります。

こちらはJavaScriptも使用したタイムラインで、スクロールに合わせて変化するので、より分かりやすいです。

最後はネコ好きにはたまらない、紐につかまった猫がぶらぶらするプリローダー。HTMLを見ると、ものすごい数のdivが使用されています。