on:2015年12月4日sponsors最近のWebサイトで見かける気持ちいいアニメーションを使った、ナビゲーション、画像、ボタン、カード型レイアウトなど、HTML5+CSS3で実装されたさまざまなコンポーネントのスニペットを紹介します。LittleSnippetsLittleSnippetsでは、10のカテゴリ(+ボーナス)に100種類以上のスニペットが登録されており、どれも簡単に無料で利用できます。Cards「カートに入れる」「買い物カゴに入れる」など、コマースサイトでプロダクトを購入する際のスニペット。Buttonsテキストだけ、アイコンを併用したテキストで制作されたボタンのスニペット。気持ちいいアニメーションがいっぱいです。Iconsホバー時にちょっとしたアニメーションを添えたアイコンのスニペット。Hovers画像のホバーエフェクトで、ここが一番充実しています。装飾だけでなく、付加情報を表示させたり、アニメーションの種類も非常に豊富です。Logosテキストと小さなアイコンだけで作成されたロゴデザイン。Menusメニューにちょうどいいシンプルなアニメーションのスニペット。Cards画像と見出しとテキスト、そしてリンクで構成されたカードのスニペット。光ったり、ズームしたり、最近よく見かけるやつですね。Tables価格表のスニペットで、一つが目立つようにデザインされており、それぞれにちょっとしたアニメーションが加えられています。Cardsカードと似ていますが、こちらは写真と見出しが主で、アイコンやキャプションが加えられたデザインになっています。Cards引用のコンポーネントで、引用元を表示し、吹き出しなどを使い引用文を表示します。Curls画像をホバーした際に、紙がくるっとしたカールのアニメーションを加えます。