ウェブをもっと面白く!コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度

latestsnippet-2016dec

 

思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。

 

新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。

 

 

「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。

 

 

 

詳細は以下から。

 

 

 

ウェブをもっと面白く!コピペ可能なHTML/CSSスニペット45個まとめ

 

Fixed Disappearing Scrolling Header

スクロールすると表示されている文字テキストがフェードアウトで消えていくヘッダーエフェクト。

See the Pen Fixed Disappearing Scrolling Header by Dudley Storey (@dudleystorey) on CodePen.

 

 

 

A Menu Overlay Simulating a Camera Focus Change

MENUをクリックするとアニメーション付きでフルスクリーンで展開するナビゲーションメニュー。

See the Pen A Menu Overlay Simulating a Camera Focus Change by Chris Arasin (@carasin) on CodePen.

 

 

 

SVG Gooey Hover Menu Concept

ハンバーガーメニューにカーソルを合わせると、グネグネと形を変化させてコンテンツを表示するナビゲーションメニュー。

See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.

 

 

 

Material Navigation Pure CSS

CSSのみで再現できるナビメニューで、クリックすることでコンテンツをパネル状で立体的に表示します。

See the Pen Material Navigation Pure CSS by Manasseh Pierce (@ManassehPierce) on CodePen.

 

 

 

Bottom Nav & Tabs

上部に配置された要素を左右に動かすことで、コンテンツを水平方向に閲覧できる新型ナビゲーションメニュー。

See the Pen Bottom Nav & Tabs by Yusuf Bakır (@yusufbkr) on CodePen.

 

 

 

Quick Nav with Sub-Menu

画面下に配置したナビメニューで、クリックすると下方向からスライドで子カテゴリが表示されます。

See the Pen Quick nav with sub-menu by Tobias Reich (@electerious) on CodePen.

 

 

 

Menu Hover Effect

表示されている文字を上下にアニメーションさせた、ちょっとしたギミックが面白いナビメニュー。

See the Pen Menu hover effect by Jason Hee (@jasonheecs) on CodePen.

 

 

 

CSS Hover Effects for Links

テキストリンクをよりユニークに魅せる、8つのホバーエフェクトをまとめています。

See the Pen CSS Hover Effects for Links by Stas Melnikov (@melnik909) on CodePen.

 

 

 

Hamburger Icon Animations

ハンバーガーメニューアイコンのさまざまなアニメーションを再現しています。

See the Pen Hamburger Icon Animations by Rosa (@RRoberts) on CodePen.

 

 

 

Parallax 3D Button with JS Controlled CSS Variables

マウスをクリックしようとすると立体的に動くユニークなパララックスエフェクト。

See the Pen Parallax 3D Button with JS controlled CSS variables by Tobias Reich (@electerious) on CodePen.

 

 

 

Rainbow Effect Button

背景がレインボーカラーにアニメーションするボタンエフェクト。

See the Pen PbEGYy by Marc Thomas (@mrcthms) on CodePen.

 

 

 

Luxury Buttons

ボタンにホバーするとグラデーション状に色が変化するゴージャスなエフェクト。

See the Pen luxury buttons by Daniel Box (@dbox) on CodePen.

 

 

 

Button Hover

CSSのみで再現するグラデーション付きのホバーエフェクトがポイント。

See the Pen Button hover by Tim Rijkse (@timrijkse) on CodePen.

 

 

 

Simple Like Button #codevember

サイトにいいね機能を追加できるシンプルなボタンエフェクトで、クリックするとハートマークがアニメーション付きで変化します。

See the Pen Simple Like Button #codevember by Emil Andersson (@emilandersson) on CodePen.

 

 

 

Cool Buttons

使い勝手の良いさまざまなボタンエフェクトの詰め合わせパック。

See the Pen Cool buttons by Riccardo Zanutta (@rickzanutta) on CodePen.

 

 

 

Button Drop Shadow

2つのボタンを重ねたようなエフェクトを実現する、ポップなホバーエフェクト。

See the Pen Button Drop Shadow by Robert Miller (@iamrobertmiller) on CodePen.

 

 

 

Stripe Hover Blur Animation

並べられたロゴにカーソルを合わせると、背景がぼやけボタンが表示されるCSSスニペット。

See the Pen Stripe hover blur animation by Riccardo Zanutta (@rickzanutta) on CodePen.

 

 

 

The Wave

ユラユラと漂う文字テキストをHTMLとCSSのみで実現するお手軽エフェクト。

See the Pen The Wave by Chris Coyier (@chriscoyier) on CodePen.

 

 

 

Focus

ぼやけた文字にアニメーション付きでフォーカスを当てるCSSエフェクト。

See the Pen Focus by Ahmad Shadeed (@shadeed) on CodePen.

 

 

 

There Is Light

文字テキストをネオン状に点滅させ、隠れている文字を照らし出すCSSエフェクト。

See the Pen There is light by Ahmad Shadeed (@shadeed) on CodePen.

 

 

 

Opening Sequence

映画のようなオープニングシーンをCSSのみで表現するテキストエフェクト。

See the Pen Opening Sequence by Sebastian Schepis (@sschepis) on CodePen.

 

 

 

Sliding Text

文字テキストをスライドさせながら変更していくアニメーションエフェクト。

See the Pen Sliding text by Nathan Taylor (@nathantaylor) on CodePen.

 

 

 

Flickery Argon Encouragement

ネオンライトが点滅しているようなエフェクトをCSSで実現します。

See the Pen Flickery Argon Encouragement by Jase (@jasesmith) on CodePen.

 

 

 

Random Text Shuffle

文字テキストをカラフルにシャッフルさせながら表示するエフェクト。Shuffleボタンを押すと再読込できます。

See the Pen Random Text Shuffle by Sascha Sigl (@SaschaSigl) on CodePen.

 

 

 

#codevember 01 – SVG Motion

スロット状に回転しながら文字テキストを表示するSVGエフェクト。

See the Pen #codevember 01 – svg motion by coderitual (@coderitual) on CodePen.

 

 

 

Merry Christmas!

クリスマス気分を盛り上げるユニークなアニメーションを利用して文字テキストを表示します。

See the Pen Merry Christmas! by Chris Gannon (@chrisgannon) on CodePen.

 

 

 

Shape Outside – Ellipse

シェイプに合わせて文字テキストをずらして表示できる、CSSの新しい利用方法を提案します。

See the Pen Shape Outside – Ellipse by Stacy (@stacy) on CodePen.

 

 

 

CSS Filters

CSS Filterプロパティを利用して、Photoshopも顔負けの写真加工を行うテクニックをまとめています。

See the Pen CSS Filters by Stacy (@stacy) on CodePen.

 

 

 

Card Hover Effects

シンプルで幅広いプロジェクトに活用できるカード型ホバーエフェクト3種。

See the Pen Card hover effects by Jason Hee (@jasonheecs) on CodePen.

 

 

 

Cube Service Box

マウスホバーによってキューブ状の立体的に切り替わるエフェクト。

See the Pen cube service box by RahulDhiman (@rahuldhiman) on CodePen.

 

 

 

Pure CSS Popup Box

JavaScriptを利用せずに、CSSのみで作成されたモーダルウィンドウ。

See the Pen Pure css popup box by Prakash (@imprakash) on CodePen.

 

 

 

Pure CSS Switches

Bootstrapフレームワークに対応した、CSSで作成されたラジオボタン各種。

See the Pen Pure CSS Switches by Alexandre Joffroy (@alexjoffroy) on CodePen.

 

 

 

Interactive Sign Up Form

ステップ順に進めていくことでお問い合わせフォームを送信できる、インタラクティブなサインアップ画面を作成します。

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

 

 

 

Printer Pull Down to Refresh

下方向にスワイプすると新しいコンテンツが読み込まれ、同時にプリンターが印刷しているような様子を表現しています。

See the Pen Printer Pull Down To Refresh by Nikolay Talanov (@suez) on CodePen.

 

 

 

Parallax Scene with CSS Variables

See the Pen Parallax scene with CSS variables by Tobias Reich (@electerious) on CodePen.

 

 

 

Change Background Color with Fade Animation as You Scroll

See the Pen Change background colour with fade animation as you scroll by Dave Redfern (@daveredfern) on CodePen.

 

 

 

Responsive Pure CSS Tabs & Accordion

画面幅に応じてタブとアコーディオン機能が切り替わるCSSテクニック。

See the Pen Responsive pure CSS tabs & accordion by mikestreety (@mikestreety) on CodePen.

 

 

 

Movie List

コンテンツをリストアップするときに役立つスニペットで、ほんの少しの素敵なアニメーションを追加することで、思わずクリックさせます。

See the Pen Movie List by Travis Williamson (@travisw) on CodePen.

 

 

 

Smudge & Randomize Image with PIXI.js Mesh & GSAP

See the Pen Smudge & Randomize Image with PIXI.js Mesh & GSAP by Shaw (@shshaw) on CodePen.

 

 

 

Blobs

カラフルなサークル円が、マウス操作に合わせてぬるりと形を変えるユニークなテクニック。

See the Pen blobs by Misaki Nakano (@mnmxmx) on CodePen.

 

 

 
Pure CSS – Responsive Animation | Test 1

レスポンシブデザインにも対応した、CSSのみで作成したローディングアニメーション。

See the Pen PURE CSS – Responsive Animation | Test #1 by Noyelle Julien (@Avenbeard) on CodePen.

 

 

 

9 – #Codevember 2016

ドットとラインを使った中毒性のある動きがユニークなローディングアニメーション。

See the Pen 9 – #Codevember 2016 by JeanBaptiste PENRATH (@jbpenrath) on CodePen.

 

 

 

Animation CSS Cube

四角形の大きさがすこしずつ変化する、キューブ状アニメーションエフェクト。

See the Pen Animation Ccs3 Cube by Lionel Tolosa (@lioneltolosa29) on CodePen.

 

 

 

CSSonic Run Cycle

キャラクターが走る様子を@keyframesを利用してアニメーションさせるCSSテクニック。

See the Pen CSSonic run cycle by joey lane (@joeylane) on CodePen.

 

 

 

Super Mario Animation

CSSのみでおなじみのキャラクターをアニメーションさせるテクニック。

See the Pen Super Mario (Animation) by LantareCode (@LantareCode) on CodePen.