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.
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位 「ｒｅｆｌｅｃｔｉｏｎｓ」
クリックすると異なる世界を映し出す魔法の鏡。複数のGIFアニメーションをクリックで切り替えるテクニック。
See the Pen
「ｒｅｆｌｅｃｔｉｏｎｓ」 by Jackie Zen (@jackiezen)
on CodePen.
68位 Sale Label
サムネイルを強調する、セール用のアニメーションラベルはいかがでしょう。レスポンシブ対応です。
See the Pen
Sale label by @BrawadaCom (@Anna_Batura)
on CodePen.
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は、こんな内容でした。
