• Top
• Category
• Contact
• About

サイト構築 -CSS

204

sponsorsr

Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。

デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。

HTML/CSSの実装がメインで、必要なものにはJavaScriptが使用されています。

• CSSで実装されたタイムライン
• CSSで実装されたマガジン レイアウト 26種類
• CSSで実装されたフォーム 77種類
• CSSで実装されたミュージック プレイヤー 60種類
• CSSで実装されたスライダー 58種類
• CSSで実装されたテキストエフェクト 61種類
• CSSで実装されたボタン 112種類
• CSSで実装されたナビゲーション 110種類

CSSで実装されたタイムライン 46種類

CSSで実装されたタイムライン 46種類

CSS V-timeline /w time intervals (by Frontend Tips)

垂直軸のタイムラインを実装するテクニック。各パネルのテキスト量が増えるに合わせて、時間のラインも伸びます。

Flexbox Timeline Layout

Flexboxで実装されたレスポンシブ対応のタイムライン。スマホでは垂直軸でコンテンツが配置されます。

CSSで実装されたマガジン レイアウト 26種類

CSSで実装されたマガジン レイアウト 26種類

Magazine Layout

大胆なレイアウトが面白いだけでなく、表示サイズによって豊富なバリエーションを備えています。

Magazine Layout 1

最近増えてきた分割レイアウト。スマホでは垂直に配置されます。

CSSで実装されたフォーム 77種類

CSSで実装されたフォーム 77種類

Minimalistic Form

ミニマルにデザインされたフォーム。フォーカス時のエフェクトがちょうどよいです。

Vintage Inspired Contact Form

一度は挑戦したくなるデザインの凝ったフォーム。入力後にラベルがなくなるのは、使いにくいですね。

CSSで実装されたミュージック プレイヤー 60種類

CSSで実装されたミュージック プレイヤー 60種類

Music app

キャプチャの画像だけでも面白そうですが、さまざまな操作が楽しめます。

Music Player Design In CSS

コンセプトはミュージック プレイヤーですが、カード型のレイアウトとして見ても面白いです。

CSSで実装されたスライダー 58種類

CSSで実装されたスライダー 58種類

Responsive Image Comparison Slider

ビフォアフターを表示できるコンパリソンスライダー。中央部をドラッグ操作します。

Elastic Slider

左右に写真をドラッグすることで、次々に写真が表示されます。

CSSで実装されたテキストエフェクト 61種類

CSSで実装されたテキストエフェクト 61種類

Animated wave clipped by text

波のゆったりとアニメーションがテキストでクリップされた美しいエフェクト。

Animating SVG text

SVGのアニメーションでテキストを描画します。

CSSで実装されたボタン 112種類

CSSで実装されたボタン 112種類

Fancy Button Menu

シンプルなホバーエフェクトもアイデアが面白いです。

Button Hover Effect

ボタンのさまざまなホバーエフェクトがまとめられています。

CSSで実装されたナビゲーション 110種類

CSSで実装されたナビゲーション 110種類

Swanky Pure CSS Drop Down

アニメーションで開閉するドロップダウン。動きが気持ちいいです。

Simple PureCSS dropdown menu with following subnav

アイテムをアニメーションで表示するドロップダウンで、ハイライトと連続性のあるアニメーションがうまいです。

Related Posts

coliss