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
![box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company](https://cdn-ak-scissors.b.st-hatena.com/image/square/3ea25c6c551e67cc0e971f92f8aa13492359b4ee/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEhf_Ng9wKrhAWPnZ4i7RJ32BCC4qv7oJ7gv88ycEWLyM7wLH6x6r6gBfkyTWGiMTnDMz_4_IraklOJb8KdoMiLE2hkwUH0cBK9supxSq61XrD4Ogsl8rPSle1qASKcIGhZ5KRZM_k4jTpHj%2Fw1200-h630-p-k-no-nu%2Fpixel-art.png)