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