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

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

2017年総まとめ、スタイルシートを使ったテクニック

イラスト: Girls Design Materials


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

See the Pen Animated CSS Gradient Border by Mike Schultz (@mike-schultz) on CodePen.

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

See the Pen calc() with Gradients by Mark Huot (@markhuot) on CodePen.

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

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

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

See the Pen CSS only particle system by Robin Selmer (@robinselmer) on CodePen.

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

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

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

See the Pen CSS Paper Text by Mattia Astorino (@equinusocio) on CodePen.

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

See the Pen CSS-Only Direction-Aware Cube Links by Gabrielle Wee ✨ (@gabriellewee) on CodePen.

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

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

See the Pen Pure CSS Responsive Flexbox Navigation by Mehmet Burak Erman 🦌 (@mburakerman) on CodePen.

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

See the Pen Breadcrumbs Navigation by Andreas Storm (@andreasstorm) on CodePen.

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

See the Pen Parallax Flipping Cards by Tyrell Rummage (@tyrellrummage) on CodePen.

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

See the Pen Hearthstone Style Card Hover by Jack Rugile (@jackrugile) on CodePen.

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

See the Pen Simple CARD hover effect by YaroslavW (@YaroslavW) on CodePen.

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

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

See the Pen Friction. by Lewi Hussey (@Lewitje) on CodePen.

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

See the Pen Attract hover effect by Louis Hoebregts (@Mamboleoo) on CodePen.

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

See the Pen Exploded isometric via CSS 3D transforms by Scott Henderson (@scootman) on CodePen.

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

See the Pen Pure CSS Single Element Link Styles by Matthew Shields (@MatthewShields) on CodePen.

Material Designのボタンの実装例。

See the Pen Material Design Buttons by Ravikumar Chauhan (@rkchauhan) on CodePen.

Material Designのカードの実装例。

See the Pen Material cards FlexBox by diego valobra (@pirolab) on CodePen.

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

See the Pen Radio Button Group with Gradient by Alexi Taylor (@alexitaylor) on CodePen.

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

See the Pen Menu by Shalini Gandhi (@shalinigandhi) on CodePen.

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

See the Pen CSS only order process steps by Jamie Coulter (@jcoulterdesign) on CodePen.

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

See the Pen Pure CSS News Timeline - Responsive by Md Nahidul Islam (@nahidul) on CodePen.

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

See the Pen Pure CSS News Timeline - Responsive by Md Nahidul Islam (@nahidul) on CodePen.

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

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

See the Pen CSS: Cat Swinging on String by David Khourshid (@davidkpiano) on CodePen.

sponsors

top of page

©2018 coliss