[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
Post on:2014年9月19日
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。
まずはアニメーションが楽しいデモから。
※上から10個くらいはアニメーションgifです。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201403/2014091401-04.gif)
ゴムのようにぐい~んと押した感が楽しいボタン。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201403/2014091401-01.gif)
かわいく実装されたリボンに繊細なアニメーションを加えます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201403/2014091401-11.gif)
スワイプすると、次々にカードがアニメーションで表示されます。
※切替にはスクリプトを使用。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201403/2014091401-02.gif)
検索フォームの通常時はサークル状のアイコンで、入力時に気持ちいいアニメーションで伸びます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201403/2014091401-03.gif)
テキストをホバーすると、背景に華やかなアニメーションを展開させます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201403/2014091401-05.gif)
CSS Responsive animated Accordion
アコーディオンに大胆なアニメーションを加えたデモ、レスポンシブ対応。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201403/2014091401-06.gif)
スクロールコンテンツで、スクロールを促すかっこいいアニメーション。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201403/2014091401-07.gif)
CSS Ripple/Wave checkbox and radio button
チェックボックスやラジオボタンを選択した時に広がる波紋のエフェクト。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201403/2014091401-08.gif)
UI Button SVG/CSS3 hover effect
SVGを使ったシンプルなかっこいいアニメーション。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201403/2014091401-09.gif)
フォームの入力時にアイテムを目立たせると入力しやすいですね。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091401-10.png)
CSSで実装されたカバーフロー。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091402-01.png)
Fixed header & BG with △ indicator, IE8 supported
IE8対応、固定ヘッダの上部に三角を配置。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091402-02.png)
繊細なグラデーションが美しいナビゲーション。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091402-03.png)
スクロールするとジグザグの背景が流れます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091402-04.png)
Border Animation Effect with SVG
ホバーすると、SVGを使った美しいアニメーションを適用します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091402-05.png)
画像無しで、パターンを使った背景を実装。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091402-06.png)
ホバーでシャドウがちらちらアニメーションします。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091402-07.png)
シンプルなマークアップで、かわいいジグザグのボーダーを実装。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091402-08.png)
コンテンツの区切りを斜めのラインで。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091402-09.png)
CSSアニメーションで実装するプリローダー。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091402-10.png)
CSSで行に対応する数字を実装します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014091402-11.png)
上部からライトが当たっているかのような繊細なグラデーション。
sponsors