Advertisement

latestsnippet2016april-top

 

ますます加速するウェブデザインの最先端を体感できる、最新 Web テクニックを実装した、HTML/CSSコードスニペットをまとめています。

 

 

デザインと同時にまとめてコードを確認できるので、コピペで手軽に試してみることも可能です。コード共有コミュニティーサイト CodePen で話題となっている作品を中心に、ウェブデザインにスパイスを加えてくれる、ユニークなエフェクトが揃っています。

 

 

 

詳細は以下から。

 

 

 

コピペで実装できる、最新ウェブテクHTML/CSSコードスニペットまとめ

 

右下に表示されている「Return」をクリックすると、エフェクトが再読み込みされます。また各ソースはHTML、CSS、JSタブをクリックすることで確認することができます。

 

 

Fullscreen Image Layer Views

並べられたキーワードにマウスを重ねると、フルスクリーン画面で写真が切り替わります。

See the Pen Full-screen Image Layer Viewer by Ettrics (@ettrics) on CodePen.

 

 

 

Tab Menu Overlay

タブメニューを奥行き感たっぷりに重ねたデザインで、各タブを選択するとフルスクリーンでコンテンツが表示されます。

See the Pen Tab Menu Overlay by Ettrics (@ettrics) on CodePen.

 

 

 

Horizontal Tab Menu

スクリーン上部にレイアウトされたタブをクリックすることで、水平方向のスライドでコンテンツを切り替えます。

See the Pen Horizontal Tab Menu by Ettrics (@ettrics) on CodePen.

 

 

 

Expanding Column Layout

5つの異なる配色でペイントされたコンテンツは、クリックすることでフルスクリーン画面で、文字テキストが表示されます。

See the Pen Expanding Column Layout by Ettrics (@ettrics) on CodePen.

 

 

 

Dual Sliding Panel

画面スクリーンは縦半分に分割し、どちらかのサイドを選択することで、個別スライダーがアニメーション付きで展開します。

See the Pen Dual Sliding Panels by Ettrics (@ettrics) on CodePen.

 

 

 

Pure-CSS Simple Slider

CSSのみで作成された、どんなデザインにも取り入れやすいシンプルなイメージスライダー。

See the Pen Pure CSS – Simple Slider by ari (@tari) on CodePen.

 

 

 

Expanding Diagonal Background

対角線状に配置されたパターン背景が、スクロールに合わせて広がっていきます。

See the Pen Expanding Diagonal Background by Derek Palladino (@derekjp) on CodePen.

 

 

 

Think Outside the Div

スクロールに応じて背景の色がすこしずつ変化していく、CSSのみで作成できるテクニック。

See the Pen Think outside the div by Mandy Michael (@mandymichael) on CodePen.

 

 

 

Animated Background Gradient

背景カラーを鮮やかなグラデーションを利用して、すこしずつ変化させていくテクニック。

See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen.

 

 

 

Dropdown List

レイヤーを重ねるように作成されたドロップダウンメニューは、超立体的なアニメーションが追加されています。

See the Pen Dropdown List by Geoff Storbeck (@GeoffStorbeck) on CodePen.

 

 

 

Subtle Link Animations

テキストリンクなどに追加したい、CSSでスタイリングできる、シンプルなホバーアニメーション。

See the Pen Subtle link animations. by Josip Psihistal (@butsuri) on CodePen.

 

 

 

OK Nav Demo

ナビゲーションメニューリストの数を、表示しているウィンドウサイズに応じて自動的に調整します。

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.

 

 

 

Circle Menu

ナビメニューをクリックすると、5つのカテゴリーがサークル状に、ポップアップ表示されるアニメーション。

See the Pen Circle Menu by Willmer Barahona (@wbarahona) on CodePen.

 

 

 

Filter Menu

ピンク色のボタンをクリックすることで、メニューボタンからフィルタリングすることができます。

See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.

 

 

 

Button Shadow

ボタンにマウスホバーすることで、かすかなドロップシャドウをCSSで描きます。

See the Pen Button Shadow by Sebastian (@seme332) on CodePen.

 

 

 

Google Photo Material Gallery

CSSのみでスタイリングされた、Googleのマテリアルデザインを意識した、写真ギャラリー用レイアウト。

See the Pen Google Photos Material Gallery by Ettrics (@ettrics) on CodePen.

 

 

 
e
iOS Inspired Checkbox

iPhoneで利用されているチェックボックス用UIを、CSSのみで再現しています。

See the Pen iOS-inspired checkbox | CSS only by Håvard Brynjulfsen (@havardob) on CodePen.

 

 

 

SVG Page Hopper

イメージスライダー用ページネーションとして活用できる、ぬるりとした滑らかアニメーションが素敵。

See the Pen SVG Page Hopper by Chris Gannon (@chrisgannon) on CodePen.

 

 

 

Material Radio Button

マテリアルデザインで採用中のラジオボックスを、そのままそっくり再現しています。

See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.

 

 

 

Easy Rainbow Parallax

スクロールに合わせて背景がパララックスする、ヘッダー向きのレイアウト。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.

 

 

 

Daily UI #003 Landing Page

コンテンツのまわりに、細いストローク線をCSSで描くだけのシンプルさで、応用が効くテクニックのひとつ。

See the Pen Daily UI #003: Landing Page by Dominic Magnifico (@magnificode) on CodePen.

 

 

 

San Francisco Card

コンテンツ表示と同時に、写真をズームアップすることで、よりユーザーの注目をあつめる工夫がされた、今年注目のカード型レイアウト。

See the Pen San Francisco Card by Dany Santos (@THEORLAN2) on CodePen.

 

 

 

Recipe Card

インタラクティブに魅せるカード型レイアウトは、マウスホバーでレシピが展開します。

See the Pen Recipe Card by Dany Santos (@THEORLAN2) on CodePen.

 

 

 

Responsive Menu App

ドリンクの注文を受けることを想定したアプリ向けデザインで、よりインタラクティブな動きが素敵。

See the Pen Responsive Menu App by Woodrow Barlow (@wbarlow) on CodePen.

 

 

 

It’s A Calendar Sort of Thing

カレンダーと ToDoリスト機能を組み合わせた、なめらかなアニメーションが美しい UI デザイン。

See the Pen It’s A Calendar Sort Of Thing by Jack Thomson (@Jackthomsonn) on CodePen.

 

 

 

Interactive Sign Up Form

ステップ形式に進めることができる、会員登録サインアップ用フォーム。

See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.

 

 

 

Responsive Modal Design

レスポンシブウェブサイトにも対応した、モーダルウィンドウが3タイプ用意されています。

See the Pen Responsive Modal Design by Ettrics (@ettrics) on CodePen.

 

 

 

Shattered Popup

ボタンをクリックすることで、ガラスが割れるようなエフェクト付きで、コンテンツをポップアップ表示します。

See the Pen Shattered popup (CSS) by Nikolay Talanov (@suez) on CodePen.

 

 

 

Scroll/Drag Indicator

ヘッダー下部に配置することで、ユーザーにコンテンツが続いていることを、下方向への矢印アニメーションで伝えます。

See the Pen Scroll/drag indicator by Misha Heesakkers (@MishaHahaha) on CodePen.

 

 

 

Daily UI #010: CSS3 Loading

美しいラインが特長の、CSSのみで描かれたローディングアニメーション。

See the Pen Daily UI #010: CSS 3 Loading by Gerta Xhepi (@xhepigerta) on CodePen.

 

 

 

Rubik Loader

ルービックキューブの動きをモチーフに、こちらもCSSのみで描かれています。

See the Pen Rubik loader by Filip Vitas (@FilipVitas) on CodePen.

 

 

 

Circle Loading Animation

カラフルなボールが左右に動き回るCSSアニメーションで、より繊細なエフェクトも見事に表現することができます。

See the Pen ZbVVwa by Dave McCarthy (@AsLittleDesign) on CodePen.

 

 

 

CSS Parallax Orbs

アイコンの代わりに使いたいテクニックで、用意した写真をCSSのみで円形にし、マウスホバーで横スライドのアニメーションを実装します。

See the Pen CSS Parallax Orbs by Jamie Coulter (@jcoulterdesign) on CodePen.

 

 

 

Microphone App Experience

マイク関連のアプリデザインを想定し、ボタンをクリックすることでフルスクリーン画面に、ローディングアニメーションが展開します。

See the Pen Microphone App Experience by Ettrics (@ettrics) on CodePen.

 

 

 

Squishy Logo

ロゴをクリックすると、ボヨヨーンとしたユニークな動きを加えます。

See the Pen Squishy Logo by Matt Rothenberg (@mattrothenberg) on CodePen.

 

 

 

Text Particle

入力したいキーワードや単語を、カラフルな泡状バブルで表現する、インタラクティブで3Dなエフェクト。

See the Pen Text particle by Gthibaud (@Gthibaud) on CodePen.

 

 

 

THREE Text Animation #1

マウスをクリック、ドラッグすることで、アニメーション速度や向きをコントロールすることができます。

See the Pen THREE Text Animation #1 by Szenia Zadvornykh (@zadvorsky) on CodePen.

 

 

 

Life vs. Living

表示されている文字テキストにマウスが触れると、さらさらと砂のように崩れていくエフェクト。

See the Pen Life vs. Living by Tiffany Rayside (@tmrDevelops) on CodePen.

 

 

 

Spotify Artist Page

日本でのローンチが待ち遠しい音楽サービス、Spotifyのユーザーインターフェースを完全再現しています。

See the Pen Spotify Artist Page by Adam Lowenthal (@alowenthal) on CodePen.

 

 

 

Gameboy UI

日本を代表するレトロなゲームガジェットを、CSSのみで描いた作品。

See the Pen GAME BOY by Tatsuya Azegami (@42EG4M1) on CodePen.

 

 

 

Daily UI #006: User Profile

ぐりぐりとマウスを動かすことで、プロフィール写真の目が動きに合わせてついてきます。

See the Pen Daily UI #006: User Profile by Fabio Ottaviani (@supah) on CodePen.

 

 

 

CSS Filter

CSSによる写真加工を行うことができ、適用したフィルタを「COPY」からコピペすることもできます。

See the Pen CSS Filter by Jordano Aragão (@jordanoaragao) on CodePen.

 

 

 

Responsive SVG

レスポンシブレイアウトに対応した、飛行経路をアニメーション付きで伝えるCSSテクニック。

See the Pen responsive SVG by pingpoong (@pingpoong) on CodePen.

 

 

 

SVG LCD Clock

現在時刻を卓上LCD時計のように、SVGファイルを利用して表現しています。

See the Pen SVG LCD Clock by Christian Hanvey (@christianhanvey) on CodePen.

 

 

 

CSSで実装できる、思わず押したくなるボタン用コードスニペット38個まとめ

先日まとめたエントリーでも、ウェブサイトやブログをより魅力的にするボタン素材をまとめています。

buttonhover2016march-top