box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company

CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについて ドット絵を描くためには、CSSのbox-shadowプロパティを使う。 そもそもbox-shadowプロパティは、要素にドロップシャドウ効果（影をつける）を与えるのが本来の使い方なので、まずは基本的な使い方からまとめる。 いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad

[bc_rikko]

CSSだけでドット絵を描く方法書きました！

[poponponpon]

この力業で動いてくれるブラウザ様がすごい

[mricopp]

CSS芸人すごい

[masapon49]

他にも役立ちそう

[oplika]

す、すごい。すごいけどそういうツールがなきゃ絶対作る気は起きなさそうだ…

[manaten]

先行研究 https://xem.github.io/miniShadowArt/

[fashi]

Tableタグで描くのと変わらないがアニメーションが簡単なのは良いね

[t2wave]

box-shadowの影をずらしてドット絵を描く

[shishikaba]

変態テクニック過ぎて素敵すぎる。確かにこの方法ならドット絵行けちゃうから凄い。

[mami-hate]

これもすごいな。時間見つけてやってみよっと

[mas-higa]

平成最後の変態CSS

[Wacky]

“ドット絵を描くためには、CSSのbox-shadowプロパティを使う”

[kyompi]

この執念どこから来てるの・・・いやすごい。

[ttkazuma]

"box-shadowを使って" "CSSだけで" "ドット絵" この３文節で変態度合いが分かる。好き。

[ryo_ryoo_ryooo]

すごい頑張ってる。

[primedesignworks]

なんという職人技

[Cherenkov]

text-shadowでモナリザ描いたことあった http://d.hatena.ne.jp/Cherenkov/touch/20100709/monalisa_shadow

[teruroom]

影はCSSでアニメーション出来るんだね。初めて知った。

[cartman0]

canvas上に描画した方が早そうだけどどうなんだろう

[sonykichi]

すご！

[kathew]

アホだ‥（褒めている）

[idr_zz]

なんとCSSドット絵職人！自分以外にもいた！私はimg要素でやったけどbox-shadowを使う方法 box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company

[psfactory]

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company

[Falky]

どういうモチベーションなんだ！

[GoGo5520181022]

なんか分からんけどスゴイと思った。

[rainbow_doll]

ツールがなくて自作する時間もなくてAseprite買ったけど、買う前に知りたかった

[n314]

斜めの線が引けたらborderを駆使した装飾の代わりになったかもしれない。

[yarumato]

“Tableタグで描くのと変わらないがアニメーションが簡単なのは良いね”

[kvx]

ふふふ

[masahiko_of_joytoy]

すごい

[suquiya0]

メモ。