[CSS]2013年、素敵なアイデア満載のスタイルシートのテクニックのまとめ
Post on:2013年12月20日
sponsors
今年もCSSの進化が止まりません。
これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。
利用する時にネックになるのがIEですが、来年になるとXPのサポートが終了、そういえばGmailなどのGoogle AppsでのIE9のサポートも終了しました（参考：サポートされているブラウザ -Google）。来年はより多くのテクニックが利用できるようになりそうですね。
というわけで、まずは今年もクリエイティブなCSSをたくさん生み出したCodropsからご紹介。
Simple Icon Hover Effects
デモページ
アイコンのホバー時に、CSS3アニメーションを使ったシンプルながら面白い9種類のエフェクト。
フラットなデザインにぴったりなリンクの21種類のエフェクト。
上記と同シリーズの今度はボタンのエフェクト。フラットだと難しいボタンも楽しくなります。
ボタンのクリックでプログレスバーを表示する18種類のエフェクト。いろいろなアイデアがあるものです。
Creative Loading Effects
デモページ
ローディング時のアニメーションのさまざまなエフェクト。↑はパイチャート型のエフェクト。
Nifty Modal Window Effects
デモページ
モーダルウインドウを表示するさまざまなエフェクト。フェードやスライド、くるっと回転したり、全面表示にしたり。
A Collection of Separator Styles
デモページ
1ページで構成されたウェブサイト用のコンテンツごとの区切りのスタイル。斜め、曲線、ジグザグ、図形を使ったものなどアイデア満載。
CSS3アニメーションを使ったちょっとかわいいローディングのエフェクト8種類。
半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のアニメーション。
窓越しの雨粒がどんどん増えていく癒やし系スタイルシート。
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダー。もちろんスクリプト無し。
Dynamic Inside Blur Pure CSS
デモページ
背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装。
Animated CSS3 Perspective Menu
デモ：水平、デモ：垂直
コンテンツを水平・垂直にぐぐぐっと傾けてナビゲーションを表示します。
画像は一切使用せず、その文字をホバーするとパタっと開きます。日本語でもOK！
カード状に重なったアイテムがぱかっと開いて、するすると落ちてくるドロップダウン。
p要素などで実装したテキストの天地に、半透明の美しいグラデーションのボーダーと背景を適用。
一見普通のミニマルなナビゲーションですが、オーバーレイのナビゲーションをかっこいいアニメーションで表示します。
パネルの表と裏をくるっと水平・垂直に軽快なアニメーションでひっくり返します。
背景を固定させて、カーテンを持ち上げるように次々にコンテンツを表示させます。
border-radiusを使って、角丸ではなく落書き風にボーダーをデザイン。
HTMLは要素一つだけ、枠線から背景をずらして、ゆる〜い感じにデザイン。
Body Border, Rounded Inside
デモページ
ページが長くても、ページ全体を角丸のボーダーで囲みます。
パネルをくるっと垂直・水平・斜めに回転させます。
ブラウザ上枠のすぐ下、ページの上部に美しいシャドウを加え、奥行きを与えます。
ホバーすると、パネルがアニメーションでパタッと開き、中からボタンが現れます。
Who Says the Web is Just for Squares?
デモページ
スタイルシートだけで斜めのダイヤモンド状のグリッドを実装します。
ソーシャルサービスのボタンをサイドに配置し、ぱたっとかわいいアニメーションで開きます。
スクリプト無しで、カーソルに追従するナビゲーション。
sponsors
