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

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

CSSの引き出しを増やしておこう!スタイルシートのアイデア・テクニックのまとめ

イラスト: Girls Design Materials


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

See the Pen Card effect by Alex Moore (@MoorLex) on CodePen.

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

See the Pen Blur Experiments by Alex Moore (@MoorLex) on CodePen.

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

See the Pen zrXJpW by Alan Houser (@alanhouser) on CodePen.

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

See the Pen Css waves by Mehmet Burak Erman (@mburakerman) on CodePen.

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

See the Pen Elastic stroke SVG by Fabio Ottaviani (@supah) on CodePen.

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

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

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

See the Pen Barberpole Hover Animation by Chris Coyier (@chriscoyier) on CodePen.

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

See the Pen World Places (CSS 3d hover) by Akhil Sai Ram (@akhil_001) on CodePen.

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

See the Pen Cards Interaction with CSS by Dhanish (@dhanishgajjar) on CodePen.

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

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

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

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

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

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

See the Pen Responsive Blog Post by Gary Busey by Joshua Ward (@joshua_ward) on CodePen.

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

See the Pen Scrolling Golden Spiral by Nick (@narrowdesign) on CodePen.

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

See the Pen Grid Curtain by Dominic Magnifico (@magnificode) on CodePen.

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

See the Pen Slider transitions by Mirko Zorić (@fluxus) on CodePen.

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

See the Pen CSS Gallery Hover Effect by Sasha (@sashatran) on CodePen.

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

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

See the Pen Voyager Timeline by Mehmet Guler (@mehmetgulerue) on CodePen.

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

See the Pen Project Timeline by Russell Bishop (@russelllighthouse) on CodePen.

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

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

See the Pen Vertical split layout text effect by Mandy Michael (@mandymichael) on CodePen.

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

See the Pen Responsive Comma List by John Graham (@johnegraham2) on CodePen.

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

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

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

See the Pen Nav Animation by Marjo Sobrecaray (@maaarj) on CodePen.

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

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

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

See the Pen CSS-only super tilt button by Charlotte Dann (@pouretrebelle) on CodePen.

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

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

See the Pen Search UI Animation by Ben Sinca (@arcticben) on CodePen.

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

See the Pen Nice Scroll Effect SVG by ahmed beheiry (@ahmedbeheiry) on CodePen.

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

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

See the Pen #dailyui 010: Social Share by Gabrielle Wee (@gabriellewee) on CodePen.

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

See the Pen Flexbox Buttons by Alexandre Jolly (@AlexandreJolly) on CodePen.

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

See the Pen 6 CSS Studio Ghibli Charaters by chilli con code (@chilliconcode) on CodePen.

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

top of page

©2018 coliss