Advertisement

latesthtml2016aug2

 

ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。

 

 

「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。

 

 

 

詳細は以下から。

 

 

 

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

 

01. Fixed Images That Fades as You Scroll

画面を2分割し、スクロールに応じてイメージ画像を切り替えるエフェクト。流行しているウェブデザイントレンドのひとつ。

See the Pen fixed images that fade as your scroll by Dave Redfern (@daveredfern) on CodePen.

 

 

 

02. Double Exposure Carousel Slider

多重露光エフェクトをイメージスライダーに適用した、新しいアニメーションの実装方法。

See the Pen double exposure carousel slider by Misaki Nakano (@mnmxmx) on CodePen.

 

 

 

03. Cool Layout with Complex Changeable Animation

マウスホバーに合わせてアニメーション付きで展開するイメージスライダー。

See the Pen Cool Layout with Complex Chainable Animation by Nikolay Talanov (@suez) on CodePen.

 

 

 

04. Getting Clippy

スクロールに応じて、背景と文字テキストを切り替えるスライダーエフェクト。

See the Pen Gettin’ Clippy by Stephen Scaff (@StephenScaff) on CodePen.

 

 

 

05. SVG Slider

スライダーが切り替わるたびに、ポヨンとした動きを追加したイメージスライダー。

See the Pen JKkqRr by simon (@simonpatrat) on CodePen.

 

 

 

06. Flat Design Amusement Park SVG

SVG ファイルを使い、CSSのみでスタイリングされた、遊園地モチーフのアニメーション・エフェクト。

See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.

 

 

 

07. Link Hover Effect

シンプルで分かりやすいリンク用テキストエフェクトをセットにしています。

See the Pen kXjZqo by rtrsmarian (@rtrsmarian) on CodePen.

 

 

 

08. Flipper

マウスホバーに合わせて、パネルがパタパタと切り替わるようなテキストリンク用エフェクト。

See the Pen Flipper by Christian Petersen (@cbp) on CodePen.

 

 

 

09. Text Fading / Blurring Away

スクロールに応じて、文字テキストの開始と終了部分をフェードアウトで、ぼかすCSSスタイリング・テクニック。

See the Pen Text fading / blurring away by Erik Terwan (@terwanerik) on CodePen.

 

 

 

10. Image Hover 63 Effects

CSSのみでスタイリングされた、ホバーエフェクト63種類を揃えた、実用性の高いスニペットのひとつ。

See the Pen image hover 63 effects by Mahesh (@maheshambure21) on CodePen.

 

 

 

11. CSS Transform Examples

きちんと理解するまでスタリングがむずかしく感じることもある、css transform の違いをまとめたチート用サンプル。

See the Pen Css3 Transform by Vineeth.TR (@vineethtr) on CodePen.

 

 

 

12. Change Background Colors with Fade Animation As You Scroll

スクロールに応じて背景カラーを滑らかに変化させます。

See the Pen Change background colour with fade animation as you scroll by Dave Redfern (@daveredfern) on CodePen.

 

 

 

13. 404 Glitched Out

まるでパソコンが壊れてしまったような、グリッチエフェクトをCSSのみで再現しています。

See the Pen 404 – Glitched out by Jonathon Iles (@ZonFire99) on CodePen.

 

CSSを利用した、すこし前では考えられなかったテクニックが満載の2ページ目に続きます。

 

 

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ページ目に続きます。

 

 

27. Cool Button Hover Effect

アウトラインにアニメーションを加えた、ボタンエフェクト用スタリング。

See the Pen Cool button hover effect by Elena Nazarova (@nazarelen) on CodePen.

 

 

 

28. Fireworks Button

ボタンをクリックすると、かわいい火花が飛び散ります。

See the Pen Fireworks Button 😀 by Alex Zaworski (@alexzaworski) on CodePen.

 

 

 

29. Anime.js Logo Animation

アニメーション用ライブラリ Anime.js のサンプル用ロゴエフェクト。

See the Pen anime.js logo animation by Julian Garnier (@juliangarnier) on CodePen.

 

 

 

30. Logo

気持ちの良いアニメーションをロゴに採用した素敵なスタイリング。

See the Pen Logo by Marco Barría (@fixcl) on CodePen.

 

 

 

31. Auto-mation Animation

カクカクとした面白い動きを、ロゴデザインに加えるスタイリング。

See the Pen Auto-mation animation by Greg Hovanesyan (@gregh) on CodePen.

 

 

 

32. Text Slice Animation & Mix Blend Mode Invert

見出しタイトルにアニメーションを加え、使用している画像はモノクロですが、CSS filter で階調の反転を適用しています。

See the Pen Text Slice Animation and Mix Blend Mode Invert by Stephen Scaff (@StephenScaff) on CodePen.

 

 

 

33. Packery Layout with 3D Blocks

立体的なレイアウトと動きを、CSSでスタイリングしています。

See the Pen Packery layout with 3D blocks by Bennett Feely (@bennettfeely) on CodePen.

 

 

 

34. Delivery Truck Animation

@keyframes を利用することで、CSSのみでスタイリングされたアニメーション。

See the Pen Delivery truck animation by Dau Jakas (@donnervetter) on CodePen.

 

 

 

35. Mastercard Logo

先日リデザインされたロゴをCSSアニメーションで表現します。

See the Pen mastercard animation by Maxime Bonhomme (@maximebonhomme) on CodePen.

 

 

 

36. Styling CSS Counter

擬似要素を利用することで、より柔軟性のあるリスト形式のスタイリングを実現できます。

See the Pen Styling CSS Counters by Envato Tuts+ (@tutsplus) on CodePen.

 

 

 

37. The Illusion of Life: SVG Animation Case Study

アニメーションライブラリを比較しながら、読み込み速度も考慮したSVGアニメーションの実装テクニック。

See the Pen The Illusion of Life: An SVG Animation Case Study by Michael Ngo (@hellomichael) on CodePen.

 

 

 

38. Road Block

See the Pen Road Block by Chris Gannon (@chrisgannon) on CodePen.

 

 

 

39. SVG Kiosk Icon Menu

各アイコンをクリックするたびに、背景カラーがヌルリと移動するアニメーション。

See the Pen SVG Kiosk Icon Menu by Chris Gannon (@chrisgannon) on CodePen.

 

 

 

40. Blobs

マウスカーソルに追従するカラフルなアニメーションで、滑らかな動きはcanvasならでは。

See the Pen blobs by Misaki Nakano (@mnmxmx) on CodePen.

 

 

 

41. Rainbow Rotaing Dots

カラーホイールをモチーフにした配色のドット柄が渦を巻く、ユニークなローディング用アニメーション。

See the Pen Rainbow Rotating Dots by Nick Sheffield (@nicksheffield) on CodePen.