CSSの実用的なテクニックから素晴らしいアイデアまで！スタイルシートの最新テクニックのまとめ
Post on:2015年6月2日
sponsors
次のプロジェクトに使ってみたくなるような実用的なものをはじめ、CSSでこんなこともできるの！という素晴らしいアイデアまで、クリエイティブなスタイルシートのテクニックを紹介します。
アニメーションで動くハートを実装する様子をアニメーションで楽しめます。
これにインスパイアされたWebページ作成編yourwebdevもあります。
一見ただの角丸ボタン、ほっておくとプルっとします。
ぽよんと弾けて、波紋のように広がります。
Pseudo Placeholders in Pure CSS
プレースホルダーのテキストを入力時にアニメーションで移動させます。
Nearly CSS3 Animated Search Input
SVGのように見えるかもしれませんが、検索アイコンも入力欄もアニメーションもCSSで実装された検索ボックス。
※classの置き換えにスクリプトを使用しています。
ID/PWを入力してからログインするまでのコンセプトデザイン。
バリバリにスクリプトを使用していますが、あまりにもかっこいいのでご紹介。
チェックボックスのチェックがダイナミックなアニメーションで表示・非表示されます。
Pure CSS Fullscreen Navigation
フルスクリーンのナビゲーションをピュアCSSで実装しています。
オフキャンバスのメニューを下部からポップアウトで表示します。
※トグルの切り換えにスクリプトを使用しています。
a要素で囲ったテキストに適用するかっこいいホバーエフェクト集。
上記の第二弾。実装力だけでなく、そのアイデアもすごいですね！
背景とボーダーをずらしたかわいいデザインのボタン。
ボタンをホバーした際のさまざまなエフェクトのまとめ。
ボタンをホバーした際に、ボーダーや背景をアニメーションさせます。
CSS Only Material Design Animated Buttons
Material Designの美しい波紋のエフェクトをピュアCSSで実装。
Material Designのエフェクトは波紋だけではありません。
Animated Gradient Ghost Button
移り変わる繊細なグラデーションのアニメーションが美しいゴーストボタン。
パララックスの視差効果を使い、プロダクトを3Dに見せます。
フッタをコンテンツ量が少ない時は最下部に固定表示、コンテンツ量が多い時は成り行きで表示させます。
見出しを斜めに組み合わせてレイアウト、雑誌風でかっこいい！
画像をさまざまな形状に分割して、アニメーションで表示します。
sectionで実装したパネルを自由に形状で切り取ります。
ピュアCSSのドロップダウンは当ブログでもいくつか紹介してきましたが、そのディテールや細かいエフェクトなどかなり作りこまれています。
CSS3 Responsive Navigation Menu
レスポンシブ対応のシンプルなドロップダウン型のナビゲーション。
テキストベースのシンプルなナビゲーションのさまざまなホバーエフェクト集。
ページ全体を使った大胆なナビゲーション。その動きはぜひデモで！
スクリプトを併用した実装ですが、こういう使って楽しそうなUIはいいですね。
最後は、なんとピュアCSSでつくられたロールプレイングゲーム。もちろん動きます。
sponsors
