CSSでドット絵を描いてみた(はちゅねミク)

CSSのbox-shadowプロパティではちゅねミクのドット絵を描いてみました。

はちゅねミクは袴っ娘推進委員会の¢お小夜さんが2007年10月に作られたアニメーションgifの1フレーム目をトレースしたものです。

等倍サイズ

こちらが、1ドット1ピクセルの等倍サイズです。

10倍サイズ

こちらは、1ドット10ピクセルの10倍サイズです。トレース時にはこのサイズで作業していました。

1ドットずつ慎重にbox-shadowを設定していたつもりだったのですが、作業後に元画像を拡大した画像と重ねあわせてみると、7~8マスほど色の違うところが・・・・・・。全て修正済みです。

CSSについて

はちゅねミクの為のCSSは全部で9400行ほどになりましたが、ドットの修正など後々の事を考えてか考えずか、0em 0em transparentのように透明マスの値まで書いているからです。 透明マスの値を書かなければ半分以下の行数になるでしょう。

1ドット1ピクセルでは非常に作業し辛いですから、font-size: 10px;line-height: 1;といったスタイルを指定し、キャンバスのサイズもwidth: 32em;のように文字数で指定すると作業しやすいです。 そして、ドットを打つ時に36em 2em #ba0054のようにemで指定しておけば、最後に単位をpxに一括置換するだけで、等倍サイズになおせます。

スペシャルサンクス

元はアニメーションgifになっており動きも非常に可愛いので、興味がある方はサイトに行ってみてください。

袴っ娘推進委員会

最後に

このようなドット絵をCSSで描く方法を知りたい方は、CSSでドット絵を描く方法をご確認ください。

box-shadowプロパティは、単純な影(もう流行らないという意)を付けるプロパティだと思い込んでいませんか?

ドット絵を描く方法を解説しているページですが、ぼかしのかかっていない影が使えることを知るだけでも、デザインの幅が広がることでしょう。