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