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