目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。
「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。
この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。
しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。
HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。
こんなことできるの?!最新HTMLテクニック・スニペット
最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。
See the Pen Cards (gradient border) by Dan (@dtab428) on CodePen.
カードにホバーするとマウスポインターを中心からカードのエッジにかけて、鮮やかなグラデーションを表現できるホバーエフェクト。
See the Pen Proximity Glow Cards by Jhey (@jh3y) on CodePen.
ポータル空間をクリックすると、他の世界へ無限ワープでき、マウスドラッグで辺りを見渡すこともできます。
See the Pen Infinite Portals by Karim Maaloul (@Yakudoo) on CodePen.
staggered Clipath animation using GSAP (share bars)
Clippathを利用して段階的に切り替わる、GSAPをつかった画像スライダーアニメーション。
See the Pen staggered Clipath animation using GSAP (share bars) by Snorkl.tv (@snorkltv) on CodePen.
CSS only marquee with slow on hover
文字テキストが左右にスクロール展開するアニメーションをCSSのみで表現するテクニック。ホバーすると動きが遅くなります。
See the Pen CSS only marquee with slow on hover by Matthew Morete (@matthewmorete) on CodePen.
ボタンをクリックすると、くるくると回転しながら賞金額が表示されるエフェクト。
See the Pen Squid Game Prize Counter by Hyperplexed (@Hyperplexed) on CodePen.
マウススクロールに合わせて画像が移動するアニメーション。少しだけ角度をつけたことで、躍動感ある動きを演出できます。
See the Pen Smooth Scrolly Images by GSAP (@GreenSock) on CodePen.
CSSのみでデザインできる、ホバー時にキラリと輝くボタンエフェクト。
See the Pen CSS Only Shimmer Button by Simon Goellner (@simeydotme) on CodePen.
折り曲げた紙の上を移動するテキストエフェクトは、CSSのみで表現されたスニペット。
See the Pen Bendy text by Amit (@ghaste) on CodePen.
CSS Gridでスタリングされたチームメンバー紹介ページ用レイアウト。
See the Pen Team section #grid #scss by Kristen (@kristen17) on CodePen.
リンクにカーソルを合わせると、マウスの動きに連動してサムネイル画像をホバー表示できるエフェクト。
See the Pen Hover Image Posts by Jhey (@jh3y) on CodePen.
CSS Scroll Driven/Triggered Image Reveals 2024
スクロール駆動アニメーションをつかった控えめな画像表示アニメーション。テクニックのたたき台として。
See the Pen CSS Scroll Driven/Triggered Image Reveals 2024 by Jhey (@jh3y) on CodePen.
CSS scroll-triggered animations with style queries
こちらもスクロール駆動アニメーションによるアニメーション付きグラデーションをつかった文字テキストエフェクト。
See the Pen CSS scroll-triggered animations with style queries by Ryan Mulligan (@hexagoncircle) on CodePen.
Three.JSで表現されたベーカーリー。左右へのドラッグで視点を自由に変更したり、ズームすることが可能。
See the Pen 3D Little Bakery – ThreeJS by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.
ラジオボタンを選択すると、シュシュっと素早くスライド移動するアニメーションテクニック。
See the Pen Radios With Sliding Focus by Jon Kantner (@jkantner) on CodePen.
ラジオボタンのみでスタリングされたこのスニペットは、画像をクリックすると跳ねるようにボヨンと幅が伸縮するアニメーションが印象的。
See the Pen Bouncy image radio group by Temani Afif (@t_afif) on CodePen.
See the Pen Toggle Pill by Alvaro Montoro (@alvaromontoro) on CodePen.
Responsive GSAP Slider with Button Wave Effect
コンテンツに応じてソーダ缶のデザインと背景のデコレーションがアニメーション付きで切り替わるスライダー。
See the Pen Responsive GSAP Slider with Button Wave Effect by Yudiz Solutions Limited (@yudizsolutions) on CodePen.
スライダーを左から右に移動させる動きに合わせて、まるで飛行機が空を飛んでいるようなエフェクトを実現したHTML／CSSテクニック。
See the Pen Flight slider – HTML+CSS by Alvaro Montoro (@alvaromontoro) on CodePen.
ページを半分に分割し、片方のセクションにのみヘッダーとフッターを設置した、CSS Gridをつかったレイアウト用スニペット。
See the Pen 50/50 with scroll container by Ryan Mulligan (@hexagoncircle) on CodePen.
Always great grid – CSS grid + :has() + view transitions
CSS Gridでひょうげんされたカラムは、ボックスの数を増減させることでレイアウトが自由に伸縮。さらにView Transition APIを活用したシームレスな切り替えも素敵。
See the Pen Always great grid – CSS grid + :has() + view transitions by Adam Argyle (@argyleink) on CodePen.
CSS-only fragmentation effect on hover
ホバー時にピクセルドット風に切り替わる、CSSのみでスタイリングされたエフェクト。
See the Pen CSS-only fragmentation effect on hover by Temani Afif (@t_afif) on CodePen.
２つのテキストレイヤーを重ねたことでスライム状に形を変えるGooeyエフェクト付きのマーキースクロールをCSSのみで再現しています。
See the Pen A Gooey Marquee by Amit Sheen (@amit_sheen) on CodePen.
波を打つように動きながら文字がキラリと光るアニメーションフェクト。
See the Pen Shimmer wave text animation by Andreas Storm (@avstorm) on CodePen.
:has()プロパティとCSSチェックボックスのみでコンテンツ絞り込みフィルターを再現できる便利なテクニック。
See the Pen 2 cool ways to use :has() by Jason Lengstorf (@jlengstorf) on CodePen.
Parametric Surface
“Parametrische Flächen und Körperから参照されたパラメトリック曲面を集めたデモスニペット。
See the Pen Parametric Surface by Wakana Y.K. (@wakana-k) on CodePen.
Interactive SVG World Map on Three.js Globe
回転する地球儀にマウスを当てると国名を表示してくれる、インタラクティブな３D世界地図。
See the Pen Interactive SVG World Map on Three.js Globe by Ksenia Kondrashova (@ksenia-k) on CodePen.
CSS & HTML only Animated Ice Text Effect, Frozen Text Effect
CSSのみでデザインされたとは思えないほど作り込まれた氷のテキストエフェクト。キラリと光るアニメーション付きでどうぞ。
See the Pen CSS & HTML only Animated Ice Text Effect, Frozen Text Effect by Mandy Michael (@mandymichael) on CodePen.
サークルの大きさを少しずつずらし、ほんのわずかなJSコードを加えるだけで、まるでクラゲのような動きを表現したスニペット。
See the Pen GSAP Jellyfish by Nine (@ninecodes) on CodePen.
Silky smooth checkbox toggles with SVG.js
チェックボックスのトグルが滑らかに切り替わるスムーズなアニメーションテクニック。
See the Pen Silky smooth checkbox toggles with SVG.js by Josh Dillon (@jdillon) on CodePen.
Parallax 3D Cards Carousel | swiper.js
コンテンツが立体的に切り替わるパララックス効果を加えたカードカルーセル。
See the Pen Parallax 3D Cards Carousel | swiper.js by MOZZARELLA (@TheMOZZARELLA) on CodePen.
カンバスの上を自由にスケートで滑走するウサギのキャラクターを使い、出現する人参をゲットしていくミニゲーム。クリックでジャンプします。
See the Pen Skating bunny by Karim Maaloul (@Yakudoo) on CodePen.
マウスポインターの動きに合わせてキラキラと星がきらめきながら軌跡をえがくアニメーションエフェクト。
See the Pen Star Trails with options by Amit (@ghaste) on CodePen.
新しい表現方法やテクニックはどんどん増えており、2023年のHTMLスニペットのベスト100も見応えありますよ。
直近3年間のトップ１００も良かったらいかがでしょう。どれだけのスピードでWebが進化しているか、よく分かる実例のひとつ。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
