売れるウェブの最新HTML/CSSテクニック40選

See the Pen Timed Cards Opening by Dilum Sanjaya (@dilums) on CodePen.

Firefly Button

マウスホバーするとまるで蛍のようにぼんやりと輝くボタンエフェクト。

See the Pen Firefly Button by Shae Scotten (@ShaeSco) on CodePen.

Hi-Tech Notification Button

ネオンカラーが印象的なハイテク系の通知ボタンエフェクト。

See the Pen Hi-Tech Notification Button by MOZZARELLA (@TheMOZZARELLA) on CodePen.

Subtle text “highlighter” in pure CSS

蛍光マーカーペンで線を引いたようなハイライトエフェクトをCSSのみで表現できる実用向けスニペット。

See the Pen Subtle text "highlighter" in pure CSS by Cassidy (@cassidoo) on CodePen.

Progressively enhanced infinite horizontal scroll

横方向の無限スクロール。ユーザーがprefers-reduced-motion: reducedを指定した場合、アニメーションはなく、アイテムは隠される代わりに折り返されます。

See the Pen Progressively enhanced infinite horizontal scroll by Kevin (@kevinpowell) on CodePen.

See the Pen Interactive Gradient & Glassmorphism with noise by TOMAZKI (@Podgro) on CodePen.

Single Keyframe Tricks

9種類のボタンホバーエフェクトをまとめたミニライブラリで、CSSのみでスタイリングされたスニペットが揃います。

See the Pen Single Keyframe Tricks by David East (@davideast) on CodePen.

Syntax highlighting with a Colr Font

カラーフォントをつかってスタイリングされたシンタックスハイライター。

See the Pen Syntax highlighting with a Colr Font by Adam Argyle (@argyleink) on CodePen.

Neon lights

9種類のボタンホバーエフェクトをまとめたミニライブラリで、CSSのみでスタイリングされたスニペットが揃います。

See the Pen Neon lights by Andrii Rodzyk (@rodzyk) on CodePen.

CSS-only Custom range slider with motion

スクロール駆動アニメーションをスライダーレンジに活用し、ダイナミックな動きを追加。

See the Pen CSS-only Custom range slider with motion by Temani Afif (@t_afif) on CodePen.

SVG Filter + CSS Animation

See the Pen SVG Filter + CSS Animation by vainsan (@vainsan) on CodePen.

Step Indicator

See the Pen Step Indicator by Jon Kantner (@jkantner) on CodePen.

Rube Goldberg HTML form

名前やメールアドレス、利用規約チェックを入れると動き出す、ピタゴラスイッチ的HTMLフォーム。

See the Pen Rube Goldberg HTML form by Ksenia Kondrashova (@ksenia-k) on CodePen.

CSS Shock Manga Lines

漫画のあの集中線、効果線をCSSで表現したユニークなHTMLスニペット。位置さえ変更すれば、手持ちの画像でも対応できます。

See the Pen CSS Shock Manga Lines by Alvaro Montoro (@alvaromontoro) on CodePen.

Holo Button

さまざまな角度から押すことができる3Dホログラフィック風3Dボタンエフェクト。

See the Pen Rube Goldberg HTML form by Ksenia Kondrashova (@ksenia-k) on CodePen.

ScrollTrigger DJ w/ Web Audio API

レコードの上で上下にスクロールするとスクラッチができるDJスニペット。

See the Pen ScrollTrigger DJ w/ Web Audio API by Adam Kuhn (@cobra_winfrey) on CodePen.

See the Pen CSS only navigation with rotating text hover effect by Chris Bolson (@cbolson) on CodePen.

See the Pen Bouncy menu hover effect (with Anchor Positioning) by Temani Afif (@t_afif) on CodePen.

Words of Pride Rotating Quote Script:

See the Pen Words of Pride Rotating Quote Script: Featuring inspiring Quotes by Gilbert Baker by Mark Sottek (@mark_sottek) on CodePen.

page transition overlay

See the Pen page transition overlay by misala (@p0waqqatsi) on CodePen.

Cards with inverted border-radius #scss

CSSで実現できる、ありそうでなかった丸みのあるカードスタイリング。

See the Pen Cards with inverted border-radius #scss by Kristen (@kristen17) on CodePen.

AI Animated Button

電気ビリビリなAIアニメーションボタン。

See the Pen AI Animated Button by CJ Gammon (@cjgammon) on CodePen.

Behind The Fold

「クリック厳禁」と書かれたボタンを押すと…。

See the Pen Behind The Fold by Rafa (@RAFA3L) on CodePen.

Warning bar

無限アニメーションする警告バー。

See the Pen Warning bar by Morgan (@mog13) on CodePen.

See the Pen ScrollTrigger Image Zoom by GSAP (@GreenSock) on CodePen.

See the Pen Stacked Cards with Autoplay | Vanilla Javascript & CSS by Ecem Gokdogan (@ecemgo) on CodePen.

See the Pen Cube Effect Slider | Swiper JS and tsParticles by Ecem Gokdogan (@ecemgo) on CodePen.

VFX-JS scroll animation

スクロールに合わせ文字がゆがむグリッチエフェクトを表現できるJSアニメーション。

See the Pen VFX-JS scroll animation by Amagi (@fand) on CodePen.

Twitching text

チカチカとちらつきのある、CSSオンリーで表現できるテキストエフェクト。

See the Pen Twitching text by Amit Merchant (@amit_merchant) on CodePen.

See the Pen Inverted border-radius using CSS mask by Temani Afif (@t_afif) on CodePen.

See the Pen Doom Scroll – Front End Conf 2024 Demo by Adam Kuhn (@cobra_winfrey) on CodePen.

See the Pen Warp Speed by Matthias Hurrle (@atzedent) on CodePen.

See the Pen Neuro Noise (GLSL Shader) by Ksenia Kondrashova (@ksenia-k) on CodePen.

See the Pen Lotsa Notifications by Jon Kantner (@jkantner) on CodePen.