2016年を先取り!コピペで学ぶ HTML/CSS スニペット60個まとめ

css-snippet2015-top

 

 

※ このページは読み込みには時間がかかる恐れがあります。少し待ってからスクロールすることで、スムーズに表示することができます。

 

 

今年もあと少しとなりましたが、ウェブデザイン技術の進歩はまだまだ続いていくようです。今回は、最新 Web テクニックを採用した HTML/CSSスニペット60個を、カテゴリ別にまとめてご紹介します。

 

 

 

詳細は以下から。

 

 

コンテンツ前半 : 目次

数が多いため、前後半2ページに分けています。

 

  1. ホバー・エフェクト(7)
  2. SVG関連エフェクト(6)
  3. レイアウト関連エフェクト(8)
  4. ナビゲーション・エフェクト(8)

 

 

01. ホバー・エフェクト

 

Floating Card

ホバーすることでカード状レイアウトを、立体的に動かすことができます。

See the Pen Floating Card by Fabrice Lejeune (@fabricelejeune) on CodePen.

 

 

 

Hover Animation from UNIQLO

マウスホバーすることで、ストライプラインに滑らかなアニメーションが加わります。

See the Pen Hover Animation from UNIQLO by Chris Coyier (@chriscoyier) on CodePen.

 

 

 

Animated SVG underline

マウスホバーで、文字テキストのアンダーラインがジグザグに。

See the Pen Animated SVG underline by Peter Tóth (@petertoth) on CodePen.

 

 

 

Hover Effect

See the Pen gPMPOm by PhotoshopVIP (@vipcrew) on CodePen.

 

 

 

Responsive Magic Underline

レスポンシブにも対応した、テキストリンク用ホバーエフェクト。

See the Pen Responsive Magic Underline by Benjamin Damm (@bdam) on CodePen.

 

 

 

New Link Underline (Wired-Style)

ホバーすることで背景がぼんやりとフェードインするアニメーション。

See the Pen New Link Underline (Wired-Style) by MrPirrera (@pirrera) on CodePen.

 

 

 

Thumbnail Hover Effect

CSSアニメーションを利用したホバーエフェクトを、12種類揃えています。

See the Pen avgKxV by moyu (@MoYu1991) on CodePen.

 

 

目次へ戻る

02. SVG関連エフェクト

 

Land Animation for PaGamO

時間差でさまざまなデザインパーツがピョコピョコと表示される、面白アニメーション。

See the Pen Land Animation for PaGamO by Neil Zheng (@pppp22591558) on CodePen.

 

 

 

The (D)evolution of Man

パソコンのやり過ぎによる、人間の退化をアニメーションで表現します。

See the Pen The (D)evolution of Man by Chris Gannon (@chrisgannon) on CodePen.

 

 

 

Animating the viewbox

各部屋の様子を、それぞれ流れるようなアニメーション付きで表示します。

See the Pen Animating the viewbox by David Bachmann Johannesson (@dbj) on CodePen.

 

 

 

Twitter elastic animation

スクリーンをタップするたびに、Twitterロゴがヒラヒラと舞いあがります。

See the Pen #codevember – 29 – Twitter elastic animation by Twindev (@twindev) on CodePen.

 

 

 

404 Page SVG animation

See the Pen 404 Page SVG animation by Sépion (@Sepion) on CodePen.

 

 

 

Interactive Color Photo Highlight Effect In SVG

イメージ写真に写った人物を選択すると、それ以外がモノクロで表示されます。

See the Pen Interactive Color Photo Highlight Effect In SVG by Dudley Storey (@dudleystorey) on CodePen.

 

 

目次へ戻る

03. レイアウト関連エフェクト

 

Neat Parallax Hero Effect

イメージ写真を背景にした見出しタイトルは、スクロールとともに幅サイズが変化する、新しいスタイルのパララックスエフェクト。

See the Pen Neat Parallax Hero Effect by Dominic Magnifico (@magnificode) on CodePen.

 

 

 

Parallax Sjodalen

まるでイメージ写真が飛び出しているような、立体的なエフェクトを実現したパララックスエフェクト。

See the Pen Parallax Sjodalen by Helle Holmsen Sem (@helle_railway) on CodePen.

 

 

 

Food Magazine Template

スクリーンサイズを変更することで、インタラクティブなレイアウトを実現できる、フード系マガジン用テンプレート。

See the Pen Food Magazine Template by Riccardo Zanutta (@rickzanutta) on CodePen.

 

 

 

Animate items in and out of Viewport on Scroll | Greensock

各セクションが立体的なアニメーション付きで、viewportに表示されるスクロールテクニック。

See the Pen Animate items in and out of Viewport on Scroll | Greensock by Arden (@aderaaij) on CodePen.

 

 

 

color lock

12色のカラーホイールから、クリックすることでカラーパレットを作成できます。

See the Pen color lock by GSSxGSS (@gssxgss) on CodePen.

 

 

 

Newspaper Style Design

新聞紙のレイアウトをモチーフに、スクリーンサイズを変更することで、アニメーション付きでカラム数が変化します。

See the Pen Newspaper Style Design by Silke V (@silkine) on CodePen.

 

 

 

Modal Animations

あまり見かけない、アニメーションを活用したモーダルウィンドウの表示を全7種類で。

See the Pen Modal Animations by Jesse Couch (@designcouch) on CodePen.

 

 

 

Angled Edge

斜めに入ったストライプの


ラインを表現できる、CSSスタイリングテクニック。

See the Pen pjqrpe by Thoriq Firdaus (@tfirdaus) on CodePen.

 

 

目次へ戻る

04. ナビゲーション・エフェクト

 

Star Wars Menu Icon

いま話題のStarWars、ライトセーバーを使ったナビゲーションメニュー。

See the Pen Star Wars Menu Icon by Adam Dorling (@Naito) on CodePen.

 

 

 

CSS Overlay Navigation Animation

クリックするとスクリーン全体をオーバーレイするナビゲーション。

See the Pen CSS Overlay Navigation Animation by Ryan Mulligan (@hexagoncircle) on CodePen.

 

 

 

Animated navigation “button”

ハンバーガーアイコンにカーソルを合わせると、MENUの文字が浮かびあがります。

See the Pen Animated navigation “button” by Robin Bertilsson (@RobinBertilsson) on CodePen.

 

 

 

Awesome Bootstrap 3 Sidebar Navigation

Bootstrapフレームワークを用いて、スライド式ナビゲーションを実現しています。

See the Pen Awesome Bootstrap 3 Sidebar Navigation by Jay Holtslander (@j_holtslander) on CodePen.

 

 

 

Hamburger Menu Animation

滑らかなアニメーションが気持ちよいハンバーガー式メニュー。

See the Pen Hamburger Menu Animation by Matt Soria (@poopsplat) on CodePen.

 

 

 

Easy Ionic Side Menu Transitions

左スライド式ナビゲーションを、アニメーション6スタイルから選択することができます。

See the Pen Easy Ionic Side Menu Transitions by Jamie Coulter (@jcoulterdesign) on CodePen.

 

 

 

Cards Menu Concept

カード状に重なった様子を表現しており、各セクションにホバーすることで切り替え可能です。

See the Pen Cards Menu Concept by Bennett Feely (@bennettfeely) on CodePen.

 

 

 

Dropdown navigation (keyboard friendly)

キーボードでも開閉できる、モバイル端末での表示も考慮したナビゲーション。

See the Pen Dropdown navigation (keyboard friendly) by Clément Paris (@ClementParis016) on CodePen.

 

 

目次へ戻る

次のページへ