Advertisement

 

HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen

 

この記事は、2020年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2020 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。

 

CSSのみで表現されているとは思えない、シンプルながら効果的なテクニックが多数ランクインしていた2020年。

 

HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。

 

 

2020年にCodepenで話題!コピペ可なHTMLスニペット ベスト100発表

 

94位 Animated clip-path slider Concept

画面を縦半分に二分割した画像スライダーで、画像にマウスホバーしたときの文字テキストの表示方法も素敵。

See the Pen
Animated clip-path slider Concept
by Jake Whiteley (@jakewhiteleydev)
on CodePen.

 

 

 

92位 Yet another slider

キーボードの上下または下方向へのスワイプでも切り替え可能な画像スライダー。

See the Pen
Yet another slider
by Arseny M. (@theseventh)
on CodePen.

 

 

 

89位 GSAP ScrollTrigger – Demo

スクロールに応じたアニメーションを手軽に扱うことができるGSAPのプラグインScrollTriggerのデモページ。表現力がぐんと広がるだけでなく、最適化され軽量な点もポイント。

See the Pen
GSAP ScrollTrigger – Demo
by Noel Delgado (@noeldelgado)
on CodePen.

 

 

 

85位 Pure CSS Glitch Experiment (Twitch Intro WIP)

画面が乱れたようなグリッチエフェクトをCSSのみで再現したテキストエフェクト。

See the Pen
Pure CSS Glitch Experiment (Twitch Intro WIP)
by Elisabeth Diang (@elisabethdiang)
on CodePen.

 

 

 

83位 Merry Christmas Tree!

SVGで描かれたクリスマスツリーの形に沿って光るラインがアニメーションするスニペット。

See the Pen
Merry Christmas Tree!
by Chris Gannon (@chrisgannon)
on CodePen.

 

 

 

82位 “Toss” Add to Cart Animation

購入ボタンをクリックすると、商品かごに「トス」されるユニークな仕掛け。

See the Pen
“Toss” Add to Cart Animation
by Jesse Couch (@designcouch)
on CodePen.

 

 

 

79位 CSS mouse-out transition effect

CSSのみで表現できるテキストホバーエフェクトで、ラインが左から右に移動する目を引くテクニック。

See the Pen
CSS mouse-out transition effect
by Adam Argyle (@argyleink)
on CodePen.

 

 

 

72位 Smash to submit button

ボタンを連打し、ベンチプレスを持ち上げると送信ができる仕掛け。

See the Pen
Smash to submit button
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

65位 Services Section | Learn CSS Garden

CSS Gridプロパティで組まれた、実用的なランディングページ向けレイアウト。

See the Pen
Services Section | Learn CSS Garden
by Ahmed Nasr (@ahmedhosna95)
on CodePen.

 

 

 

62位 Sliding tabs | CSS transitions only

CSSアニメーションで適用できるタブのスライド遷移エフェクト。

See the Pen
Sliding tabs | CSS transitions only
by Håvard Brynjulfsen (@havardob)
on CodePen.

 

 

 

57位 CSS Typing Effect

CSSオンリーで表現できるタイピングエフェクト。

See the Pen
CSS Typing Effect
by Marko (@denic)
on CodePen.

 

 

 

53位 Clipped Image Reveal on Hover

文字テキストにマウスホバーするとサークル状に画像が表示されるスニペット。

See the Pen
Clipped Image Reveal on Hover
by Katherine Kato (@kathykato)
on CodePen.

 

 

 

52位 Shopping UI

左側のスクリーンより商品購入ボタンをクリックすると、瞬時に右スクリーンに反映されます。ポップアップ・エフェクトも素敵。

See the Pen
Shopping UI
by morooka (@mo-ro)
on CodePen.

 

 

 

48位 Coin Flip Donate Button

ボタンクリックでコインがくるくる回転する寄付を想定したエフェクト。

See the Pen
Coin Flip Donate Button
by Cooper Goeke (@coopergoeke)
on CodePen.

 

 

 

45位 Underline animation

文字リンクにホバーするとアンダーラインが矢印に変化するCSSエフェクト。

See the Pen
Underline animation
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

42位 Kill The King – Vue / HTML games

出てくる相手をひたすら斬りまくるオンラインミニゲーム。

See the Pen
Kill The King – Vue / HTML game
by Jamie Coulter (@jcoulterdesign)
on CodePen.

 

 

 

40位 404 Page

イラストに控えめなアニメーションをGSAPで実装した404ページ。

See the Pen
404 Page
by Kasper De Bruyne (@kdbkapsere)
on CodePen.

 

 

 

36位 Pricing – pure css – #16

金額プランの切り替えなどCSSオンリーでスタイリングされており、カード型コンテンツからはみ出る画像がいい感じ。

See the Pen
Pricing – pure css – #16
by Ivan Grozdic (@ig_design)
on CodePen.

 

 

 

33位 Profile Card Hover Effect

カードにホバーすると顔写真がズームアップされるCSSホバーエフェクト。

See the Pen
Profile Card Hover Effect
by P (@petegarvin1)
on CodePen.

 

 

 

31位 Pure CSS Product Card

自転車のホイールの変更アニメーションをCSSのみで実現したプロダクトカード用レイアウト。

See the Pen
Pure CSS Product Card
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

 

25位 Book Store UI

本や雑誌の販売を目的としたオンラインストアのUIデザイン。実用的で

See the Pen
Book Store UI
by Aysenur Turk (@TurkAysenur)
on CodePen.

 

 

 

23位 ScrollTrigger: SVG Text Mask

SVGテキストマスク・テクニックを活用し、スクロールすることで雲の影から文字テキストが出現します。

See the Pen
ScrollTrigger: SVG Text Mask
by Tom Miller (@creativeocean)
on CodePen.

 

 

 

20位 CSS leaning card effect

並べた画像を超立体的でリアルに立てかけるCSSスタイリングのスゴ技。

See the Pen
CSS leaning card effect
by Lynn Fisher (@lynnandtonic)
on CodePen.

 

 

 

19位 Glowing Buttons

ネオン色に輝くボタンエフェクトは、高速で回転するラインがSFチックなUIデザインに。

See the Pen
Glowing buttons
by Pranjal Bhadu (@bhadupranjal)
on CodePen.

 

 

 

14位 Diagonal Layouts in 2020

ウェブサイトに斜めのコンテンツレイアウトを表示できるCSSテクニックを、それぞれ解説を見ながらデモを確認できます。

See the Pen
Diagonal Layouts in 2020
by Nils Binder (@enbee81)
on CodePen.

 

 

 

13位 CSS3 Loader & Spinners

CSSのみで表現できるシンプルなローディングアニメーションを各種揃えたライブラリ的スニペット。

See the Pen
CSS3 Loader & Spinners
by Vineeth.TR (@vineethtrv)
on CodePen.

 

 

 

12位 Link hover animation

テキストリンクにホバーすると、ラフなサークル状の丸で囲むホバーエフェクト。

See the Pen
Link hover animation
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

10位 A Pure CSS Game – You Must Build a Lighthouse.

とてもCSSだけでデザインされているとは思えない、クオリティーの高すぎるミニゲーム。クリックしたマス目に応じて、家の形が変化していきます。

See the Pen
A Pure CSS Game – You Must Build a Lighthouse.
by Ben Evans (@ivorjetski)
on CodePen.

 

 

 

7位 Toggles

8種類のユニークなトグルスタイルをCSSのみで表現したスニペット集。個人的にバスケットボールとビアポンがツボでした。

See the Pen
Toggles
by Olivia Ng (@oliviale)
on CodePen.

 

 

 

6位 Voyage Slider | GSAP

カード型コンテンツの切り替えに応じて、背景も変化する画像スライダー。没入感のあるアニメーションに注目です。

See the Pen
Voyage Slider | GSAP
by Sikriti Dakua (@dev_loop)
on CodePen.

 

 

 

4位 Candy Color Button Animation

キャンディーのようなカラフルな配色をつかったボタンホバーエフェクト集で、16種類のスタイルをコピペで利用できます。

See the Pen
Candy Color Button Animation
by Yuhomyan (@yuhomyan)
on CodePen.

 

 

 

3位 CSS Grid: Newspaper Layout

新聞のようなコンテンツレイアウトをCSS Gridプロパティを用いて表現したスニペット。画面サイズの小さなスマホにもバッチリ対応したレスポンシブ仕様。

See the Pen
CSS Grid: Newspaper Layout
by Olivia Ng (@oliviale)
on CodePen.

 

 

 

2位 Airplanes.

マウススクロールしていくと、飛行機の機体の詳細などをストーリーテリング手法で紹介する、魅力がつまったランディングページ。

See the Pen
Airplanes.
by Steve Gardner (@ste-vg)
on CodePen.

 

 

 

1位 Card Hover Interactions

2020年にもっともイイネを集めたスニペットがこちら。カード型ホバーエフェクトで、文字テキストのスライドに合わせて、背景の画像も若干変化する控えめなアニメーション。

See the Pen
Card Hover Interactions
by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

 

ちなみに、2019年の人気スニペットはこんな感じでした。

HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるCodepen。その中でも、2019年のあいだに特に人気の高かったコードを、ランキング形式でまとめた