Qiita初投稿になります。よろしくお願いします。
お手柔らかに...( ;∀;)
CSSだけでお絵描き
CSSだけで絵を描いている方をちらほら見かけまして
え、おもしろ、私もやりたいと思い初挑戦してみました。
この記事は記録用として書いています。タメになることはないかも...
SCSSで書いてます。
CodePen
HTMLとかCSSとかJSをウェブ上で書けるサービス。
書いたコードがすぐにプレビュー画面に反映されるのでとても便利です。
https://codepen.io/
CodePenを触ったことがなかったので、今回はこの子を使って挑戦しました。
今後もお世話になりそう。
ということで、アンパンマン
いざ！お絵描き！といきたいところですが、お題決めにいつも悩みます。
目の前にあんぱんがあったのでアンパンマンにしました。（Chrome推奨です）
See the Pen CSS Anpanman by Deren (@deren2525) on CodePen.
やってみて、所感
アンパンマンの眉毛とかほっぺの線とか、というかどのパーツもゴリ押し感がすごいです。
曲線の書き方がわからず、JS使えばいけるよって記事があったのですがJSは今回使いたくないという謎のこだわりがありました（）
その結果ゴリ押しな部分がちらほらありますが、そもそもCSSだけで絵を描く時点でゴリ押しになりますよね。
CSSだけで曲線を書ける方法がわからなかったのですが、もし知っている方いらっしゃいましたら教えていただきたいです。
ゴリ押しでもいけますが、まだ楽な方法があるなら楽な方を使いたいですよね。
コードの中身、もっと簡潔にできたところあるんだろうなあと思っています。
どこかでリファクタリングしていきたいです。
またCSSでお絵描き挑戦したいです。
アニメーションを加えたらもっとおもしろそうですね。