この記事では、ウェブデザインの仕上がりをワンランクアップする最新HTML／CSSスニペットをまとめてご紹介します。
掲載しているほとんどの作品が、レスポンシブ対応となっており、コードを直接コピペできるのも特長です。
CSSのあまり知られていない小技テクニックから、2022年のWebデザイントレンドを意識したスニペットや、魅力的なアニメーションなどがずらり揃います。
昨年人気の高かったベスト・スニペット100や、一発コピペできるCSSボタン、すごいCSSアニメーションなどと一緒にチェックしてみてはいかがでしょう。
コピペできる！Webサイトがかっこよくなる最新HTMLスニペットまとめ
See the Pen
Split animation on hover with single element by Gautam Singla (@ggsingla)
on CodePen.
See the Pen
Cpc-timekeeping: Gooey countdown svg by Fabio Ottaviani (@supah)
on CodePen.
See the Pen
Stroke Logo Animation by Jon Kantner (@jkantner)
on CodePen.
See the Pen
Random dots along path – CodePen Challenge by Louis Hoebregts (@Mamboleoo)
on CodePen.
See the Pen
Hippity Hop by Kit Jenson (@kitjenson)
on CodePen.
金額表を作成しながら、transformプロパティの具体的で、効果的な使い方テクニックが披露されています。
See the Pen
CSS Transforms: Pricing table by Envato Tuts+ (@tutsplus)
on CodePen.
See the Pen
AI Art Generator by Yannick Brandt (@Coderesting)
on CodePen.
See the Pen
melty line goodness by Andy Fitzsimon (@andyfitz)
on CodePen.
See the Pen
Lotsa Notifications by Jon Kantner (@jkantner)
on CodePen.
マウスカーソルを下に移動させると、ジャンプをしながらキャラクターが進んでいくタイムライン。
See the Pen
Super Mario Scrollable Timeline by Adam Kuhn (@cobra_winfrey)
on CodePen.
See the Pen
Claymorphism + Glassmorphism by MOZZARELLA (@TheMOZZARELLA)
on CodePen.
See the Pen
Custom Right-Click (Context) Menu by Mert Cukuren (@knyttneve)
on CodePen.
トグルをオフにするとすべてのアニメーションが停止し、アクセシビリティを考慮したデザインに。
See the Pen
Reduced-motion toggle by Michelle Barker (@michellebarker)
on CodePen.
ABC順に単語を並べたリストで、スクロールに合わせてアルファベットのみ固定されるCSSテクニック。
See the Pen
Sticky Definition List by Chris Coyier (@chriscoyier)
on CodePen.
See the Pen
Sketch Button by Aaron Iker (@aaroniker)
on CodePen.
クリックのたびにダイナミックな動きが目を引くラジオボタン、CSSオンリーでスタイリングされています。
See the Pen
FlipBoxes by Amit Sheen (@amit_sheen)
on CodePen.
See the Pen
Pay Button by Aaron Iker (@aaroniker)
on CodePen.
See the Pen
3D Hover Buttons by smpnjn (@smpnjn)
on CodePen.
See the Pen
Gentle button ‘explode’ by Cassie Evans (@cassie-codes)
on CodePen.
クリック速度にも反応するボタンは、何度も押したくなるようなエフェクトが特長。
See the Pen
#codeVember #4/2021: soft buttons (hover/ focus and press – keep pressed, release, click fast, play with it ) by Ana Tudor (@thebabydino)
on CodePen.
See the Pen
Morphing Submit Button by Jon Kantner (@jkantner)
on CodePen.
ホバーで背景が光ったり、半透明だったり、グラデーションのボーダー付など、人気の高いCSSボタンデザインがセットに。
See the Pen
Web3 Styles: Buttons by Trisha Lim (@trishalim)
on CodePen.
ボタン系スニペットは他にもたくさんあります。コピペできるボタン用CSSコードを一覧にした記事も参考にどうぞ。
See the Pen
Cool send button by (@Timeto)
on CodePen.
See the Pen
CSS only Border hover effect by Temani Afif (@t_afif)
on CodePen.
&mbsp;
CSS Transformプロパティで実現するホバーエフェクト
See the Pen
Image hover effect #5 by Envato Tuts+ (@tutsplus)
on CodePen.
See the Pen
Explode A Node: 3D Box Model by Adam Argyle (@argyleink)
on CodePen.
See the Pen
Ripples by Liam Egan (@shubniggurath)
on CodePen.
See the Pen
Parallax Slideshow by Bruno Carvalho (@bcarvalho)
on CodePen.
See the Pen
Product Showcase UI by Aysenur Turk (@TurkAysenur)
on CodePen.
See the Pen
Cards Carousel on 3D Cube – CSS Only by MOZZARELLA (@TheMOZZARELLA)
on CodePen.
WebGLテクノロジーを駆使した、なめらかな動きが特長のグリッドレイアウト。
See the Pen
Infinite scrollable and draggable (WebGL)grid by jesper landberg (@ReGGae)
on CodePen.
See the Pen
Slideshow Vanilla JS w/ CSS Transition by Riley Adair (@RileyAdair)
on CodePen.
See the Pen
page flip by Jake Albaugh (@jakealbaugh)
on CodePen.
プロパティの違いによって、どのように動きに変化が出るのかリアルタイムで確認プレビューできます。右下の「Compare」ボタンで比較してみましょう。
See the Pen
Twisting by Adir (@Adir-SL)
on CodePen.
See the Pen
Generative + Customisable SVG Social Images! by George Francis (@georgedoescode)
on CodePen.
ほんのおわずかなCSSの記述で表現できるアニメーションテクニック。
See the Pen
Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O)
on CodePen.
See the Pen
Focusss by Hakim El Hattab (@hakimel)
on CodePen.
レスポンシブ対応の区切り線を描くCSS小技テクニック。
See the Pen
Flexbox Dynamic Line Separator by Ahmad Shadeed (@shadeed)
on CodePen.
