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