コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ

14. Full CSS Map Creator

CSS のみで作成できる地図作成キットで、クリックすることで土地の種類を選択できます。

See the Pen Full CSS Map creator by Vincent Durand (@onediv) on CodePen.

 

 

 

15. Payment UX

SVG と CSS でスタイリングされた、ショッピングの決済用UXデザインのコンセプト。

See the Pen Payment UX by Jon Kantner (@jkantner) on CodePen.

 

 

 

16. Credit Card Checkout

サングラスを掛けたキャラクターが、購入ボタンのクリックを促すCSSエフェクト。

See the Pen DailyUI 002: Credit Card Checkout by Alex Zaworski (@alexzaworski) on CodePen.

 

 

 

17. Contact Me Animation Concept

紙飛行機が飛んでいくアニメーションエフェクトを実装した、お問い合わせ用CTAレイアウト。

See the Pen Contact Me Animation Concept by Nizar (@nizarmah) on CodePen.

 

 

 

18. Title Text Animation

見出しタイトルやロゴデザインなどにも活用したい、ふわりとフェードインで表示されるテキストエフェクト。

See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.

 

 

 

19. Interactive Map with jQuery

SVGでデザインされた立体的な地図をつかい、セクションごとに色分けしていきます。

See the Pen Interactive Map with Jquery by Sara B. (@sara_bianchi94) on CodePen.

 

 

 

20. Loader a Day17

CSSでスタリング、デザインされた読み込みローディング用アニメーション。

See the Pen Loader a Day (day 17) by Reinier Kaper (@TheDutchCoder) on CodePen.

 

 

 

21. Android Nouget Update Animation

こちらもCSSのみでスタイリングされた、円形サークルをレイヤー状に重ね、アニメーションを加えています。

See the Pen Android Nougat update animation by Stove (@stevn) on CodePen.

 

 

 

22. Mystery Meat Hamburger Menu

どこでも見かけるハンバーガーメニューですが、ボタンを押そうとするとなかなか押すことができません。

See the Pen Mystery Meat Hamburger Menu 🍔 by Tommy Hodgins (@tomhodgins) on CodePen.

 

 

 

23. They Call it Big-Mac

ハンバーガーメニューに文字テキストを加え、ユニークなアニメーションでより魅力的に。

See the Pen They call it le Big-Mac by Ruslan (@mrspok407) on CodePen.

 

 

 

24. Animation Dial Button

モバイル向けレイアウトなどにも活用できる、クリックで展開するサークル型ナビメニュー。

See the Pen Animated dial buttons by jh3y (@jh3y) on CodePen.

 

 

 

25. Three Simple CSS Button Hover Effects

半透明レイヤーを重ねた、CSSでスタイリングされたボタン・ホバーエフェクト。

See the Pen Three Simple CSS Button Hover Effects by Dronca Raul (@rauldronca) on CodePen.

 

 

 

26. Micro Interaction Button

ホバーによって矢印を移動させることで、より押したくなるボタンを演出します。

See the Pen Micro Interaction Button by Phil Hoyt (@philhoyt) on CodePen.

 

今後、特にデザインで重要になってくるアニメーションを加えた、ボタンエフェクトなどの3ページ目に続きます。