最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Post on:2017年2月15日
sponsors
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。
デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
HTML/CSSの実装がメインで、必要なものにはJavaScriptが使用されています。
- CSSで実装されたタイムライン
- CSSで実装されたマガジン レイアウト 26種類
- CSSで実装されたフォーム 77種類
- CSSで実装されたミュージック プレイヤー 60種類
- CSSで実装されたスライダー 58種類
- CSSで実装されたテキストエフェクト 61種類
- CSSで実装されたボタン 112種類
- CSSで実装されたナビゲーション 110種類
CSSで実装されたタイムライン 46種類
CSS V-timeline /w time intervals (by Frontend Tips)
垂直軸のタイムラインを実装するテクニック。各パネルのテキスト量が増えるに合わせて、時間のラインも伸びます。
Flexboxで実装されたレスポンシブ対応のタイムライン。スマホでは垂直軸でコンテンツが配置されます。
CSSで実装されたマガジン レイアウト 26種類
大胆なレイアウトが面白いだけでなく、表示サイズによって豊富なバリエーションを備えています。
最近増えてきた分割レイアウト。スマホでは垂直に配置されます。
CSSで実装されたフォーム 77種類
ミニマルにデザインされたフォーム。フォーカス時のエフェクトがちょうどよいです。
一度は挑戦したくなるデザインの凝ったフォーム。入力後にラベルがなくなるのは、使いにくいですね。
CSSで実装されたミュージック プレイヤー 60種類
キャプチャの画像だけでも面白そうですが、さまざまな操作が楽しめます。
コンセプトはミュージック プレイヤーですが、カード型のレイアウトとして見ても面白いです。
CSSで実装されたスライダー 58種類
Responsive Image Comparison Slider
ビフォアフターを表示できるコンパリソンスライダー。中央部をドラッグ操作します。
左右に写真をドラッグすることで、次々に写真が表示されます。
CSSで実装されたテキストエフェクト 61種類
波のゆったりとアニメーションがテキストでクリップされた美しいエフェクト。
SVGのアニメーションでテキストを描画します。
CSSで実装されたボタン 112種類
シンプルなホバーエフェクトもアイデアが面白いです。
ボタンのさまざまなホバーエフェクトがまとめられています。
CSSで実装されたナビゲーション 110種類
アニメーションで開閉するドロップダウン。動きが気持ちいいです。
Simple PureCSS dropdown menu with following subnav
アイテムをアニメーションで表示するドロップダウンで、ハイライトと連続性のあるアニメーションがうまいです。
sponsors
