Advertisement

 

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

 

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

 

 

CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。

 

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

 

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

 

97位 Metallic Bordered Text with CSS

Photoshopで作成したような仕上がりの3D黄金テキストは、CSSのみでスタイリング、作成されています。

See the Pen
Metallic Bordered Text with CSS
by Shireen Taj (@TajShireen)
on CodePen.

 

 

96位 Confetti Button

クリックで紙吹雪が吹き出す面白アニメーションボタン。

See the Pen
Confetti Button
by Marco Biedermann (@marcobiedermann)
on CodePen.

Webサイトにおける「ボタン」は、使いやすさと分かりやすさが重要です。このバランスがなかなか悩みどころで、いつも同じスタイルのボタンを色を変えて再利用、なんてことも
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。どのボタンをHTMLとCSSのみで作成されているので、手軽にコピペで利用でき

 

 

94位 CSS-Only Calendar Layout [CSS Grid]

CSS Gridプロパティを利用したカレンダーレイアウト。

See the Pen
CSS-Only Calendar Layout [CSS Grid]
by Una Kravets (@una)
on CodePen.

 

 

89位 Apple TV – Word Rotation

グラデーション付きのテキストがスライド式にローテーションするスニペット。

See the Pen
Apple TV – Word Rotation
by Steven Lei (@stevenlei)
on CodePen.

 

 

87位 Text-decoration styling

下線アンダーラインのさまざまな種類をまとめたチートシート的スニペット。波ウェーブやドットなど。

See the Pen
Text-decoration styling
by Nikki Peel (@nikki-peel)
on CodePen.

この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンド

 

 

79位 CSS glowing icons

七色のネオンカラーに怪しく輝くライティング効果を、CSSのみで表現しています。

See the Pen
CSS glowing icons
by Krishna Gupta (@Krishnaa_Gupta)
on CodePen.

 

 

78位 Awesome Context Menu v2

ブラウザ上で右クリックすると、デフォルトメニューを上書きし、独自メニュースタイリングを可能に。配色の変更もその場で行うことができます。

See the Pen
Awesome Context Menu v2
by Simon Goellner (@simeydotme)
on CodePen.

 

 

74位 Sparkly skull ✨

無数の点を線で結び、骸骨スカルが浮かび上がるエフェクト。

See the Pen
Sparkly skull ✨
by Louis Hoebregts (@Mamboleoo)
on CodePen.

 

 

69位 「reflections」

クリックすると異なる世界を映し出す魔法の鏡。複数のGIFアニメーションをクリックで切り替えるテクニック。

See the Pen
「reflections」
by Jackie Zen (@jackiezen)
on CodePen.

 

 

68位 Sale Label

サムネイルを強調する、セール用のアニメーションラベルはいかがでしょう。レスポンシブ対応です。

See the Pen
Sale label
by @BrawadaCom (@Anna_Batura)
on CodePen.

この記事では、ナビゲーションメニューやテキストリンクを魅力的にするCSSホバーアニメーションをまとめています。 どれもHTMLスニペットとして公開され

 

 

65位 Responsive React Dashboard with Tailwind

CSSフレームワークTailwindをつかったダッシュボード向けUIデザイン。

See the Pen
Responsive React Dashboard with Tailwind
by Dilum Sanjaya (@dilums)
on CodePen.

 

 

61位 Infinite Scrolling Cards with GSAP and ScrollTrigger (continuous snap)

カーソルを上下させるだけで無限スクロールを実現したカード型カルーセル。

See the Pen
Infinite Scrolling Cards with GSAP and ScrollTrigger (continuous snap)
by GreenSock (@GreenSock)
on CodePen.

 

 

59位 60° Gradient Morphing Blob

グニャグニャと形と色を変化させるグラデーションBlobデザイン。

See the Pen
60° Gradient Morphing Blob
by George Francis (@georgedoescode)
on CodePen.

 

 

57位 Delivering happiness

入力したメールアドレスが吸い込まれていくアニメーションが素敵。

See the Pen
Delivering happiness
by tiffany choong (@tiffachoo)
on CodePen.

 

 

51位 Explode A Node: 3D Box Model

カード要素にホバーすると、構造を立体的に分けて見せることができる、CSSによる3Dアニメーション。

See the Pen
Explode A Node: 3D Box Model
by Adam Argyle (@argyleink)
on CodePen.

 

 

49位 Interactive Skate Loading

See the Pen
Interactive Skate Loading
by Aaron Iker (@aaroniker)
on CodePen.

 

 

48位 Interactive Kitten

マウスカーソルに合わせて猫が追いかけてくるかわいい仕掛け。

See the Pen
interactive kitten
by Masahito Leo Takeuchi (@Ma5a)
on CodePen.

 

 

42位 Portal scene – threejs-journey.xyz

ThreeJS Journeyの課題スニペットで、圧倒的な立体感を得意としたテクニック。

See the Pen
Portal scene – threejs-journey.xyz
by Arden (@aderaaij)
on CodePen.

 

 

40位 CSS morphing

CSS Filterプロパティを適用するだけのお手軽モーフィングエフェクト。

See the Pen
CSS morphing
by Amit Sheen (@amit_sheen)
on CodePen.

 

 

37位 TroisJS Starfield

画面の中心にあるボタンにカーソルを合わせると、ワープ空間に突入です。

See the Pen
TroisJS Starfield
by Kevin Levron (@soju22)
on CodePen.

 

 

28位 Generative macOS Big Sur Waves 🌊 [SVG]

macOSの壁紙デザインをボタンをクリックするたびにランダム生成し、SVGファイルとしてコピーできます。

See the Pen
Generative macOS Big Sur Waves 🌊 [SVG]
by George Francis (@georgedoescode)
on CodePen.

 

 

27位 Interactive particles text create with three.js

カーソルの動きに合わせて文字テキストが無数の粒となるアニメーションを、Three.JSで表現した作品。マウスクリックすると、、。

See the Pen
Interactive particles text create with three.js
by Ricardo Sanprieto (@sanprieto)
on CodePen.

 

 

25位 Self-Destruct Button

タイトル通りの自爆スイッチ。ボタンを押すとアラーム音が鳴り出します。

See the Pen
Self-Destruct Button
by Josetxu (@josetxu)
on CodePen.

 

 

24位 Animated Periodic Tables

元素記号の周期表に、アニメーションを加えた素晴らしい作品。

See the Pen
Animated Periodic Table
by Dilum Sanjaya (@dilums)
on CodePen.

 

 

23位 VoCSSels – Easily create 3D CSS & HTML Voxel Models

マインクラフトのようなボクセルアートを、CSSをつかって作成できるオンラインツール。

See the Pen
VoCSSels – Easily create 3D CSS & HTML Voxel Models
by Jamie Coulter (@jcoulterdesign)
on CodePen.

 

 

21位 Animated Button

クリックすると時間差で紙吹雪が飛ぶボタンアニメーション。

See the Pen
Animated Button
by Zane Wesley (@zanewesley)
on CodePen.

 

 

20位 Accordion gallery

マウスカーソルを合わせるだけで、スムーズな切り替えのできる画像スライダー。

See the Pen
Accordion gallery
by Tom Miller (@creativeocean)
on CodePen.

 

 

18位 Simple CSS Loaders

CSSのみでスタイリングされた、ローディングアニメーション。使い勝手が良く汎用性の高いのも特長。

See the Pen
Simple CSS loaders
by Jenning (@jenning)
on CodePen.

 

 

16位 Photo Tear

カーソルを上から下に動かすと、ビリっという効果音とともに写真を破ることができる、中毒性のあるスニペット。

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

 

 

15位 #2 in 2021 / Welcome / CSS Stylus Pug

See the Pen
#2 in 2021 / Welcome / CSS Stylus Pug
by Toshiya Marukubo (@toshiya-marukubo)
on CodePen.

 

 

12位 Checkbox group styled as tiles

CSSチェックボックスをタイル状にスタイリングしたスニペット。

See the Pen
Checkbox group styled as tiles
by Håvard Brynjulfsen (@havardob)
on CodePen.

 

 

11位 Product Showcase UI

商品向けレイアウトで、背景画像と商品を重ねて表示することで、よりブランドらしさを強調したデザインを演出できます。

See the Pen
Product Showcase UI
by Aysenur Turk (@TurkAysenur)
on CodePen.

 

 

10位 React Color Gradients

ReactをつかってCSSカラーグラデーションを生成するテクニック。

See the Pen
React Color Gradients
by Marco Biedermann (@marcobiedermann)
on CodePen.

 

 

7位 Generative UI – Orb Animation [pixi.js] + Frosty Elements ❄️

アニメーション付きの美しいグラデーションBlobのつくり方を紹介したチュートリアルのサンプルスニペット。

See the Pen
Generative UI – Orb Animation [pixi.js] + Frosty Elements ❄️
by George Francis (@georgedoescode)
on CodePen.

 

 

6位 Magic Card

カードの周りのグラデーションがじわりと変化するCSSアニメーションがポイント。

See the Pen
Magic Card
by Gayane (@gayane-gasparyan)
on CodePen.

 

 

5位 Animated Tab Bar v.2

アイコンをクリックするとアニメーション付きで文字テキストが表示される、モバイル向けナビゲーションメニュー。

See the Pen
Animated Tab Bar v.2
by abxlfazl khxrshidi (@abxlfazl)
on CodePen.

 

 

4位 About Us Pop-Out Effect

clip-path: path()プロパティを利用し、飛び出るポップアウト型のエフェクトを実現したチュートリアルのサンプルスニペット。

See the Pen
About Us Pop-Out Effect
by Mikael Ainalem (@ainalem)
on CodePen.

 

 

3位 Skateboard Video Platform

ビデオ動画向けプラットフォームを想定した、レスポンシブ対応のUIダッシュボードデザイン。

See the Pen
Skateboard Video Platform
by Aysenur Turk (@TurkAysenur)
on CodePen.

 

 

2位 Parallax Photo Carousel

マウスカーソルの動きに合わせ、画像が左右へと立体的にスライドするスニペット。

See the Pen
Parallax Photo Carousel
by Tom Miller (@creativeocean)
on CodePen.

 

 

そして、2021年にもっとも多くのいいねハートを獲得したのがこちら。人気スタイル「グラスモーフィズム」で完全再現された、Adobe CCアプリのコンセプトデザインです。

See the Pen
Glassmorphism Creative Cloud App Redesign
by Aysenur Turk (@TurkAysenur)
on CodePen.

 

 

ちなみに前年、2020年の人気スニペットベスト100は、こんな内容でした。

HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2020年に特に人気