[CSS]最近のWebサイトで見かけるコンポーネントを実装するチェックしておきたい便利なスニペットのまとめ -LittleSnippets
Post on:2015年12月4日
最近のWebサイトで見かける気持ちいいアニメーションを使った、ナビゲーション、画像、ボタン、カード型レイアウトなど、HTML5+CSS3で実装されたさまざまなコンポーネントのスニペットを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120401.png)
LittleSnippetsでは、10のカテゴリ(+ボーナス)に100種類以上のスニペットが登録されており、どれも簡単に無料で利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120402-01.png)
「カートに入れる」「買い物カゴに入れる」など、コマースサイトでプロダクトを購入する際のスニペット。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120402-02.png)
テキストだけ、アイコンを併用したテキストで制作されたボタンのスニペット。気持ちいいアニメーションがいっぱいです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120402-03.png)
ホバー時にちょっとしたアニメーションを添えたアイコンのスニペット。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120402-04.png)
画像のホバーエフェクトで、ここが一番充実しています。単に装飾だけでなく、付加情報を表示させたり、アニメーションの種類も非常に豊富です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120402-05.png)
テキストと小さなアイコンだけで作成されたロゴデザイン。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120402-06.png)
メニューにちょうどいいシンプルなアニメーションのスニペット。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120402-07.png)
画像と見出しとテキスト、そしてリンクで構成されたカードのスニペット。きらっと光ったり、ズームしたり、最近よく見かけるやつですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120402-08.png)
価格表のスニペットで、一つが目立つようにデザインされており、それぞれにちょっとしたアニメーションが加えられています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120402-09.png)
カードと似ていますが、こちらは写真と見出しが主で、アイコンやキャプションが加えられたデザインになっています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120402-10.png)
引用のコンポーネントで、引用元を表示し、吹き出しなどを使い引用文を表示します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201504/2015120402-11.png)
Image Hover Effects using Page Curls
画像をホバーした際に、紙がくるっとしたカールのアニメーションを加えます。
sponsors