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