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