KOENJP

CSSアートギャラリー

LAB · PURE CSS ART

画像を使わずHTMLとCSSだけで描いたイラストとアニメーション12点を展示。作品を大きく表示して、HTML・CSS・そのまま使える単一ファイルのコードをコピーできます。

EXHIBITION · 10 WORKS

画像ファイルを使わず、HTMLとCSSだけで描いた絵

グラデーション・border-radius・clip-path・keyframesで作りました。作品をクリックすると大きく表示して、コードをコピーできます。

01 / 10

No.01

作品
HOW TO

使い方

  1. CSSだけで描いた12点の作品を見て、上の「すべて」「動き」「静物」で絞り込めます。
  2. 作品をクリックすると大きく表示され、HTML・CSS・単一ファイルのタブでコードを読めます。
  3. コードをコピーして自分のページに貼り付ければ同じ絵になります。単一ファイルのタブは.htmlとして保存すればそのまま開けます。
  4. ←→ボタンや矢印キーで作品を移動でき、動きが気になるときは上の「アニメーション停止」を押してください。
PAIRS WELL WITH

あわせて使いたいツール

FAQ

よくある質問

本当に画像なしでCSSだけで描いていますか？

はい。各作品はいくつかのdivとCSS（グラデーション、border-radius、clip-path、box-shadow、mask、filter、keyframes）だけでできています。JavaScriptはギャラリー部分（絞り込み・コード表示・コピー）にだけ使っています。

作品の大きさを変えるには？

すべての寸法がem単位なので、いちばん外側の要素のfont-sizeを変えるだけです。標準の16pxで320×320px、8pxで160px、24pxで480pxになります。

コピーしたコードは別のページでも同じに見えますか？

クラス名に作品ごとの接頭辞（.sunset__sunなど）を付けているので、ほかのスタイルとほとんどぶつかりません。最新のChrome・Edge・Safari・Firefox向けで、古いブラウザではmaskや個別のtranslateプロパティを使った作品の表示が変わることがあります。

アニメーションで電池を消耗しませんか？

画面外にスクロールした作品はアニメーションが止まり、「アニメーション停止」ボタンですべて止められます。端末で「動きを減らす」がオンの場合は、停止した状態で開きます。