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