CSSのすごいアイデアが満載!実用的なものからスゴ技までスタイルシートのテクニックのまとめ

素晴らしいアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。

これからのプロジェクトに使ってみたくなるような実用的なものから、CSSでこんなこともできるのか!という驚きのテクニックまで、今年もCSSに注目です。

デモのアニメーション

Flipside

クリックする場所によって、フリップするパネルの回転方向が変化します。
※クリック位置の判定にスクリプトを使用しています。

デモのキャプチャ

Stupid Case Study Hover

ホバーすると画像をズームインし、オーバーレイをアニメーションで表示します。

デモのアニメーション

Nature-Themed Buttons

エコグリーンをテーマにしたボタン。

デモのアニメーション

Puzzle Piece Human Identifier

操作しているのがコンピュータでなく人間であることをパズルで判定します。
※ドラッグや判定にスクリプトを使用しています。

デモのアニメーション

CSS Fly-out menu

ナビゲーションのアイテムを横からスライドのアニメーションで表示します。

デモのアニメーション

Cool CSS3 Link Ideas

a要素のリンクテキストのさまざまなアイデア集。

デモのキャプチャ

No JS modal popup window

スクリプト無しで、モーダルウインドウを全面に気持ちいいアニメーションで表示します。

デモのキャプチャ

Head Over Heels

下にスクロールすると、コンテンツが右から次々にアニメーションで表示されます。

デモのキャプチャ

Skewed Menu

水平のナビゲーションの各アイテムを斜めにカットします。
昔はこういうの画像を使って実装してましたねw

デモのキャプチャ

3D Thumb Image Hover Effect

サムネイル画像を3Dにした、かっこいいホバーエフェクトです。

デモのキャプチャ

Transparent Fading Navigation

CSSグラデーションで作られた透明感が美しいナビゲーション。

デモのキャプチャ

Quote with Fancy Borders

divで実装した矩形、linear-gradientを使ったかわいいストライプのボーダーにします。

デモのキャプチャ

Label Overlay

パネルにぺろっとかわいいラベルを添えます。

デモのキャプチャ

Lea Verou

角丸矩形にかわいい折り目をつけます。

デモのキャプチャ

Responsive Flexbox Pagenation

Flexboxで実装されたレスポンシブ対応のページネーション。

デモのキャプチャ

Pure CSS3 Animated Pagenation

これもページネーションですが、レスポンシブ対応というより省スペース用。

デモのキャプチャ

Awesome Text-Shadow

text-shadowを使って、テキストをかわいくデザインします。

デモのキャプチャ

One line of Text Dif Color

テキストの一行ごとに異なるスタイルを適用します。

デモのキャプチャ

Narrow Verical Timelinr

垂直型のタイムラインのコンテンツを省スペースに実装します。

デモのキャプチャ

Curtains

linear-gradientを使ったカーテン。しかもこれゆらゆら動いて、カーテンが開きます。

デモのアニメーション

404 - Glitched out

アニメーションでかっこよくした404ページ。実際のデモを見ると動きがもっと激しいです。

sponsors

top of page

©2019 coliss