CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ

最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。

イラスト: Girls Design Materials

CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。

ぱっと見は一枚絵のようですが、じつはカード型コンポーネントで、非常に美しいエフェクトです。

磨りガラスのような美しいパネル。レスポンシブ対応です。

最近はヘッダとコンテンツの区切りが斜めや曲線のデザインが増えてきました。

CSSのみで曲線、しかも波打つようにアニメーションします。

曲線もSVGを使うとひと味違います。弦のように反応します。

背景にCSSのみで美しい幾何学状のアニメーションを実装します。

カード型コンポーネントのホバーエフェクトのアイデア。この発想はありそうでなかった。

倒れているカードがホバーで起き上がります。

カードをホバーすると拡大し、さらにコンテンツを追加するエフェクト。

紙を折ったようなかわいいテキストのエフェクト。

CSSのみで、ホバーの方向によってエフェクトが変わります。一昔前までは、JavaScript必須でしたね。

ホバーするとパネル間を移動するようにオーバーレイを表示するテクニック。これもCSSのみです。

レスポンシブ対応のブログ記事の見せ方。

スクロールすると、コンテンツを黄金螺旋に沿って回転しながら、拡大します。

グリッドのカーテンを開くようにコンテンツを表示します。

垂直に分割したレイアウトのスライダーです。スワイプにも対応しており、気持ちいいです。

画像をホバーした際にアニメーションでキャプションを表示するエフェクト。

ボックスのカラー指定から継承させてシャドウのカラーを指定するテクニック。

レスポンシブ対応の美しいレイアウトのタイムラインコンテンツ。

こちらもタイムラインで、CSSのみでここまでできるんですね。

シンプルなHTMLで、背景をマルチカラーにするテクニック。

ただの垂直分割レイアウトではありません。「a」が2色になっているのに注目です。

デスクトップ時は通常のリスト、スマホ時はコンマで区切られます。

Flexboxで実装されたレスポンシブ対応のナビゲーション。アイテムがデスクトップ時は水平に、スマホ時はドロップダウンで配置されます。

ホバーすると広がるタイプのナビゲーション。面白いアイデアですね。

box-shadowを使ったボタンのエフェクト集。

矢印リンクのかわいいエフェクト。

ボタンをクリックする位置によって、ボタンの傾きが変化します。

ホバーすると、ボーダーが美しく輝くエフェクト。

クリックする前に、虫眼鏡アイコンをクリックすると、どうなるか想像してみてください。
そうくるか！ と思いましたｗ

ホワイトのヘッダとハンバーガーアイコンに注目。ゆっくりスクロールするとかわいいエフェクトに出会えます。

美しいグラデーションを使ったホバーエフェクト集。

ソーシャルボタンのアイデア。登場時も面白いですが、クリックした時も面白いです。

Flexboxを使って実装されたボタン集。

最後はCSSで実装されたジブリキャラクター達。再現度はかなり高いです。