CSSで雪だるまを描いた思い出 - ディープブルーデー

CodeIQは、出題者に解答を送ったらフィードバックがもらえるシステムの頃がドキドキ感があって良かったなあ。CSSで雪だるま描いて、なんて問題は自動採点じゃできないし。ショートコーディング系もどれも楽しかった。転職サービスとしてはあれだったけども
— y azshe ( あづしぇ ) (@tsu8River) 2018年4月9日

ツイートの「CSSで雪だるま描いて」は2014年頃にCodeIQで出題された問題で、要約すると「HTML5のdiv要素1つとCSS3だけを使って雪だるまを描いてください」というものでした。CSSで絵を描く世界なんて当時は知らなかったのでCSSの解説サイト首っぴきで興味深く挑戦したのを覚えています。当時のCSSコードが残ってたので、このブログのデザインCSSに埋め込んで、以下にそのときに描いた雪だるまを再現させてみました(ブラウザやスマホ等の環境の違いによっては見れないかもしれません)。htmlファイルとして単独で実行できるようにHTMLコードも載せておきます。

<!DOCTYPE html>
<head>
  <meta charset="utf-8"/>
  <title>snowman</title>
  <style>
    /* body and mouth */
    .snowman {
      display : block; 
      position: relative;
      left    :   0px;
      top     : 100px;
      margin  :   0px auto;
      width   :  22px;
      height  :  12px;
      border-radius    : 50%;
      background-color : red;
      box-shadow: 0px -20px 10px  50px white,
                            0px -20px  0px  51px gray,
                            0px  90px 10px  70px white,
                            0px  90px  0px  71px gray;
    }
    /* nose */
    .snowman::before {
      display : block; 
      position: relative;
      content : "";
      left  : -25px;
      top   : -25px;
      margin:   0px auto;
      width :  30px;
      height:  15px;
      border-top-left-radius    :20px 10px;
      border-top-right-radius   : 5px  5px;
      border-bottom-left-radius :20px 10px;
      border-bottom-right-radius: 5px  5px;
      background-color:red;
      box-shadow: 0px 0px 11px -1px black inset;
      transform: rotate(20deg);
    } 
    /* eyes and mouth */
    .snowman::after {
      display : block; 
      position: relative;
      content: "";
      left  :  0px;
      top   :  0px;
      margin:  0px auto;
      width : 15px;
      height: 15px;
      border-radius: 50%; 
      background-color:white;
      box-shadow: -20px -60px 1px  0px black,
                             20px -45px 1px  0px black,
                             -3px -20px 1px -1px white,
                             2px -20px 1px -1px white;     
    }

  </style>
</head>
<body>
  <div class="snowman"></div>
</body>
</html>