Advertisement

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.

 

 

目次へ戻る

次のページへ

コンテンツ後半 : 目次

  1. ボタン・エフェクト(7)
  2. スライダー・エフェクト(4)
  3. テキスト・エフェクト(5)
  4. ローディング・エフェクト(7)
  5. CSS3 最新テクニック(10)

 

 

 

05. ボタン・エフェクト

 

Dropdown Button :: Pure CSS

スムーズなドロップダウン展開が魅力のボタンエフェクト。

See the Pen Dropdown Button :: Pure CSS by Andy Tran (@andytran) on CodePen.

 

 

 

Animated SVG Hover Buttons

SFシーンのような点滅がユニークなボタンエフェクト。

See the Pen Animated SVG Hover Buttons by Tyler Peterson (@Gingernaut) on CodePen.

 

 

 

Twitter’s Heart Full CSS

Twitterのイイねボタンをkeyframeアニメーションを利用して再現しています。

See the Pen Twitter’s Heart Full CSS by Nicolas Escoffier (@OxyDesign) on CodePen.

 

 

 

Morph Actions

ボタンにマウスカーソルを合わせると、アイコンマークにフォーフィング付きで変化します。

See the Pen Morph Actions by Zach Schnackel (@zslabs) on CodePen.

 

 

 

Button Ideas for eCommerce

オンラインショップで、商品をカートに入れるボタンに活用したい、ローディング付きボタンエフェクト。

See the Pen Button Ideas for eCommerce by Tommaso Poletti (@tommypolly) on CodePen.

 

 

 

Expanding Card | Material Design

マテリアルデザインのCTAボタンを再現し、クリックするとモーダルボックスがスライド表示されます。

See the Pen Expanding Card | Material Design by Joe Harry (@woodwork) on CodePen.

 

 

 

Pure Css “day and night” toggle

朝と夜に切り替えできる、CSSオンリーのトグルボタン。

See the Pen Pure Css “day and night” toggle by Benjamin Réthoré (@bnthor) on CodePen.

 

 

目次へ戻る

06. スライダー・エフェクト

 

Skewed One Page Scroll

上下スクロールでコンテンツが斜めに切り替わる、シングルページ向けスライダー。

See the Pen Skewed One Page Scroll by Nikolay Talanov (@suez) on CodePen.

 

 

 

Greensock animated slideshow [wip]

イメージ写真表示と一緒に、文字テキストがポップアップでアニメーション表示されます。

See the Pen Greensock animated slideshow [wip] by Arden (@aderaaij) on CodePen.

 

 

 

Beautiful Flat Text Slider

シンプルでどんなデザインにも合わせやすい、フラットスタイルのイメージスライダー。

See the Pen Beautiful Flat Text Slider by daniesy (@daniesy) on CodePen.

 

 

 

EVASION

スクロールすることで垂直方向に切り替わる、カーテン式スライダー。

See the Pen E V A S I O N by Fersho Pls (@fershopls) on CodePen.

 

 

目次へ戻る

07. テキスト・エフェクト

 

Animated SVG text mask | Greensock

文字テキストに合わせて、背景イメージ写真をマスクする新しいスタイリングテクニック。

See the Pen Animated SVG text mask | Greensock by Arden (@aderaaij) on CodePen.

 

 

 

Text Animation Effect

アニメーションエフェクトを使って、文字テキストを自由自在に動かすことができます。

See the Pen EPVbyB by Omar Hassane (@omodev) on CodePen.

 

 

 

Spark Text SCSS

文字テキストにカーソルを合わせると、直線ラインが表示されることで、各アルファベットが飛び散ります。

See the Pen Spark Text SCSS by ta$uya_42EG4M1 (@42EG4M1) on CodePen.

 

 

 

text-fill-color

テキスト文章に合わせて、グラデーションを適用するCSSテクニック。

See the Pen text-fill-color by Colt Borg (@legendofcolt) on CodePen.

 

 

 

Terminal Text Effect

タイピングしている様子を表現でき、スペルミスなど人間らしさも表現できるエフェクト。

See the Pen Terminal Text Effect by Tobias (@Tbgse) on CodePen.

 

 

目次へ戻る

08. ローディング・エフェクト

 

Bookshelf loader

次々に本が倒れていく様子を表現したローディングアニメーション。

See the Pen #Codevember – Day 6 – Bookshelf loader by Grélard Antoine (@ikoshowa) on CodePen.

 

 

 

SVG Loaders

SVGを利用した、12種類のローディングアニメーションを収録しています。

See the Pen SVG Loaders by Zach Schnackel (@zslabs) on CodePen.

 

 

 

Star Wars Loading Animation by Google

実際にGoogleが利用しているローディングアニメーションを、完全再現したStarWarsバージョン。

See the Pen Star Wars Loading Animation by Google by Abraham K (@abrahamrkj1) on CodePen.

 

 

 

Corange Loading Screen

タスクや作業を処理している様子を、文字テキストを使って表現できるローディングテクニック。

See the Pen Corange Loading Screen by George Hoqqanen (@hoqqanen) on CodePen.

 

 

 

Video Loading

波を打つバロメーターがユニークな、ビデオ動画の再生などに活用したいアニメーション。

See the Pen Video Loading by Joe Harry (@woodwork) on CodePen.

 

 

 

Sci-fi loading screen

暗闇に怪しく光るグラデーションが美しい、SF系テキスト・ローディング。

See the Pen Sci-fi loading screen by Ragnar Þór Valgeirsson (@rthor) on CodePen.

 

 

 

Light bulb loading concept

読み込みが進むに連れてゲージがたまり、電球が黄色く光り出します。

See the Pen Light bulb loading concept by David Bachmann Johannesson (@dbj) on CodePen.

 

 

目次へ戻る

09. CSS3 最新テクニック

 

CSS-only Colorful Calendar Concept

HTML/CSSのみでスタイリングされた、カラフルなカレンダー機能で、スムーズで滑らかなアニメーションが随所に。

See the Pen CSS-only Colorful Calendar Concept by David Khourshid (@davidkpiano) on CodePen.

 

 

 

The 12 Principles of Animation

アニメーションの基本原則を、CSSスタイリングで表現しています。

See the Pen The 12 Principles of Animation by Shishak (@shishak) on CodePen.

 

 

 

Icon Flying in the Air

アイコンを雪のように降らせるユニークなアニメーション。

See the Pen JYwORR by simo2 (@lets-try-simo2) on CodePen.

 

 

 

Analog Clock

デザイン部分はすべてCSSのみでスタイリングされた、立体感のあるアナログ時計。

See the Pen Analog Clock by Nail Davlyatchin (@nDav) on CodePen.

 

 

 

Gradient Background Animation

CSSを利用して、グラデーションをアニメーション変化させるテクニック。

See the Pen Gradient Background Animation by Andy Tran (@andytran) on CodePen.

 

 

 

Switching animation keyframes in media queries

@media queryを利用することで、スクリーンサイズごとにCSSアニメーションを変化させることができます。

See the Pen Switching animation keyframes in media queries by Keith Clark (@keithclark) on CodePen.

 

 

 

Logo Ripple Effect CSS

ロゴを中心に波紋エフェクトを描くことができるテクニック。

See the Pen Logo Ripple Effect CSS by Grapes Theme (@grapestheme) on CodePen.

 

 

 

Star Wars: The Force Awakens in CSS

StarWars 最新作のオープニング用エフェクトをCSSで再現した、完成度の高い作品。

See the Pen Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh) on CodePen.

 

 

 

Star Wars Storm Trooper in pure CSS

こちらのストームトルーパー、実はCSSのみで描かれています。

See the Pen Star Wars Storm Trooper in pure CSS by Aleks (@achudars) on CodePen.

 

 

 

Travel

バスにユラユラと揺られる様子を描いた、ユニークなアニメーション。

See the Pen Travel by Chandan Choudhary (@Cancepto) on CodePen.

 

 

目次へ戻る