自分で描いた絵を手書きでcss化する遊び

世の中にはcssで絵を描く人がいます。手法も色々で、div1つにbox-shadowのみであらゆる絵を描くようなものから、ドット絵やその他様々です。
自分も急にやりたくなったのでチャレンジしました。
今回はdivはそれなりに書く感じでわりと簡単そうなイラストを描いていきます。

作業環境

• CodePenを使用してでhamlとscssで書いています。環境構築不要で、テンプレートエンジンやCSSプリプロセッサが使えます
• hamlは慣れからのチョイスですが、htmlのテンプレートエンジンを考えると普通はPugになるでしょうか。divタグしか使用していないので、hamlを知らずとも雰囲気で見ることができると思います
• scssはStylusなどもっと簡素に書けるものもありますが、こちらも慣れです…

うさぎ

See the Pen うさぎさん by kotomi (@yuro1600) on CodePen.

アイコンのイラストを元にしています。

使ったcssとwebツール

border-radius

角丸や楕円を作るcssですが、最大8箇所値を指定できるのでわりとあらゆる丸みを帯びた形を作成できます。

勘で作る場合や、どこに何の値を入れるのか忘れるうちはこういったツールを使うと自由な形を作る足掛かりになると思います。

顔や耳などの楕円を作っています。

.scss

&__face {
    bottom: 0;
    width: 200px;
    height: 120px;
    background-color: $white;
    border-radius: 68px 57px 90px 90px / 114px 114px 80px 60px;

transform

このうさぎを書くときは複雑なことは何もしていないので、残りは角度を変えたくらいです

.scss

&__ear {
    top: 10px;
    width: 60px;
    height: 130px;
    background-color: $white;
    box-shadow: 5px 0 0 6px $brown, -2px -5px 0 6px $brown;
    
    &--right {
      right: 14px;
      border-radius: 60px 40px 10px 10px / 90px 140px 80px 80px;
      transform:rotate(10deg)
    }
    &--left {
      left: 20px;
      border-radius: 60px 60px 10px 10px / 140px 90px 80px 80px;
      transform:rotate(-1deg);
    }
  }

女の子

うさぎで何となくどういうことなのかわかったので、ここから実践編です。
うまくできなかった部分も多いので、これからも修行します…。

See the Pen 寒そう by kotomi (@yuro1600) on CodePen.

ラフ

流石に無からは描けないので、完成イメージのイラストを用意しました。
おそらくここできっちり寸法を決めておくとcssに起こしていく作業も簡単になると思われるのですが、それならcssでやらなくても良いのでは？？？と思ってしまうことをやめられなかったのでこの状態でいきます。いきなり参考にならないですね。

背景

まずは夜景を用意します。

月は擬似要素とbox-shadowで作っています。今回は背景と同じ色で誤魔化していますが、clip-pathで切り抜く感じにも作れそうです。

.scss

&__moon {
      width: 40px;
      height: 40px;
      background-color: $sora;
      border-radius: 100%;
      box-shadow: 0 16px 0 5px $yellow, 0 16px 4px 6px rgba(255, 230, 126, 0.6),
        inset 0 0 4px 1px rgba(255, 230, 126, 0.6);
      transform: rotate(60deg);
      top: 10px;
      left: 40px;
      &::before {
        content: "";
        width: 41px;
        height: 40px;
        background-color: $sora;
        border-radius: 100%;
        top: -5px;
        left: 0;
      }
    }

グラデーション

各所にグラデーションを使用していますが、これもwebツールが色々あるので好みで使うと良いと思います。
ちなみに色相が離れた色でグラデーションを作りたいとき、2色の指定だと中間が濁ってしまいます。その場合中間の色を指定してあげると濁らない色にできます。

重ね合わせの要素

擬似要素とbox-shadowで重なりを作っています。
box-shadowは元の要素を大きさや位置を変えて複製するようなものですね。

.scss

&__eye {
      width: 20px;
      height: 30px;
      background: linear-gradient(
        0deg,
        rgba(204, 99, 52, 1) 0%,
        rgba(83, 47, 22, 1) 100%
      );
      border-radius: 40% 60% 60% 40% / 50% 50% 30% 30%;

      &::before {
        content: "";
        width: 10px;
        height: 10px;
        background: radial-gradient(
          circle,
          rgba(255, 237, 232, 1) 45%,
          rgba(255, 255, 255, 0) 100%
        );
        border-radius: 50% 40% / 60% 30%;
        top: 0;
        left: 1px;
        box-shadow: 4px 17px 0px 2px rgba(240, 155, 58, 0.3);
      }
      &::after {
        content: "";
        width: 5px;
        height: 6px;
        background-color: $hair2;
        border-radius: 100%;
        top: 12px;
        left: 8px;
      }

clip-path

髪の毛はclip-pathで切り抜いて毛先の表現を作りました。画像などの要素を任意の形や指定のパスで切り抜くプロパティです。

clip-pathもwebツールで簡単に使えます。

clip-pathで指定する頂点に対応した色がついているので、表示を見ながら対応箇所を微調整するのも容易です。

こんな感じで諸々行い冒頭のイラストを作成しました！

まとめ

• 丁寧に下絵を用意したり寸法を見たりなどの準備はあった方がいいです（私はすべて見切り発車でした）
• 普段の業務でちょっとした装飾要素ならcssで作れるかも！という気持ちになれます
• 次はこれをアニメーションしたいです
• どちらかというと普通に絵がうまくなりたいです

参考にしたページやツール