2018年大本命!HTML/CSSコピペできる、参考にしたいスニペット78個まとめ

latesthtml2018oct2

 

ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットを、定期的にまとめてご紹介しています。SVGを使ったアッと驚くアニメーションから、普段使いがしやすくなる小技テクニック、現在利用するデザイナーが増えているCSS Gridの可能性を探る実践向けスニペットまで、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。

 

「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。

 

ウェブサイトをもっと面白く!コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度

 

2018年大本命!HTML/CSSコピペできる、参考にしたいスニペットまとめ

 

Banksy Shredder

オークション落札と同時にシュレッダーをかけられた、Banksyアートのパロディ作品。額縁をクリックすると、お好みの画像をアップロードできます。

See the Pen Banksy Shredder by Lee Martin (@leemartin) on CodePen.

 

 

 

Low poly animals

カラフルなポリゴンスタイルの動物型SVGロゴが、爆発しながら変化していくエフェクト。

See the Pen Low poly animals by Mikael Ainalem (@ainalem) on CodePen.

 

 

 

Fake 3D effect with depth map

静止画のはずがマウスをホバーさせると犬の視線が動き出す、フェイク3Dテクニック。

See the Pen Fake 3D effect with depth map by Robin Delaporte (@robin-dela) on CodePen.

 

 

 

Experimental Gradient Editor

再生ボタンをクリックするとさまざまな組み合わせのグラデーションが変化するアニメーション。

See the Pen Experimental Gradient Editor by David A. (@meodai) on CodePen.

 

 

 

“Random” color harmonies

ランダムで表示される美しいグラデーションに、HEXカラーコードと色の名前が表示されています。

See the Pen “Random” color harmonies by David A. (@meodai) on CodePen.

 

 

 

How Many Steps Does It Take To Get From Me To You?

特定の2色を選択したら、お好みのステップ数に色を分けたグラデーションを作成でき、各色のHEXカラーコードもコピペ可能な便利ツール。

See the Pen How Many Steps Does It Take To Get From Me To You? by Jase (@jasesmith) on CodePen.

 

 

 

Underline gradient animation

テキストリンクにホバーすると、グラデーションがアニメーションするCSS小技。

See the Pen Underline gradient animation by NickNoordijk (@NickNoordijk) on CodePen.

 

 

 

How do I get a custom colored underline that will span multiple lines?

鮮やかなグラデーションカラーを使ったリンク用ホバーエフェクトで、複数行にまたがる文字テキストにも対応できます。

See the Pen How do I get a custom colored underline that will span multiple lines? by Will King (@Wking) on CodePen.

 

 

 

Link Effectz – Squiggle

リンクにホバーすると波線ウェーブが動き出すCSSアニメーションエフェクト。

See the Pen Link Effectz – Squiggle by Geoff Graham (@geoffgraham) on CodePen.

 

 

 

3D step counter card

表示されたカードをクリックすると、これまでに走破した歩行数が、立体的な棒グラフで表示されます。

See the Pen 3D step counter card by Steve Gardner (@ste-vg) on CodePen.

 

 

 

Ink Cursor

瞬時に切り替わるテキストエフェクトだけでなく、まるで生きているようなマウスカーソルの動きにも注目です。

See the Pen Ink Cursor by Ricardo Mendieta (@mendieta) on CodePen.

 

 

 

Card stack tutorial animation

カードを重ねた状態で、質問を進めていくユニークなレイアウトアイデア。

See the Pen Card stack tutorial animation by Brandon Ward (@brandondward) on CodePen.

 

 

 

3D CSS Grid Mondrian Compositions

ドロップシャドウをつかい奥行きをうまく表現した要素は、マウスホバーすると立体的に回転をはじめます。

See the Pen 3D CSS Grid Mondrian Compositions by Peter Barr (@petebarr) on CodePen.

 

 

 

CSS / SVG Blobby Background

CSSとSVGでゆらゆらと画面上を漂うラバエフェクトを演出しています。

See the Pen CSS / SVG Blobby Background by Cassie Evans (@cassie-codes) on CodePen.

 

 

 

SVG Cosmos Pattern

スイッチをオンにすると、背景のSVGアイコンがアニメーションを開始するユニークなアイデア。

See the Pen SVG Cosmos Pattern by agathaco (@agathaco) on CodePen.

 

 

 

Masking Path Animation

マジックペンで手書きした文字をSVGにし、アニメーションさせるCSSテクニック。

See the Pen Masking Path Animation by Envato Tuts+ (@tutsplus) on CodePen.

 

 

 

Letter Hover Animations

マウスホバーに応じて変化するテキストエフェクト8連発。

See the Pen Letter Hover Animations by Ryan Mulligan (@hexagoncircle) on CodePen.

 

 

 

Black Mirror Cracked Text Effect

See the Pen Black Mirror Cracked Text Effect by George W. Park (@GeorgePark) on CodePen.

 

 

 

Snakes – POP.svg

シュルシュルと蛇のような動きをCSSアニメーションで表現したテキストエフェクト。

See the Pen Snakes – POP.svg by Steve Gardner (@ste-vg) on CodePen.

 

 

 

Only CSS: Screw

ぐるぐると回転する文字テキストエフェクト。

See the Pen Only CSS: Screw by Yusuke Nakaya (@YusukeNakaya) on CodePen.

 

 

 

Cascading text effects w/ Splitting + ScrollOut ✍️

フェードアウトやスライド、スワップなど各種テキスト用アニメーションエフェクトをまとめたコレクション。

See the Pen Cascading text effects w/ Splitting + ScrollOut ✍️ by Jhey (@jh3y) on CodePen.

 

 

 

SVG/Stroke Animation.

SVGストロークをつかったアニメーションエフェクトを採用したロゴデザイン。

See the Pen SVG/Stroke Animation. by Mansoour (@Mansoour) on CodePen.

 

 

 

glitch hello world

グリッチエフェクトを文字テキストに採用したサンプル例。

See the Pen glitch hello world by sean_codes (@sean_codes) on CodePen.

 

 

 

Yeti Hand Pagination

ページ送りボタンをクリックすると、下から雪男が、、。

See the Pen Yeti Hand Pagination by Darin (@dsenneff) on CodePen.

 

 

 

HyperMorph 3000™

犬から猫へとぬるりとしたモーフィングアニメーションで変化します。

See the Pen HyperMorph 3000™ by Andreas Borgen (@Sphinxxxx) on CodePen.

 

 

 

 Apple Watch Scroll Border | @keyframers 1.20.0

スクロールすると画像コンテンツが拡張されながら表示される、Apple公式ページで採用されたテクニックを再現しています。

See the Pen  Apple Watch Scroll Border | @keyframers 1.20.0 by @keyframers (@keyframers) on CodePen.

 

 

 

Isometric eCommerce CSSGrid

Flexboxとならんでよく利用されているCSS Gridをつかい、立体的なレスポンシブ対応のショッピングギャラリーページを作成します。

See the Pen Isometric eCommerce CSSGrid by Andy Barefoot (@andybarefoot) on CodePen.

 

 

 

Magnific Gallery V2

ポップアップで表示されるシンプルなギャラリー、随所に魅せるアニメーションエフェクトが素敵。

See the Pen Magnific Gallery V2 by Michal Niewitala (@mican) on CodePen.

 

 

 

Uber-like Navigation

先日リニューアルされたUberのオフィシャルサイトで利用されている、ナビゲーションメニューを完全再現したスニペット。

See the Pen Uber-like Navigation by creme (@creme) on CodePen.

 

 

 

Flippin’ burgers

CSSとSVGのみで表現できる、シンプルだけど有効的なアニメーションが満載のナビゲーションメニュー8連発。

See the Pen Flippin’ burgers by Mikael Ainalem (@ainalem) on CodePen.

 

 

 

Hamburger menu button w/handwriting effect

筆記体で書かれたOpenの文字が、クリックするとスルスルとCloseへと変化していくアニメーション。

See the Pen Hamburger menu button w/handwriting effect by Craig Roblewsky (@PointC) on CodePen.

 

 

 

Notify me

メールアドレスの登録をさり気なくすすめるボタンエフェクト。

See the Pen Notify me by bertdida (@bertdida) on CodePen.

 

 

 

Hover Over Me Button

クリックするとふわりと浮かび上がり、消え去ってしまうボタンエフェクト。

See the Pen Hover Over Me Button by Harmandeep Singh (@hsdua2304) on CodePen.

 

 

 

Realistic 3D Image Flip Box, Flip Card, 3d Image hover, Kallyas WordPress Theme

マウスホバーで立体的に回転するカード型ホバーエフェクト、文字テキスト以外にもボタンなども設置できます。

See the Pen Realistic 3D Image Flip Box, Flip Card, 3d Image hover, Kallyas WordPress Theme by Nicola Mihaita (@nicolamihaita) on CodePen.

 

 

 

Star Wars Imperial Army’s Product Slider!

ドロップシャドウを使い、奥行き感たっぷりに要素をレイヤー状に重ねたイメージスライダーで、今後注目のデザイントレンド。

See the Pen Star Wars Imperial Army’s Product Slider! by Muhammed Erdem (@JavaScriptJunkie) on CodePen.

 

 

 

Masked Circle Slider

サークル円を画面の中心に、マウスドラッグで遷移するイメージスライダー。

See the Pen Masked Circle Slider by Fabio Ottaviani (@supah) on CodePen.

 

 

 

Owl Carousel stage slider

中央にロゴを固定した、画面全体で展開するイメージスライダー。

See the Pen Owl Carousel stage slider by Clark Wimberly (@clarklab) on CodePen.

 

 

 

Expanding flex cards

レスポンシブ対応でフレキシブルに開閉展開するイメージスライダー。

See the Pen Expanding flex cards by Zed Dash (@z-) on CodePen.

 

 

 

Stretch Scroll

左横に設置されたボタンをクリックすると、ストレッチして伸びながら変化するイメージスライダー。

See the Pen Stretch Scroll by Nathan Taylor (@nathantaylor) on CodePen.

 

 

 

Responsive Blog Card Slider

ブログを想定した、レスポンシブにも対応のイメージスライダー。新着エントリーの表示などにも最適です。

See the Pen Responsive Blog Card Slider by Muhammed Erdem (@JavaScriptJunkie) on CodePen.

 

 

 

dynamic filters

赤と青の水面に浮かんだマーブル模様が、絶えずアニメーションしながら変化するフィルタエフェクト。

See the Pen dynamic filters by Jesper Lauridsen (@justjspr) on CodePen.

 

 

 

SVG Morphing

右下のChangeボタンをクリックすると、ビデオ動画の上に重なったSVGレイヤーをアニメーションさせます。

See the Pen SVG Morphing by Fabio Ottaviani (@supah) on CodePen.

 

 

 

CSS & SVG Waves Animation

SVGを重ねてアニメーションさせることで、リアルな波の奥行き感を演出できるCSSテクニック。

See the Pen CSS & SVG Waves Animation by Ted McDonald (@tedmcdo) on CodePen.

 

 

 

Ripple Mouse (with plasma)

水面がゆらゆらと揺れる様子を3Dで表現した作品で、マウスカーソルで水面を触ることができます。

See the Pen Ripple Mouse (with plasma) by Liam Egan (@shubniggurath) on CodePen.

 

 

 

Seeding

スクリーン全体にカラフルなドット柄が飛散するアニメーションを、CSSのみで表現しています。

See the Pen Seeding by yuanchuan (@yuanchuan) on CodePen.

 

 

 

Vertically center in 3 lines of CSS

display: grid;プロパティを利用し、たった3行で要素の天地中央揃えできるテクニック。

See the Pen Vertically center in 3 lines of CSS by SMHutch (@Scott-Hutcheson) on CodePen.

 

 

 

Pacific Northwest Fog

まるで霧が出ているようなアニメーションをCSSのみでスタイリングしたテクニック。

See the Pen Pacific Northwest Fog by Thomas Vaeth (@thomasvaeth) on CodePen.

 

 

 

Opening screen for a banking app

指紋認証システムをモチーフにしたアニメーションエフェクト。

See the Pen Opening screen for a banking app by Kirill Kiyutin (@kiyutink) on CodePen.

 

 

 

CSS Reveal animation text and image

非表示のコンテンツがアニメーション付きで展開しながら表示される、最近良く見かけるテクニックのひとつ。

See the Pen CSS Reveal animation text and image by Anthony Fessy (@antho-fsy) on CodePen.

 

 

 

Credit Card Payment Form

クレジットカード番号の入力をよりスムーズに行うことができるテクニック。

See the Pen Credit Card Payment Form by Adam Quinlan (@quinlo) on CodePen.

 

 

 

SVG animation with sliders

スライダーを調整することで、家の大きさや高さなどが、アニメーション付きでリアルタイムに変化していくSVGデザイン。

See the Pen SVG animation with sliders by Kenneth Aamås (@knekk) on CodePen.

 

 

 

Yeti 404 Page

暗闇で震える雪男が、懐中電灯を照らしたその先で見つけたものは、。

See the Pen Yeti 404 Page by Darin (@dsenneff) on CodePen.

 

 

 

Periodic Table of Elements – HTML/CSS

科学の授業などで見かける、元素の周期表をCSS Gridプロパティを用いて見事に再現したスニペット。

See the Pen Periodic Table of Elements – HTML/CSS by Mike Golus (@mikegolus) on CodePen.

 

 

 

The handbook download animation

立体的に並べられた参考書やeブックのレイアウトにいかがでしょう。

See the Pen The handbook download animation by Yancy Min (@yancy) on CodePen.

 

 

 

Books Hover Animation

ホバーするとブックマークできる、本をめくるようなさりげないエフェクト。

See the Pen Books Hover Animation by Yancy Min (@yancy) on CodePen.

 

 

 

Monopoly board

世界的に人気のボードゲーム Monopoly を、CSS Gridプロパティを用いてそのまま再現したCSSテクニック。

See the Pen Monopoly board by John Coppola (@johnnycopes) on CodePen.

 

 

 

CSS-only directionally aware hover

マウスホバーに合わせてホバーエフェクトが変化するエフェクトを、CSSのみで実現したテクニック。

See the Pen CSS-only directionally aware hover by Giana (@giana) on CodePen.

 

 

 

Airplane window toggle

トグルスイッチを飛行機のウィンドウ窓で表現した、CSSアニメーションを使った作品。

See the Pen Airplane window toggle by Comehope (@comehope) on CodePen.

 

 

 

Pure CSS Toggle Buttons | ON-OFF Switches

CSSのみでスタイリングされた、各種トグルボタン用エフェクトをまとめたコレクション。

See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen.

 

 

 

3D toggle – click it!

こちらもCSSのみで表現された、立体的な3Dトグルスイッチ。

See the Pen 3D toggle – click it! by Ana Tudor (@thebabydino) on CodePen.

 

 

 

Totoro Toggle

あの人気キャラクターをCSSで作成したトグルスイッチ。

See the Pen Totoro Toggle by Adam Kuhn (@cobra_winfrey) on CodePen.

 

 

 

Pencil and Paper Checkboxes

鉛筆でチェックを入れた感覚をそのまま表現したユニークな作品。

See the Pen Pencil and Paper Checkboxes by Jon Kantner (@jkantner) on CodePen.

 

 

 

Fancy input, CSS animation

検索ボタンをクリックすると、スムーズでなめらかなアニメーションをつかって、入力フォームが出現します。

See the Pen Fancy input, CSS animation by Stanko (@stanko) on CodePen.

 

 

 

Slice list items

ToDoリストで完了したタスクを消去すると、スライスされるアニメーションエフェクトが。

See the Pen Slice list items by Aaron Iker (@aaroniker) on CodePen.

 

 

 

1 Element CSS Spinners

シンプルなコードのみでスタイリングされた、CSSローディングアニメーション8種類セット。

See the Pen 1 Element CSS Spinners by Paolo Duzioni (@Paolo-Duzioni) on CodePen.

 

 

 

Elite Dangerous Inspired Loader – Pure CSS

薄暗い暗闇にランプが点灯しているようなエフェクトをCSSで表現しています。

See the Pen Elite Dangerous Inspired Loader – Pure CSS by James Panter (@jpanter) on CodePen.

 

 

 

SVG Drip Loader

液体がドリップする様子をローディング読み込みにつかうアイデア。

See the Pen SVG Drip Loader by Chris Gannon (@chrisgannon) on CodePen.

 

 

 

Infinitely drawing icons

SVGアイコンをつかい、パスに沿ってアニメーションさせるテクニックは、いろいろな用途に応用できそうです。

See the Pen Infinitely drawing icons by Mikael Ainalem (@ainalem) on CodePen.

 

 

 

Jump and Slide

スライドするオブジェクトを、他のオブジェクトがジャンプしながら避けているようなアニメーションが素敵。

See the Pen Jump and Slide by Steve Gardner (@ste-vg) on CodePen.

 

 

 

‘Making pancake’ loader

パンケーキをフライパンで焼いている様子を表現したCSSアニメーション。

See the Pen ‘Making pancake’ loader by Pawel (@pawelqcm) on CodePen.

 

 

 

LEGO Loader

カラフルなブロックをつかった、見ていて飽きないローディングアニメーションの好サンプル例、

See the Pen LEGO Loader by Chris Gannon (@chrisgannon) on CodePen.

 

 

 

Love is Love

レインボーカラーに並ぶドット柄が、伸縮ストレッチしながら、ハート型を描いています。

See the Pen Love is Love by yumeeeei (@yumeeeei) on CodePen.

 

 

 

Happy Halloween

ハロウィンシーズンに合わせてCSSのみでデザインされたイラストアニメーション。

See the Pen Happy Halloween by Mohan Khadka (@khadkamhn) on CodePen.

 

 

 

Al Boardman’s The Machine

CSSのみでデザインされた、ピタゴラスイッチのような複雑な機械。

See the Pen Al Boardman’s The Machine by kittons (@airnan) on CodePen.

 

 

 

She’s Ghosting You

デートに行った彼女にメールするけど返信がない、そんな状況をCSSでスタイリング。

See the Pen She’s Ghosting You by Cassidy Williams (@cassidoo) on CodePen.

 

 

 

The Bouncer at 403

画面をクリックしようとすると、お店の外にいる屈強なバウンサーが、通路をふさぎます。

See the Pen The Bouncer at 403 by Cassidy Williams (@cassidoo) on CodePen.

 

 

 

3D Emoji Town (Pure CSS)

CSSと絵文字飲みを使ってデザインされた、アニメーション付きのタウンマップ。

See the Pen 3D Emoji Town (Pure CSS) by George W. Park (@GeorgePark) on CodePen.

 

 

 

RetroFighter Gunship

レトロなシューティングゲームを再現したHTMLスニペット。クリックで玉を発射できます。

See the Pen RetroFighter Gunship by Rainner Lins (@rainner) on CodePen.

 

サムネイル@ : Periodic Table of Elements – HTML/CSS – CodePen.io