この記事では、Webデザインの引き出しを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介します。
Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりとなっています。
Webデザインの引き出しを増やす、コピペできる最新HTMl／CSSスニペットまとめ
「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。
画像から色を抽出できるアイドロッパーツール
See the Pen
Eyedropper Demo by Brandon McConnell (@brandonmcconnell)
on CodePen.
ネオンライトで出現するテキストエフェクト
暗闇で輝くネオンライトを左右に動かすことで、隠れていたテキストが表示されます。
See the Pen
Croc concept by chipsadesign (@chipsadesign)
on CodePen.
画像をキラキラとしたこまかい粒子で表現する方法
粒子の数や広がり方なども設定、カスタマイズできるVue.jsをつかったスニペット。
See the Pen
Particle Photos by Callum Macrae (@callumacrae)
on CodePen.
アニメーション付ラジオボタン
ダークモード設定を行うラジオボタンに表情を加えたアニメーション。
See the Pen
Switch Animation dark mode by Maria M. Muñoz (@myacode)
on CodePen.
超リアルなCSS赤スイッチ
CSSのみで作成されたリアルなボタンで、実際に押すこともできますよ。
See the Pen
Realistic Red Switch (Pure CSS) by Yoav Kadosh (@ykadosh)
on CodePen.
目を引くアニメーション付カードスタイル7種類セット
CSSアニメーションが印象的なカードスタイルで、切り替えは右上のハンバーガーメニューよりどうぞ。
See the Pen
7 CSS Cards: Cuphead Style ☕️ by Roden (@RodenKerthin)
on CodePen.
フィボナッチ数列をつかった画像スライダー
コンテンツが螺旋状に切り替わる、黄金比を活用したスライダー。
See the Pen
Fibonacci Carousel by Jane 💜 (@propjockey)
on CodePen.
美しい配色を選ぶ回転式カラーホイール
右上の「Customize」より配色カラーパレットを変更でき、各色を細かく調整できるツール。
See the Pen
Der Bunt (Beta) by David A. (@meodai)
on CodePen.
マウスホバーで開くフォルダアイコン
CSSのみでスタイリングされたシンプルで効果的なアニメーション。
See the Pen
CSS Folder Hover Micro Interaction by Shunya Koide (@shunyadezain)
on CodePen.
ハニカム構造に並べたグリッドレイアウト
蜂の巣のような六角形をつかったレイアウトをCSSで実現します。
See the Pen
Hexa team by Shramee (@shramee)
on CodePen.
手描きスケッチした怪獣が歩き回るアニメーション
水平方向にスクロールと手描きイラストを組み合わせた、ストーリー性のあるテクニック。
See the Pen
Scroll-Kaiju by Tom Miller (@creativeocean)
on CodePen.
進捗状況を伝えるプログレスバー
現在の状況を分かりやすくユーザーに伝えるアニメーション。
See the Pen
Segmented Progress Bar by Jon Kantner (@jkantner)
on CodePen.
お気に入りをピン付するシンプルアニメーション
トグルを切り替えるタイミングで、わずかなマイクロインタラクションを追加。
See the Pen
Pin Toggle Interaction by Aybüke Ceylan (@aybukeceylan)
on CodePen.
ニューモーフィズム・スタイルのアナログ時計
See the Pen
Neumorphic Clock by Burmese Potato (@BurmesePotato)
on CodePen.
ニューモーフィズム・スタイルの音楽プレイヤー
See the Pen
Neomorphic Music Player 🎧 (repeat, random, loop, switch) by Roden (@RodenKerthin)
on CodePen.
無数の粒子がスクロールしながら合体して写真になるテクニック
マウスカーソルの動きに合わせて、散りばめられた粒子が集まり、一枚の画像として表示されるデザイン。
See the Pen
76. by ycw (@ycw)
on CodePen.
レスポンシブ対応の固定ナビメニュー
ナビメニューにカーソルを合わせるとテキストが表示される、スマホにも対応できるメニュースタイル。
See the Pen
Sticky responsive sidenav by Areal Alien ♡ (@areal_alien)
on CodePen.
右から左に流れるように画像をアニメーション表示する方法
SVGアニメーションをより詳しく紹介したこちらの記事も参考に。
See the Pen
swipey grid – clearleft by Cassie Evans (@cassie-codes)
on CodePen.
スクロールに合わせて画像をアニメーション表示する方法
GSAPツールを活用することで、スムーズで心地よいスクロール体験を手軽に実現できます。
See the Pen
Image reveal animation using GSAP ScrollTrigger by Cameron Knight (@cameronknight)
on CodePen.
スライム状に形を変えるチェックボック
See the Pen
Gooey checkboxes by Mikael Ainalem (@ainalem)
on CodePen.
選択した数を表示できるCSSの小技テクニック
JSなどは使わず、CSSのみで選択しているチェックボックスの数を表示できます。
See the Pen
Checkbox-Counter by Nils Binder (@enbee81)
on CodePen.
ドラッグ＆ドロップで色を変更できるスニペット
左側に表示されたカラーパレッを、右側にドラッグすると、スマホの色が切り替わるインタラクティブなデモ。
See the Pen
Drag and Drop Coloring by Blake Bowen (@osublake)
on CodePen.
アップロードの進捗を伝えるボタンエフェクト
See the Pen
Upload Button w/Progress by Jon Kantner (@jkantner)
on CodePen.
紙飛行機がとんでいくボタンエフェクト
See the Pen
Click to send by Dilum Sanjaya (@dilums)
on CodePen.
マウスの動きに反応するテキストグリッド
See the Pen
Text Grid with Mouse Interaction | @keyframers 3.20 by @keyframers (@keyframers)
on CodePen.
入力した文字をキラキラの星アニメーションにするスニペット
See the Pen
alphabet stars by Masahito Leo Takeuchi (@Ma5a)
on CodePen.
ぶつからないように車を運転するミニゲーム
上矢印でアクセス加減を調整しながら、2台の車が何周ぶつからないかを競います。
See the Pen
Traffic Run Game with Three.js by Hunor Marton Borbely (@HunorMarton)
on CodePen.
コンベア式のCSSアニメーション
CSSのみでデザインされたとは思えないほどの繊細な動きが特長。
See the Pen
crypto thingy blockchain animation by Jorge (@dok)
on CodePen.
CSSカメラシャッター
パチリとカメラのシャッターを切るアニメーションで、最後はポラロイド写真に。
See the Pen
CSS only Camera Shutter by Shaw (@shshaw)
on CodePen.
ドラッグ＆ドロップで開閉できる窓のブラインド
右側の紐を上下に引っ張ることでブラインドが開き、外の景色が見えてくる体験型デモ。
See the Pen
Window Blinds (Drag&Drop&Touch) by Kit Jenson (@kitjenson)
on CodePen.
