CSSの素晴らしいアイデアが満載!2014年スタイルシートのテクニックのまとめ
Post on:2014年12月22日
これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。
今年もCSSの進化がすごかったですね。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-06.gif)
ホバー・クリックすると愛に溢れるボタン。
※classの変更にスクリプトを使用しています。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-10.gif)
もうこれ、僕の知ってるCSSじゃないw 100% CSSの美しい光を使ったシネマというかアート。
途中で表示される「Begin」をクリックすると、更にBlackoutの映像(と言っていい)を楽しめます。
Blackoutの説明ページもあります。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-11.gif)
ブロックがぼこっと盛り上がるアイソメトリックエフェクトのボタン。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-12.gif)
バウンドのアニメーションがかわいいボタン、影もリアルです。
※スクリプト使用。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-07.gif)
弾けるようなアニメーションでロゴが表示されます。ホバー時にも。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-02.gif)
ソーシャルサービスのアイコンをホバーすると、折り畳まれていたラベルが表示されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-01.png)
背景のグラデーションが美しくアニメーションします。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-02.png)
画像無しで作られたタイムライン。レスポンシブ対応でレイアウトも変更されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-03.png)
パララックスの面白い見せ方、ホールの中にコンテンツがスクロールで表示されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-04.png)
ホバーでリンクのテキストが変わります。アニメーションも実装方法も面白いアイデアです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-05.png)
入力欄をフォーカスするとラベルが浮き上がるのをCSSのみで実装。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-06.png)
Pure CSS, annotated linear carousel
CSSで実装された水平タイプのカルーセル。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-07.png)
マンガみたいな面白い形状をしたボタン。ホバーするとアニメーションで形状が変わります。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-08.png)
落書き風のデザインや動きをCSSで実装。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-09.png)
普通の画像にCSSで放射状や線状のブラーエフェクトを適用。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-10.png)
背景にパースをつけ、映画のエンドロールのようにアニメーションで動かします。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-11.png)
エンボススタイルのかっこいい入力欄。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-12.png)
Pure CSS Blurred Video Background Login Box
動画を背景に使った半透明のパネルに配置したログインフォーム。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-01.gif)
3Dのアニメーションでパカッとひらく多階層のナビゲーション。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-03.gif)
ちろちろ動くテキストが、ホバーするとウェーブします。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-04.gif)
かわいいアニメーションで動くローダー。画像やアイコンフォントは無し。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-05.gif)
かわいいアニメーションで動くローダー。画像やアイコンフォントは無し。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-13.png)
ページいっぱいに斜めの対角線で区切った半透明のパネルを配置します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-14.png)
リストで配置した各項目をホバーするとハイライトします。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-15.png)
縦長ページの各セクションをブラウザいっぱいやちょっとだけ次を表示する高さに設定します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-16.png)
フッタを常に同じ高さで表示します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-17.png)
CSSで天地中央に配置する7つの方法。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-18.png)
ホバーで斜めの区切りをアニメーションでスライドさせます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-19.png)
CSSで実装されたアニメーションで動くピクチャウォール。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-08.gif)
パネルをぶらーんとアニメーションで表示します。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201404/2014122211-09.gif)
ホバーすると画像を拡大し、テキストをフェードさせます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-20.png)
アニメーションgifにしたら大容量になってしまったので静止画で。美しいフェードのエフェクトで画像を変更します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014122210-21.png)
ソリッドなラインのゴーストボタンに美しいグラデーションを与えます。
sponsors