ますます加速するウェブデザインの最先端を体感できる、最新 Web テクニックを実装した、HTML/CSSコードスニペットをまとめています。
デザインと同時にまとめてコードを確認できるので、コピペで手軽に試してみることも可能です。コード共有コミュニティーサイト CodePen で話題となっている作品を中心に、ウェブデザインにスパイスを加えてくれる、ユニークなエフェクトが揃っています。
詳細は以下から。
コピペで実装できる、最新ウェブテクHTML/CSSコードスニペットまとめ
右下に表示されている「Return」をクリックすると、エフェクトが再読み込みされます。また各ソースはHTML、CSS、JSタブをクリックすることで確認することができます。
並べられたキーワードにマウスを重ねると、フルスクリーン画面で写真が切り替わります。
See the Pen Full-screen Image Layer Viewer by Ettrics (@ettrics) on CodePen.
タブメニューを奥行き感たっぷりに重ねたデザインで、各タブを選択するとフルスクリーンでコンテンツが表示されます。
See the Pen Tab Menu Overlay by Ettrics (@ettrics) on CodePen.
スクリーン上部にレイアウトされたタブをクリックすることで、水平方向のスライドでコンテンツを切り替えます。
See the Pen Horizontal Tab Menu by Ettrics (@ettrics) on CodePen.
5つの異なる配色でペイントされたコンテンツは、クリックすることでフルスクリーン画面で、文字テキストが表示されます。
See the Pen Expanding Column Layout by Ettrics (@ettrics) on CodePen.
画面スクリーンは縦半分に分割し、どちらかのサイドを選択することで、個別スライダーがアニメーション付きで展開します。
See the Pen Dual Sliding Panels by Ettrics (@ettrics) on CodePen.
CSSのみで作成された、どんなデザインにも取り入れやすいシンプルなイメージスライダー。
See the Pen Pure CSS – Simple Slider by ari (@tari) on CodePen.
対角線状に配置されたパターン背景が、スクロールに合わせて広がっていきます。
See the Pen Expanding Diagonal Background by Derek Palladino (@derekjp) on CodePen.
スクロールに応じて背景の色がすこしずつ変化していく、CSSのみで作成できるテクニック。
See the Pen Think outside the div by Mandy Michael (@mandymichael) on CodePen.
背景カラーを鮮やかなグラデーションを利用して、すこしずつ変化させていくテクニック。
See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen.
レイヤーを重ねるように作成されたドロップダウンメニューは、超立体的なアニメーションが追加されています。
See the Pen Dropdown List by Geoff Storbeck (@GeoffStorbeck) on CodePen.
テキストリンクなどに追加したい、CSSでスタイリングできる、シンプルなホバーアニメーション。
See the Pen Subtle link animations. by Josip Psihistal (@butsuri) on CodePen.
ナビゲーションメニューリストの数を、表示しているウィンドウサイズに応じて自動的に調整します。
See the Pen okayNav Demo by Vergil Penkov (@VPenkov) on CodePen.
Vertical Color-Adopting CSS Menu
背景色に合わせて、ハンバーガーメニューの色を変更していくスクリプト。
See the Pen Vertical color-adapting CSS menu by Ines Montani (@inesmontani) on CodePen.
ナビメニューをクリックすると、5つのカテゴリーがサークル状に、ポップアップ表示されるアニメーション。
See the Pen Circle Menu by Willmer Barahona (@wbarahona) on CodePen.
ピンク色のボタンをクリックすることで、メニューボタンからフィルタリングすることができます。
See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.
ボタンにマウスホバーすることで、かすかなドロップシャドウをCSSで描きます。
See the Pen Button Shadow by Sebastian (@seme332) on CodePen.
CSSのみでスタイリングされた、Googleのマテリアルデザインを意識した、写真ギャラリー用レイアウト。
See the Pen Google Photos Material Gallery by Ettrics (@ettrics) on CodePen.
iPhoneで利用されているチェックボックス用UIを、CSSのみで再現しています。
See the Pen iOS-inspired checkbox | CSS only by Håvard Brynjulfsen (@havardob) on CodePen.
イメージスライダー用ページネーションとして活用できる、ぬるりとした滑らかアニメーションが素敵。
See the Pen SVG Page Hopper by Chris Gannon (@chrisgannon) on CodePen.
マテリアルデザインで採用中のラジオボックスを、そのままそっくり再現しています。
See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.
スクロールに合わせて背景がパララックスする、ヘッダー向きのレイアウト。Rainbopacity にチェックを入れると、グラデーションの濃さを調整できます。
See the Pen Easy Rainbow Parallax by Eric Brewer (@ebrewe) on CodePen.
Multi-layered Parallax Illustration
複数に分けられたイラストレイヤーを組み合わせ、パララックスエフェクトを活用した、インパクトのある仕掛けを実装します。
See the Pen Multi-layered Parallax Illustration by Patryk Zabielski (@zabielski) on CodePen.
コンテンツのまわりに、細いストローク線をCSSで描くだけのシンプルさで、応用が効くテクニックのひとつ。
See the Pen Daily UI #003: Landing Page by Dominic Magnifico (@magnificode) on CodePen.
コンテンツ表示と同時に、写真をズームアップすることで、よりユーザーの注目をあつめる工夫がされた、今年注目のカード型レイアウト。
See the Pen San Francisco Card by Dany Santos (@THEORLAN2) on CodePen.
インタラクティブに魅せるカード型レイアウトは、マウスホバーでレシピが展開します。
See the Pen Recipe Card by Dany Santos (@THEORLAN2) on CodePen.
ドリンクの注文を受けることを想定したアプリ向けデザインで、よりインタラクティブな動きが素敵。
See the Pen Responsive Menu App by Woodrow Barlow (@wbarlow) on CodePen.
カレンダーと ToDoリスト機能を組み合わせた、なめらかなアニメーションが美しい UI デザイン。
See the Pen It’s A Calendar Sort Of Thing by Jack Thomson (@Jackthomsonn) on CodePen.
ステップ形式に進めることができる、会員登録サインアップ用フォーム。
See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.
レスポンシブウェブサイトにも対応した、モーダルウィンドウが3タイプ用意されています。
See the Pen Responsive Modal Design by Ettrics (@ettrics) on CodePen.
ボタンをクリックすることで、ガラスが割れるようなエフェクト付きで、コンテンツをポップアップ表示します。
See the Pen Shattered popup (CSS) by Nikolay Talanov (@suez) on CodePen.
ヘッダー下部に配置することで、ユーザーにコンテンツが続いていることを、下方向への矢印アニメーションで伝えます。
See the Pen Scroll/drag indicator by Misha Heesakkers (@MishaHahaha) on CodePen.
美しいラインが特長の、CSSのみで描かれたローディングアニメーション。
See the Pen Daily UI #010: CSS 3 Loading by Gerta Xhepi (@xhepigerta) on CodePen.
ルービックキューブの動きをモチーフに、こちらもCSSのみで描かれています。
See the Pen Rubik loader by Filip Vitas (@FilipVitas) on CodePen.
カラフルなボールが左右に動き回るCSSアニメーションで、より繊細なエフェクトも見事に表現することができます。
See the Pen ZbVVwa by Dave McCarthy (@AsLittleDesign) on CodePen.
アイコンの代わりに使いたいテクニックで、用意した写真をCSSのみで円形にし、マウスホバーで横スライドのアニメーションを実装します。
See the Pen CSS Parallax Orbs by Jamie Coulter (@jcoulterdesign) on CodePen.
マイク関連のアプリデザインを想定し、ボタンをクリックすることでフルスクリーン画面に、ローディングアニメーションが展開します。
See the Pen Microphone App Experience by Ettrics (@ettrics) on CodePen.
ロゴをクリックすると、ボヨヨーンとしたユニークな動きを加えます。
See the Pen Squishy Logo by Matt Rothenberg (@mattrothenberg) on CodePen.
入力したいキーワードや単語を、カラフルな泡状バブルで表現する、インタラクティブで３Dなエフェクト。
See the Pen Text particle by Gthibaud (@Gthibaud) on CodePen.
マウスをクリック、ドラッグすることで、アニメーション速度や向きをコントロールすることができます。
See the Pen THREE Text Animation #1 by Szenia Zadvornykh (@zadvorsky) on CodePen.
表示されている文字テキストにマウスが触れると、さらさらと砂のように崩れていくエフェクト。
See the Pen Life vs. Living by Tiffany Rayside (@tmrDevelops) on CodePen.
日本でのローンチが待ち遠しい音楽サービス、Spotifyのユーザーインターフェースを完全再現しています。
See the Pen Spotify Artist Page by Adam Lowenthal (@alowenthal) on CodePen.
日本を代表するレトロなゲームガジェットを、CSSのみで描いた作品。
See the Pen GAME BOY by Tatsuya Azegami (@42EG4M1) on CodePen.
ぐりぐりとマウスを動かすことで、プロフィール写真の目が動きに合わせてついてきます。
See the Pen Daily UI #006: User Profile by Fabio Ottaviani (@supah) on CodePen.
CSSによる写真加工を行うことができ、適用したフィルタを「COPY」からコピペすることもできます。
See the Pen CSS Filter by Jordano Aragão (@jordanoaragao) on CodePen.
レスポンシブレイアウトに対応した、飛行経路をアニメーション付きで伝えるCSSテクニック。
See the Pen responsive SVG by pingpoong (@pingpoong) on CodePen.
現在時刻を卓上LCD時計のように、SVGファイルを利用して表現しています。
See the Pen SVG LCD Clock by Christian Hanvey (@christianhanvey) on CodePen.
CSSで実装できる、思わず押したくなるボタン用コードスニペット38個まとめ
先日まとめたエントリーでも、ウェブサイトやブログをより魅力的にするボタン素材をまとめています。
