CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ
Post on:2015年3月10日
sponsors
素晴らしいアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。
これからのプロジェクトに使ってみたくなるような実用的なものから、CSSでこんなこともできるのか！という驚きのテクニックまで、今年もCSSに注目です。
クリックする場所によって、フリップするパネルの回転方向が変化します。
※クリック位置の判定にスクリプトを使用しています。
ホバーすると画像をズームインし、オーバーレイをアニメーションで表示します。
エコグリーンをテーマにしたボタン。
操作しているのがコンピュータでなく人間であることをパズルで判定します。
※ドラッグや判定にスクリプトを使用しています。
ナビゲーションのアイテムを横からスライドのアニメーションで表示します。
a要素のリンクテキストのさまざまなアイデア集。
スクリプト無しで、モーダルウインドウを全面に気持ちいいアニメーションで表示します。
下にスクロールすると、コンテンツが右から次々にアニメーションで表示されます。
水平のナビゲーションの各アイテムを斜めにカットします。
昔はこういうの画像を使って実装してましたねｗ
サムネイル画像を3Dにした、かっこいいホバーエフェクトです。
CSSグラデーションで作られた透明感が美しいナビゲーション。
divで実装した矩形、linear-gradientを使ったかわいいストライプのボーダーにします。
パネルにぺろっとかわいいラベルを添えます。
角丸矩形にかわいい折り目をつけます。
Flexboxで実装されたレスポンシブ対応のページネーション。
これもページネーションですが、レスポンシブ対応というより省スペース用。
text-shadowを使って、テキストをかわいくデザインします。
テキストの一行ごとに異なるスタイルを適用します。
垂直型のタイムラインのコンテンツを省スペースに実装します。
linear-gradientを使ったカーテン。しかもこれゆらゆら動いて、カーテンが開きます。
アニメーションでかっこよくした404ページ。実際のデモを見ると動きがもっと激しいです。
sponsors
