サイトの質が向上!コピペできるHTML/CSS便利スニペット100個まとめ

best-html-snippet-2020-july2

この記事では、Webデザイン制作に便利なコピー&ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。

 

新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のデザイン制作に活用してみてはいかがでしょう。

 

ここでは、カテゴリー別に分けて最新HTML/CSSスニペットをまとめています。

 

コンテンツ目次

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

 

 

サイトの質が向上!コピペできるHTML/CSS便利スニペットまとめ

小技テクニック系

Declaring Bits of Unselectable Text

文章テキストの補足に便利なテクニック、文字の右上に数字を小さく表示し、文章下にまとめて補足テキストを追加します。

See the Pen
Declaring Bits of Unselectable Text
by Will Boyd (@lonekorean)
on CodePen.

目次に戻る

 

 

 

CSS Grid-ient 2

コピペで利用できる、方眼紙のようなマス目をCSS Gridプロパティを利用して作成しています。

See the Pen
CSS Grid-ient 2
by Jordan Marshall (@TheCSSKing)
on CodePen.

目次に戻る

 

 

 

Grid hover effect with subgrid

重ねて表示されたデザイン要素全体をクリック可能にするテクニック。詳しい使い方はこちらの記事よりどうぞ。

See the Pen
Grid hover effect with subgrid
by Michelle Barker (@michellebarker)
on CodePen.

目次に戻る

 

 

 

CSS folded poster effect

CSSスタイリングによって、紙の折り目のようなエフェクトを再現します。

See the Pen
CSS folded poster effect
by Lynn Fisher (@lynnandtonic)
on CodePen.

目次に戻る

 

 

 

ScrollTrigger – Highlight Text

ページスクロールに合わせて、部分的に黄色マーカーでハイライトされるテクニック。話題のScrollTriggerプラグインによる実装。

See the Pen
ScrollTrigger – Highlight Text
by Ryan Mulligan (@hexagoncircle)
on CodePen.

目次に戻る

 

 

 

Pretty Sticky

スクロールに合わせて、セクションごとに要素を固定できる小技。position: sticky;プロパティを利用したお手軽スタリングですが、効果的なテクニック。

See the Pen
Pretty Sticky
by Ying (@BurmesePotato)
on CodePen.

目次に戻る

 

 

 

Realistic shadows to images

疑似要素を使って、画像のドロップシャドウを表現するテクニック。ぼかし具合と不透明度をお好みで調整しましょう。

See the Pen
Realistic shadows to images
by Gayane (@gayane-gasparyan)
on CodePen.

目次に戻る

 

 

 

Slide up hover effect CSS-only

マウスホバーで詳細テキストが下からスライド表示されるCSSテクニック。行数が異なるテキストにも対応可能。

See the Pen
Slide up hover effect CSS-only
by Michelle Barker (@michellebarker)
on CodePen.

目次に戻る

 

 

 

IntersectionObserver Visualizer

スクロールでのイベント制御を行いやすくするIntersection Observer APIの使い方をビジュアル化した、チートシート的ツール。

See the Pen
IntersectionObserver Visualizer
by Michelle Barker (@michellebarker)
on CodePen.

目次に戻る

 

 

 

Sorted CSS Colors

ウェブサイトで利用する配色をスライダーを動かすだけで、直感的に選ぶことができるカラーツール。

See the Pen
Sorted CSS Colors
by Mustafa Enes (@pavlovsk)
on CodePen.

目次に戻る

 

 

 

Mask & Css Filter

各種CSSフィルタを利用したイメージ画像のマスキングエフェクトで、右側のリンクより各エフェクトをプレビューできます。

See the Pen
Mask & Css Filter
by Hisami Kurita (@hisamikurita)
on CodePen.

目次に戻る

 

 

 

Structural pseudocats 🐱

疑似要素の構造をビジュアル的に解説したチートシート。

See the Pen
Structural pseudocats 🐱
by Wendy Kong (@wendko)
on CodePen.

目次に戻る

 

 

 

Cooltipz.css – Cool tooltips made from pure CSS

CSSのみでスタイリングされたツールチップ用ライブラリ。表示する向きやサイズなどの調整も可能。

See the Pen
Cooltipz.css – Cool tooltips made from pure CSS
by Jack Domleo (@JackDomleo)
on CodePen.

目次に戻る

 

 

 

Underline to Talking Bubble Morphing

リンクにカーソルを合わせるとツールチップがポップアップ表示されるCSSテクニック。

See the Pen
Underline to Talking Bubble Morphing
by Mikael Ainalem (@ainalem)
on CodePen.

目次に戻る

 

 

 

Fuze – CSS Gradient Animator

3色をつかったアニメーション付きグラデーションを生成できるツールで、ソースコードもそのままコピペで利用できます。

See the Pen
Fuze – CSS Gradient Animator
by Mr Alien (@mr_alien)
on CodePen.

目次に戻る

 

 

 

面白系

Colorful Bubbles

マウスの軌跡にカラフルなレインボーなバブルが追従するアニメーションエフェクト。

See the Pen
Colorful Bubbles
by Aniket Kudale (@aniketkudale)
on CodePen.

目次に戻る

 

 

 

Codepen Challenge – Scrolling GSAP Animation

海に浮かぶ船から釣り糸を垂らし、ページ下までスルスルと移動するスニペット。

See the Pen
Codepen Challenge – Scrolling GSAP Animation
by Shunya (@shunyadezain)
on CodePen.

目次に戻る

 

 

 

Animated folder micro-interaction

クリックするとアニメーション付きでドロップダウン表示されるリスト用スニペット。

See the Pen
Animated folder micro-interaction
by Niels Voogt (@NielsVoogt)
on CodePen.

目次に戻る

 

 

 

Folding Ticket Detail

各カードをクリックすると、フライト情報がパネル上に展開、表示されるUIインタラクション。

See the Pen
Folding Ticket Detail
by Yugam (@pizza3)
on CodePen.

目次に戻る

 

 

 

Shopping UI

左パネルのAdd to Cartボタンをクリックすると、右パネルに商品が追加されるシームレスなフロー。

See the Pen
Shopping UI
by morooka (@mo-ro)
on CodePen.

目次に戻る

 

 

 

42 | Bedroom Construction with threejs + GSAP #codepenchallenge

See the Pen
42 | Bedroom Construction with threejs + GSAP #codepenchallenge
by Yiting Liu (@yitliu)
on CodePen.

目次に戻る

 

 

 

Apple IIe 3D

レトロなAppleパソコンをCSSのみで超リアルに再現したスニペット、すごすぎ。

See the Pen
Apple IIe 3D
by Marian Ban (@marianban)
on CodePen.

目次に戻る

 

 

 

Coffee for you

白いカップに注いだ熱々のコーヒーを真上から見た様子を、まるで動画のようにデザインした作品。

See the Pen
Coffee for you
by Vadim (@v_Bauer)
on CodePen.

目次に戻る

 

 

 

Codepen Challenge: GSAP – Sequencing

アメリカの田舎町に立っていそうな、ネオン管をつかった派手な看板。

See the Pen
Codepen Challenge: GSAP – Sequencing
by Sicontis (@Sicontis)
on CodePen.

目次に戻る

 

 

 

ScrollTrigger Demo

マウススクロールに合わせて、ハムスターがくるくると走り出す、ScrollTriggerプラグインのインタラクティブなコンテンツの魅せ方。

See the Pen
ScrollTrigger Demo
by Mariusz Dabrowski (@MarioD)
on CodePen.

目次に戻る

 

 

 

sea anemone

カンバスに描かれる無数のドットの軌跡を、カラフルなレインボーカラーで表現するアニメーション。

See the Pen
sea anemone
by Dillon (@Dillo)
on CodePen.

目次に戻る

 

 

 

flags waves anime three.js

はためく旗をカスタマイズできるオンラインツールで、画像をアップロードして旗にすることも可能。

See the Pen
flags waves anime three.js
by okada-web (@okada-web)
on CodePen.

目次に戻る

 

 

 

背景写真が透けて見える、半透明エフェクトがポイントのUIデザイン。トグルで切り替えも可能。

See the Pen
Profile Card UI
by JotForm (@jotform)
on CodePen.

目次に戻る

 

 

 

deconstructed

See the Pen
deconstructed
by Gerard Ferrandez (@ge1doot)
on CodePen.

目次に戻る

 

 

 

Who can get my blood?

血液型をクリックすると、輸血できるタイプを瞬時に教えてくれるビジュアルツール。

See the Pen
Who can get my blood?
by Romina (@RominaMartin)
on CodePen.

目次に戻る

 

 

 

Repeater Orchestra (1.0)

マイク端子から入力した音をつかって、自分だけのオーケストラを完成させるユニークなツール。音を繰り返すことで、はじめのイメージとは全く異なる雰囲気に。

See the Pen
Repeater Orchestra (1.0)
by Bryant Smith (@barefootfunk)
on CodePen.

目次に戻る

 

 

ホバーエフェクト系

Hover image

文字テキストにホバーすると、多彩なアニメーション付きで画像リンクが表示されます。

See the Pen
Hover image
by Cassie Evans (@cassie-codes)
on CodePen.

目次に戻る

 

 

 

CSS-only Fade Siblings on Hover

ホバーしたリンク以外は、半透明の非表示状態となるCSSテクニック。

See the Pen
CSS-only Fade Siblings on Hover
by Shaw (@shshaw)
on CodePen.

目次に戻る

 

 

 

Magnetic Hover Interaction

カスタマイズされたマウスカーソルをつかって、各メニューをロックオンするホバーエフェクト。

See the Pen
Magnetic Hover Interaction
by Sikriti Dakua (@dev_loop)
on CodePen.

目次に戻る

 

 

 

Underline animation

アンダーラインが引かれたリンクにホバーすると、矢印に形を変化させる、シンプルで効果的なテクニック。

See the Pen
Underline animation
by Aaron Iker (@aaroniker)
on CodePen.

目次に戻る

 

 

 

Text fill on hover #1

文字テキストが左から塗りつぶされるホバーエフェクト、ナビメニューにも最適。

See the Pen
Text fill on hover #1
by G Rohit (@grohit)
on CodePen.

目次に戻る

 

 

 

CSS Clip-Path Hover Effect

画像にマウスカーソルを合わせると、矢印にシェイプを変化させるホバーエフェクト。

See the Pen
CSS Clip-Path Hover Effect
by freefrontend.com (@cssparadise)
on CodePen.

目次に戻る

 

 

 

テキストエフェクト

ScrollTrigger: SVG Text Mask

山頂に雲がかかる雪山をスクロールすると、文字テキストが変化します。

See the Pen
ScrollTrigger: SVG Text Mask
by Tom Miller (@creativeocean)
on CodePen.

目次に戻る

 

 

 

#webdev series – Colorful text animation #updated

文字テキストに美しいグラデーションを採用し、滑らかなアニメーションで色が変化していきます。

See the Pen
#webdev series – Colorful text animation #updated
by Hendry Sadrak (@hendrysadrak)
on CodePen.

目次に戻る

 

 

 

#BlackLivesMatter ✊🏿✊🏾✊🏽

-webkit-background-clipプロパティを利用して、文字テキストに合わせて画像をマスキング。

See the Pen
#BlackLivesMatter ✊🏿✊🏾✊🏽
by Max Mikhalchuk (@s1mpson)
on CodePen.

目次に戻る

 

 

 

WEEKEND 😃

文字テキストがカラフルに伸縮しながら上下に移動するテキストエフェクト。

See the Pen
WEEKEND 😃
by Sikriti Dakua (@dev_loop)
on CodePen.

目次に戻る

 

 

 

SVG text mask w/ image sequence

モクモクとした煙から文字テキストが出現するSVGマスキングテクニック。

See the Pen
SVG text mask w/ image sequence
by Tom Miller (@creativeocean)
on CodePen.

目次に戻る

 

 

 

Type it Say it

文字を入力すると音声付きでアルファベットを読み上げてくれます。

See the Pen
Type it Say it
by David Lewis (@dp_lewis)
on CodePen.

目次に戻る

 

 

 

Splitting Demo

Variableフォントを利用することで、呼吸をするように滑らかなテキストアニメーションを実現できます。

See the Pen
Splitting Demo
by diego (@diego154)
on CodePen.

目次に戻る

 

 

 

IN TOO DEEP

ネオンライトで照らされた文字テキストにアニメーションエフェクトを追加したスニペット。

See the Pen
IN TOO DEEP
by Alex Trost (@a-trost)
on CodePen.

目次に戻る

 

 

 

GSAP Practice

モーション制作用JSプラグインGSAPを活用したテキストエフェクト。ページ下にある再読み込みボタンクリックで、別の配色カラーパレットでランダム表示します。

See the Pen
GSAP Practice
by Caroline Artz (@carolineartz)
on CodePen.

目次に戻る

 

 

 

GSAP ScrollTrigger on Variable Fonts Perspective

マウスカーソルの動きに合わせて、ルーレットのようにクルクルと回転する文字テキスト。こちらもGSAPプラグインにて実装。

See the Pen
GSAP ScrollTrigger on Variable Fonts Perspective
by Pete Barr (@petebarr)
on CodePen.

目次に戻る

 

 

 

ページレイアウト

Airplanes.

飛行機についてストーリーテリング形式で、多彩なアニメーションで紹介するランディングページ向けレイアウト。

See the Pen
Airplanes.
by Steve Gardner (@ste-vg)
on CodePen.

目次に戻る

 

 

 

Book Store UI

書籍販売サイト向けのUIデザインで、文庫本の表紙カバーが引き立つレイアウトが特長。

See the Pen
Book Store UI
by Aysenur Turk (@TurkAysenur)
on CodePen.

目次に戻る

 

 

 

Parallax scroll animation

スクロールに合わせて景色が変わり、太陽がのぼり、コウモリが羽ばたくなど、ストーリーテリング性を強調したパララックス・アニメーション。

See the Pen
Parallax scroll animation
by isladjan (@isladjan)
on CodePen.

目次に戻る

 

 

 

CSS Grid: Newspaper Layout

CSS Gridプロパティを利用して、新聞紙のようなレイアウトを再現するレイアウト用スタイリング。レスポンシブ対応で、モバイル表示も問題ありません。

See the Pen
CSS Grid: Newspaper Layout
by Olivia Ng (@oliviale)
on CodePen.

目次に戻る

 

 

 

Overlapping Header with CSS Grid

CSS Gridを利用して、立体的に重なるヘッダーデザインをスタイリング。

See the Pen
Overlapping Header with CSS Grid
by Jonathan Snook (@snookca)
on CodePen.

目次に戻る

 

 

 

Responsive CSS Grid – Books

格子状に並べたレイアウト、こちらもCSSGridプロパティとCSS Variablesを利用しています。

See the Pen
Responsive CSS Grid – Books
by Andy Barefoot (@andybarefoot)
on CodePen.

目次に戻る

 

 

 

Apple Watch Page Layout

Apple Watchのページレイアウトを完全再現。ヘッダーではアニメーション付きで画像が表示。

See the Pen
Apple Watch Page Layout
by Jorge Mendes (@jorgemoovein-the-bashful)
on CodePen.

目次に戻る

 

 

 

Meet our team

イメージ画像がすらすらと流れるように背景でアニメーションするレイアウトアイデア。

See the Pen
Meet our team
by Paulina Hetman (@pehaa)
on CodePen.

目次に戻る

 

 

 

Distortion Effect Landing Page

See the Pen
Distortion Effect Landing Page
by Chouaib Belagoun (@chouaibblgn45)
on CodePen.

目次に戻る

 

 

 

Horizontal Timeline Responsive

イラストを利用したタイムライン用レイアウトの参考スニペット。

See the Pen
Horizontal Timeline Responsive
by Nicko Afan (@nickoafan)
on CodePen.

目次に戻る

 

 

 

イメージスライダー

MCU Timeline Carousel

スライドする画像をタイムパネル上に並べることで、どこまで表示したのか一目で確認できるスライダー。

See the Pen
MCU Timeline Carousel
by Ryan Mulligan (@hexagoncircle)
on CodePen.

目次に戻る

 

 

 

Playlist Carousel – css only

CSSのみでスタイリングされたイメージカルーセルで、背景色も切り替えと同時に変化します。

See the Pen
Playlist Carousel – css only
by Aybüke Ceylan (@aybukeceylan)
on CodePen.

目次に戻る

 

 

 

CodePen Home
Parallax swipe (React)

水平方向にスワイプすると、それに合わせて画像がパララックスエフェクト付きで切り替わります。

See the Pen
Parallax swipe (React)
by Yugam (@pizza3)
on CodePen.

目次に戻る

 

 

 

Image slider with multiple controls and mobile swipe control (Javascript)

モバイル端末でのスワイプ操作にも対応した画像スライダー。

See the Pen
Image slider with multiple controls and mobile swipe control (Javascript)
by Hakeem (@Akimzzy)
on CodePen.

目次に戻る

 

 

 

Voyage Slider | GSAP

カードパネルの切り替えに合わせて背景も変化するアニメーション付スライダー。

See the Pen
Voyage Slider | GSAP
by Sikriti Dakua (@dev_loop)
on CodePen.

目次に戻る

 

 

 

Custom scroll slider

モバイルアプリでの利用を想定したイメージカルーセル、スワイプ操作にも対応。

See the Pen
Custom scroll slider
by Arseny M. (@theseventh)
on CodePen.

目次に戻る

 

 

 

Vue Page Animation

キーボードの上下キーでも切替可能なイメージスライダー。

See the Pen
Vue Page Animation
by Tolga Eğilmezel (@Tolga-Egilmezel)
on CodePen.

目次に戻る

 

 

 

CodePen Home
CSS Only: Carousel/Slider with proper sliding between Slides

CSSオンリーでスタイリングされたイメージスライダー。

See the Pen
CSS Only: Carousel/Slider with proper sliding between Slides
by Abubaker Saeed (@AbubakerSaeed)
on CodePen.

目次に戻る

 

 

 

Image Slider | GSAP

画像にマウスカーソルを合わせると文字テキストがテロップ状に流れるように表示されます。

See the Pen
Image Slider | GSAP
by Sikriti Dakua (@dev_loop)
on CodePen.

目次に戻る

 

 

 

ナビゲーションメニュー

Hamburger Menu Interaction

右下に表示されたハンバーガーメニューをクリックすると、画面全体をオーバーレイしたリンクメニューが出現します。

See the Pen
Hamburger Menu Interaction
by Tsukasa Aoki (@TKS31)
on CodePen.

目次に戻る

 

 

 

Navigation

モバイル向けに固定表示されるナビゲーションメニューのコンセプトスニペット。

See the Pen
Navigation
by Vadim (@v_Bauer)
on CodePen.

目次に戻る

 

 

 

ローディングアニメーション

話題のニューモーフィズム・スタイルを利用したローディングアニメーション。立体的な影の付け方もポイント。

See the Pen
Neumorphic Preloader
by Jon Kantner (@jkantner)
on CodePen.

目次に戻る

 

 

 

Neumorphism Gradient Loader

ニューモーフィズムにグラデーションを追加することで、より奥行き感のある立体的なデザインに。

See the Pen
Neumorphism Gradient Loader
by samuel garcia (@sam_garcia2)
on CodePen.

目次に戻る

 

 

 

Balancing Moods

コロコロと転がるたびにキャラクターの表情が変化するアニメーション。

See the Pen
Balancing Moods
by Chris Gannon (@chrisgannon)
on CodePen.

目次に戻る

 

 

 

Animal Crossing Island Loader

プカプカと浮く小島を描いたローディングアニメーション。

See the Pen
Animal Crossing Island Loader
by Alex Trost (@a-trost)
on CodePen.

目次に戻る

 

 

 

ボタンエフェクト

Download button

ボタンをクリックするとローディング状況を知らせるプログレスバーが出現。

See the Pen
Download button
by Aaron Iker (@aaroniker)
on CodePen.

目次に戻る

 

 

 

Literal Radio Buttons

本物そっくりにCSSオンリーでスタイリングされたボタンデザイン。もちろんクリックすることも可能です。

See the Pen
Literal Radio Buttons
by Jon Kantner (@jkantner)
on CodePen.

目次に戻る

 

 

 

Creative Wave Button

ゆらゆると水面が揺れるようなCSSエフェクトを採用したボタンデザイン。

See the Pen
Creative Wave Button
by Oğuzhan Ağyar (@oguzhanagyar)
on CodePen.

目次に戻る

 

 

 

Paper plane button

クリックすると紙飛行機となって彼方へ飛んでいくアニメーションエフェクト。

See the Pen
Paper plane button
by Aaron Iker (@aaroniker)
on CodePen.

目次に戻る

 

 

 

Rainbow V2

クリックするとレインボーカラーに変化するボタンは、ニューモーフィズムを取り入れています。

See the Pen
Rainbow V2
by Chance Squires (@chancesq)
on CodePen.

目次に戻る

 

 

 

Darkness

ダーク版ニューモーフィズム・スタイルのボタンエフェクト。

See the Pen
Darkness
by Chance Squires (@chancesq)
on CodePen.

目次に戻る

 

 

 

ぼんやりと輝くネオンエフェクトをボタンデザインに実装。カラフルなスタイリングが特長。

See the Pen
Glowing buttons
by Pranjal Bhadu (@bhadupranjal)
on CodePen.

目次に戻る

 

 

 

GSAP Send Button Animation

ボタンクリックでロケットが発射され、確実に送信されたことをユーザーに伝えます。

See the Pen
GSAP Send Button Animation
by Shahid Shaikh (@shahidshaikhs)
on CodePen.

目次に戻る

 

 

 

Button squish animation

ぼよんとしたコミカルな動きは、控えめながらユーザーの注目を集めるテクニック。

See the Pen
Button squish animation
by Aaron Iker (@aaroniker)
on CodePen.

目次に戻る

 

 

 

3D button

ボタンホバーで立体的にイラストやアイコンなどのデザイン要素がポップアップ表示されるエフェクト。

See the Pen
3D button
by Robin Delaporte (@robin-dela)
on CodePen.

目次に戻る

 

 

 

鮮やかに光るラインが文字テキストを囲み、点灯するネオンライトエフェクト。

See the Pen
Button Neon (:hover fx)
by Shay (@Shay_Reichert)
on CodePen.

目次に戻る

 

 

 

Smash that “Like” button! w/ GSAP 😅

超人ハルクがボタンを破壊するスニペット。音が出ます、ご注意ください。

See the Pen
Smash that "Like" button! w/ GSAP 😅
by Jhey (@jh3y)
on CodePen.

目次に戻る

 

 

 

CSS Custom Radio Buttons

お好みでカスタマイズできるラジオボタン用スタイリングスニペット。

See the Pen
CSS Custom Radio Buttons
by Abubaker Saeed (@AbubakerSaeed)
on CodePen.

目次に戻る

 

 

 

CSSマジック

Painter

CSSのみでスタリングされたとは思えないほど、リアルな動きを表現したキャラクターデザイン。

See the Pen
Painter
by Ricardo Oliva Alonso (@ricardoolivaalonso)
on CodePen.

目次に戻る

 

 

 

3D First Person Art Gallery – No Javascript!

360度ぐるりと見渡すことができるスニペットで、JSは一切利用していません。

See the Pen
3D First Person Art Gallery – No Javascript!
by Ben Evans (@ivorjetski)
on CodePen.

目次に戻る

 

 

 

Freddie Mercury – HTML & CSS

HTML/CSSのみで再現されたフレディー・マーキュリー。

See the Pen
Freddie Mercury – HTML & CSS
by Ricardo Oliva Alonso (@ricardoolivaalonso)
on CodePen.

目次に戻る

 

 

 

Animal Crossing: Isabelle’s Day Off ☀️(Pure CSS)

どうぶつの森の世界観をCSSのみで表現したアニメーション作品。

See the Pen
Animal Crossing: Isabelle’s Day Off ☀️(Pure CSS)
by Tee Diang (@cybercountess)
on CodePen.

目次に戻る

 

 

 

Minecraft world animated in pure CSS

マインクラフトの世界をCSSだけで作成した作品。

See the Pen
Minecraft world animated in pure CSS
by Hai Le (@hailedev)
on CodePen.

目次に戻る

 

 

 

scssuper mario face

あの某有名キャラクターもCSSのみでデザイン、光と影の当たり方にも注目。

See the Pen
scssuper mario face
by Louise Flanagan (@louflan)
on CodePen.

目次に戻る

 

 

 

Only CSS: Fireworks Rush

CSSのみで表現できるリアルな花火エフェクト。

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

目次に戻る

 

 

 

One Div iPad Pro – Responsive

ひとつのDIV要素のみでスタイリングされたiPad Proは、レスポンシブによる表示にも対応しています。

See the Pen
One Div iPad Pro – Responsive
by Annie (@anniebombanie)
on CodePen.

目次に戻る

 

 

 

Pure CSS halftone portrait from .jpg source

JPEG画像をCSSのみでスタリングした、ハーフトーン風エフェクトに仕上げることができるテクニック。

See the Pen
Pure CSS halftone portrait from .jpg source
by Ana Tudor (@thebabydino)
on CodePen.

目次に戻る

 

 

 

Folding panorama animation

パノラマ写真を折りたたんだようなCSSアニメーションに注目のスニペット。

See the Pen
Folding panorama animation
by Bennett Feely (@bennettfeely)
on CodePen.

目次に戻る

 

 

ゲーム系

CYBERTYPE

目標に設定したタイピング速度にチャレンジする、サイバースタイルのタイピング練習ツールで、中毒性たっぷり。

See the Pen
CYBERTYPE
by Manan Tank (@MananTank)
on CodePen.

目次に戻る

 

 

 

vue rocket 🚀

画面上に表示されるロケットをキャッチする単純なゲームですが、難易度高め。

See the Pen
vue rocket 🚀
by Pepita K. (@PepitaK)
on CodePen.

目次に戻る

 

 

 

TicTacToe v.3.5 In ReactJS

誰もが一度はしたことがある○×ゲームを再現、ハードモードのコンピュータ、めちゃくちゃ早いです。

See the Pen
TicTacToe v.3.5 In ReactJS
by Takane Ichinose (@takaneichinose)
on CodePen.

目次に戻る

 

 

 

Avoid Asteroids Game

上から落ちてくる隕石を避けながら滞在時間でスコアを競うゲーム。

See the Pen
Avoid Asteroids Game
by Sagee Conway (@saconway)
on CodePen.

目次に戻る

 

 

 

Click Speed Test ⚡

クリックの速さを測定できるツール。時間とクリック数をシンプルに表示してくれます。

See the Pen
Click Speed Test ⚡
by Luciano Felix (@FelixLuciano)
on CodePen.

目次に戻る