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

latest-html-snippet-2018-july

 

ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。

 

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

 

Webサイトを使いやすく!UIデザインのCSS小技テクニック21個まとめ(実例サンプルコード付)

CSSで実現!目を奪われる素敵ホバーエフェクト用HTMLスニペット32個まとめ

コピペで利用可!思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ

 

 

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

 

WebGL Distortion Slider

ディスプレイを歪ませながら変化していくインタラクティブなイメージスライダー。

 

 

 

Scrolling Gradients

スクロールすることで背景のグラデーションカラーが変化していくテクニックで、CSSのみでスタイリングされています。

 

 

 

Pure CSS3 Gradient Background Animation

CSSのみでスタイリングされたアニメーション付きグラデーション背景。

 

 

 

Animated Header Background Twitter

上記アニメーションをヘッダーデザインとして採用した実践スニペットで、効果的に注目を集めることができます。

 

 

 

Animated CSS Gradient Border

ボーダーラインにグラデーションを採用し、さらにアニメーションを追加したスニペットで、CSSオンリーでスタイリングされています。

 

 

 

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

グラデーションを使った下線アンダーラインのデザイン小技テクニック。

 

 

 

Gradient for EVERY line of a para.

段落に書かれている文字テキスト全体にグラデーションカラーを適用するテクニック。

 

 

 

Neon Text Effect

CSSのみでスタイリングできるネオンテキストエフェクトで、自由にカラーリングを変更することもできます。

 

 

 

HTML Buddies & : Stings

まるで手書きで添削したようなスタイリングが可能なスニペットで、タグを使ったテクニック。

Tariff Cards

立体的に浮かび上がったカードをまるでタッチしているようなアニメーションエフェクト。

 

 

 

Infinitely Drawing Icons

SVGアイコンのパスに沿ってアニメーションを追加したローディング用UIデザイン。

 

 

 

More

表示された文字テキストをクリックしながら動かすことで、ユニークなアニメーションを実装できるテクニック。

 

 

 

Code

文字をクリックするとコンソール上に記述されたナビメニューが出現します。

Animated Bubbles

フルフルと震えながら水泡が画面の下から無限に現れるテクニック。

 

 

 

Menu: #CodePenChallenge

リンクカーソルの移動に合わせて、SVGグラデーションの形が変化してくインタラクティブなナビメニュー。

 

 

 

Isometric Hover Effect

立体的なホバーエフェクトをCSSのみで表現するテクニック。

 

 

 

Mickey and Walt

SVGアニメーションを使い、まるで紙の上にスケッチしているようなスタイルを完成させます。

 

 

 

Where is Pinochio?

ルーペを使ってクジラの中を覗きながら、ピノキオを探すストーリーを表現したスニペット。

 

 

 

Gravity Points

画面上のクリックした場所に無数の光を集めるデザインテクニック。

 

 

 

Solids

くるくると360度立体的に回転するさまざまな図形シェイプを表現しています。

 

 

 

Wavy Header

ゆらゆらと揺れるラインアニメーションをヘッダーに追加するテクニック。

 

 

 

SVG Pattern Doodler

AIが描くSVGパターンジェネレーターで、ページを更新するたびに異なるパターンデザインが表現されます。

 

 

 

Game boy running zelda links awakening intro

レトロなゲームのイントロ画面を表現したユニークなコンセプトデザイン。

 

 

 

Responsive Video Background

どんなスクリーンサイズにも対応できるレスポンシブな動画貼り付けテクニックで、ドット状のパターンを上に重ねています。

 

 

 

Playful CSS figure & figcaption

カード型レイアウトの立体的なスタイリングで、より効果的に文字テキストを表現できます。

 

 

 

Playing with SVG displacement filter

SVGフィルタの調整具合を確認できるサンプルデモ。

 

 

 

Apple Keyboard

超リアルに表現されたAppleのキーボードで、CSSのみでスタイリングされています。

 

 

 

Retro Error 404 – Zelda 2

某テレビゲームをモチーフにしたアイデア満載の404エラーページのコンセプトデザイン。

 

 

 

Media Query Mario

世界的に有名なあのゲームをモチーフにしたスニペット。320px420pxにウィンドウサイズを設定することでゲームが開始し、ウィンドウサイズを大きくすることでゲームが進んでいく仕掛け。

 

 

 

Space Invaders on DOM – (no canvas)

往年のレトロゲームをそのまま完全再現したHTMLスニペットで、実際にプレイすることも可能です。

 

 

 

PL intro animation w/ GSAP TimelineMax

インタラクティブなアニメーションと2018年を代表するポップなカラーリングが目を引くイントロ用アニメーションデザイン。

 

 

 

Grid Experiment No. 4

CSS Gridプロパティを使ってデザインされたフードメニュー表で、自由なレイアウトを可能にしたスニペットを確認できます。

 

 

 

Grid Experiment No. 6

CSS Gridプロパティを利用して作成された手書きの伝票で、もちろんCSSのみでスタイリングされています。

 

 

 

Smart Home Temperature Slider

アニメーション付きで変化する温度計をデザインしたスライダー。

 

 

 

Waves

水面のようにユラユラと動くなめらかなウェーブ波をデザインします。

 

 

 

Spotify Artist Page UI

音楽ストリーミングサービスSpotifyのUIデザインを完全再現したスニペット。

 

 

 

Spilled Paint v2

クリックするたびにペンキが垂れてきたようなエフェクトを追加するテクニック。

 

 

 

CSS / SVG Blobby Background

 

 

 

Draggable House

ウィンドウサイズを変化することで家の形が変化していきます。

 

 

 

Solar System Explorer in CSS

銀河系の各惑星間をタイムマシーンのようなアニメーションエフェクトで移動します。CSSのみでスタイリングされているとは思えないほどのレベル。

 

 

 

The Chameleon from Null Island

四隅に描かれている葉っぱにカーソルを合わせることで、カメレオンの体の色も変化していきます。

 

 

 

Scroll & Morph

スクロールに応じてシェイプの形がモーフィング変化してくテクニック。

 

 

 

Responsive bodymovin modal / page transition

画面中央から飛び出るようなアニメーションエフェクトが特長で、画面サイズに応じて自動リサイズされます。

 

 

 

Canvas Glitch Intro

グラフィックデザインでもよく見かけるグリッチエフェクトを使ったイントロ画面。

 

 

 

React Animated Page Transitions

ボタンをクリックすると超立体的にコンテンツが展開するアニメーションテクニック。

 

 

 

Responsive Huggy Laser Panda Factory

ボタンをクリックするとパンダのぬいぐるみをピタゴラスイッチ的に作成するマシーン。

 

 

 

way wavy way

キラリと輝くライティングエフェクトが美しいウェーブ波をCanvasでデザインしています。

 

 

 

A Travel

画面の中に引き込まれているような無限の立体アニメーションが未来的なスニペット。

 

 

 

Pacman Concept

 

 

 

Switch loading animation

トグルをクリックするとローディング用のマイクロインタラクションが追加されています。

 

 

 

Wimbledon Toggle

トグルのスイッチを切り替えるたびにテニスボールが左右に移動します。

 

 

 

SVG Drip Loader

水滴が垂れるようなエフェクトが特長のローディングアニメーション。

 

 

 

1 Element CSS Spinners

CSSのみでスタイリングされたローディングアニメーション各種8個。

 

 

 

Google Loaders Redesign

Googleのローディングアニメーションをリデザインしたコンセプト用スニペット。

 

 

 

Tappy loader

指を机で叩いているようなエフェクトをCSSのみで表現したローディングアニメーション。

 

 

 

Horse ride carousel flat design by Lina for Zajno (3D animated with CSS3)

CSSのみでスタイリングされた、クルクルと回転するメリーゴーランドを表現しています。

 

 

 

CSS: Cat Swinging on String

揺れる赤い玉につかまるキュートな猫をCSSのみでスタイリング、デザインしたかわいいスニペット。

 

 

 

Letter Hover Animations

文字テキストのホバーエフェクトを4種類まとめたアニメーション。

 

 

 

Low poly animals

レインボーカラーのポリゴンスタイルで表現されたアイコンが、アニメーション付きで変化してくスニペット。

 

 

 

SVG Animation – Island project

CSSのみでデザインされたとは思えないほど詳細に描かれた島で、ユラユラと揺れるアニメーションも追加されています。

 

 

 

💥 Boom 💥

ポリゴンスタイルで表現された地球ですが、時間が経つと。。。アニメーションの魅力をうまく伝えるスニペットのひとつ。

 

 

 

Dual Slideshow Demo

スライダーに合わせて数字も変化し、その数字にカーソルを合わせることで背景イメージを展開できます。

 

 

 

Cities Slider (React)

 

 

 

Untitled Slider

 

 

 

Text Is Flying

画面上をクリックすると、そこからカラフルなテキストが無数に出現するユニークなエフェクト。

 

 

 

Long Gradient Shadow

文字テキストに合わせてカラフルなロングシャドウを追加できるテキストエフェクト。

 

 

 

Bubbling Text Effect

文字テキストから泡がフツフツと現れるアニメーションエフェクト。

 

 

 

letters effect

画面をスクロールすると隠れていた文字が出現するアニメーション用スニペット。

 

 

 

Animated hover button

マウスカーソルを合わせる方向からバブル状のホバーエフェクトが展開するボタン。

 

 

 

Buttons falling apart

ボタンのクリックに合わせてパズル状に消えていくアニメーションエフェクト。

 

 

 

Thoughts & Prayers

手書きで立体感のあるユニークなボタンを詰め合わせたHTMLスニペット。

 

 

 

UI Motion – Shipping Concept

商品発送ボタンをクリックすると、ボタンがトラックの形に変形する仕掛けが。

 

 

 

CSS Menu Icon Animation: Know Your Menu

ハンバーガーメニューの他に、弁当メニューやケバブメニューなどナビゲーションのさまざまなスタイルをCSSで表現しています。

 

【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選

2017年大本命!HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ