CSSのすごいアイデアから実用的なテクニックまで!スタイルシートの最新テクニックのまとめ

最近のWebサイトやアプリで見かけるアニメーションを使った操作が気持ちいいUIエレメントを実装するスタイルシートを紹介します。

デモではHTMLやCSSのコードが掲載されているので、コピペで簡単に利用できます。
※一部JavaScriptも必要最小限で使用しています。

スタイルシートの最新テクニックのまとめ

イラスト: Girls Design Materials

デモのキャプチャ

Card UI Team Grid in Pure CSS
デモページ

ホバー時に各カードがふわっと浮かび上がるカード型レイアウト。

デモのキャプチャ

Scroll down Arrow with Bounce Animation
デモページ

縦長ページでよく見かける、下にスクロールしてねを表現するバウンドするアロー。

デモのキャプチャ

Donut Chart with Expanding Data on Click
デモページ

ドーナツ型のパイチャートをクリックすると、それに応じたコンテンツを表示。

デモのキャプチャ

Text Underline Effect on Hover
デモページ

下線付きのリンク時のホバー時のエフェクト。

デモのキャプチャ

Burn-in Text Animation Effect
デモページ

テキストをかっこいいアニメーションで表示します。

デモのキャプチャ

Sticky Header Navigation Menu
デモページ

ヘッダの下部にあるナビゲーションだけを固定表示。

デモのキャプチャ

Card UI Wave Animation
デモページ

波状にうねうねするアニメーションを使ったカード型UI。

デモのキャプチャ

Skewed Flexbox Panel Transformation On Hover
デモページ

Flexboxで斜めに配置されたパネルは、ホバー時に広げて表示されます。
アニメーションGIFにしたら1MB軽く越えてしまったので、静止画で。

デモのキャプチャ

Card Fold Down Hover Animation
デモページ

カードをホバーすると、ぱたりと開きます。

デモのキャプチャ

Colorful Timeline Style Navigation
デモページ

カラフルなタイムラインスタイルのナビゲーションを使ったコンテンツ。スムーズスクロールにスクリプトを使用。

デモのキャプチャ

Experimental Pull to Reveal Navigation
デモページ

ホールド・ドラッグすると、美しいアニメーションでコンテンツが切り替わります。

デモのキャプチャ

Drop-down List with Hover Animation
デモページ

ドロップダウンのリストをかっこいいアニメーションで表示します。

デモのキャプチャ

Colorful CSS Accordion Tabs
デモページ

CSSだけで実装されたとは思えないほど、面白いアニメーションを備えたアコーディオン型のタブ。

デモのキャプチャ

Pure CSS No Label Color Tabs
デモページ

ラベル無しのタブでコンテンツが切り替わります。

デモのキャプチャ

Pure CSS Twitter Heart Animation
デモページ

ハートが弾けるかわいいアニメーション。

sponsors

top of page

©2018 coliss