[CSS]最近のWebサイトで見かけるコンポーネントを実装するチェックしておきたい便利なスニペットのまとめ -LittleSnippets

最近のWebサイトで見かける気持ちいいアニメーションを使った、ナビゲーション、画像、ボタン、カード型レイアウトなど、HTML5+CSS3で実装されたさまざまなコンポーネントのスニペットを紹介します。

サイトのキャプチャ

LittleSnippets

LittleSnippetsでは、10のカテゴリ(+ボーナス)に100種類以上のスニペットが登録されており、どれも簡単に無料で利用できます。

サイトのキャプチャ

‘Add to Cart’ Cards

「カートに入れる」「買い物カゴに入れる」など、コマースサイトでプロダクトを購入する際のスニペット。

サイトのキャプチャ

Buttons

テキストだけ、アイコンを併用したテキストで制作されたボタンのスニペット。気持ちいいアニメーションがいっぱいです。

サイトのキャプチャ

Icons

ホバー時にちょっとしたアニメーションを添えたアイコンのスニペット。

サイトのキャプチャ

Image Hovers

画像のホバーエフェクトで、ここが一番充実しています。単に装飾だけでなく、付加情報を表示させたり、アニメーションの種類も非常に豊富です。

サイトのキャプチャ

Logos

テキストと小さなアイコンだけで作成されたロゴデザイン。

サイトのキャプチャ

Menus

メニューにちょうどいいシンプルなアニメーションのスニペット。

サイトのキャプチャ

News Cards

画像と見出しとテキスト、そしてリンクで構成されたカードのスニペット。きらっと光ったり、ズームしたり、最近よく見かけるやつですね。

サイトのキャプチャ

Pricing Tables

価格表のスニペットで、一つが目立つようにデザインされており、それぞれにちょっとしたアニメーションが加えられています。

サイトのキャプチャ

Profile Cards

カードと似ていますが、こちらは写真と見出しが主で、アイコンやキャプションが加えられたデザインになっています。

サイトのキャプチャ

Testimonial Cards

引用のコンポーネントで、引用元を表示し、吹き出しなどを使い引用文を表示します。

サイトのキャプチャ

Image Hover Effects using Page Curls

画像をホバーした際に、紙がくるっとしたカールのアニメーションを加えます。

top of page

©2017 coliss