なかなかかわええじゃろ。

ドットで作ったのは映画「ピクセル」でおなじみオレンジのこいつだぞ！！！

（借りた画像のサイトURL:http://neteta.hateblo.jp/entry/2015/10/03/153026）
めっちゃかわいいのに認知度が低くて私はかなしい。
キューバートというゲームのキャラクター、キューバートだよ。飼いたい。

そもそもbox-shadowとはなんぞや

box-shadowは、その名の通り要素に影をつけるためのもので、
本来はボタンとかボックスとかに影をつけるときに使うものだぞ！

box-shadow: 10px 10px 10px 10px #ccc;

こんな感じで、
1番目の記述で左右の向き
2番目の記述で上下の向き
3番目の記述でぼかしの指定
4番目の記述で広がりの距離
5番目の記述で影の色

を指定することができるぞ。

【参考】box-shadow－CSS3リファレンス

親切なひとがジェネレーターを作ってくれたりしているので、
よくわからんぞって人はこれをぐりぐり動かしてみると良いと思うのだ。
CSS3 box-shadowとborder-radiusジェネレーター

ドット絵はどうやってつくるのだ？

ドット絵を打つときは、ぼかしとか広がりとかはいらんので、今回は

box-shadow: 10px 10px #ccc;

こんな感じで左右の向き、上下の向き、影の色のみを指定することになるよ！！！

元の要素を作るぞい

ドット絵を作るには、まずbox-shadowをつけるための元の要素を作る必要があるぞい。

  <div class="qbert"></div>

.qbert {
    width: 10px;
    height: 10px;
}

この部分が元の要素を作ってる記述だぞ！
とりま透明な10pxかける10pxの四角を作ってるのだな。

別に1pxかける1pxとかでもいいと思うんだが、
なんとなくドット打つとき見辛そうだったので10pxの四角にしたぞい。

ほんでここに、たとえばbox-shadow: 10px 10px #C7DB30;とかやると

こうなるんじゃ。

で、つぎにbox-shadow: 10px 10px #C7DB30, 20px 20px #4146C6;ってやると、

こうなるんじゃよ！

・・・もうわかったかの？？

つまりひたすらこうやってpxを指定してドットを打っていくというわけじゃよ！！！！

とりあえず元のドット絵書いた

いきなりドット絵を打てる才能はないので、土台になるドット絵をXDで描いたぞ。
描きながら絶対XDでやる事じゃないと思ったぞ。

（ぴょんぴょんさせたかったので二種類のドット絵を作成）

ドットを打つ前に

今回使う色はwhiteとblackの他に3色あるんだが、
これをいちいち#EB6101、#AF4A02、#893A02…ってやってくのは気が狂いそうだったので、変数にして簡単に記載できるようにしたぞ。

SCSSで書いている人ならこうした方が絶対的に楽チンだのう。

つまり、ドットを打つ前に

$orange: #EB6101;
$dark-orange: #AF4A02;
$brown: #893A02;

こうやって指定してしまえば、

box-shadow:
   0px 10px $dark-orange,
   0px 20px $orange,
   0px 30px $orange,   
   0px 40px $orange,   
   0px 50px $orange,   
   0px 60px $orange,
   0px 70px $dark-orange,
   0px 80px white,
   0px 90px white

これは

box-shadow:
   0px 10px #AF4A02,
   0px 20px #eb6101,
   0px 30px #eb6101,   
   0px 40px #eb6101,   
   0px 50px #eb6101,   
   0px 60px #eb6101,
   0px 70px #AF4A02,
   0px 80px white,
   0px 90px white

こうなるってわけだな。便利やね。

ドットを打つぞい！

実際にドットを打っていくぞい。

ドット打つのが初めてだったのでだいぶクレイジーな位置を（0,0）にしてしまったんだが、
書き始めてからマジでここはやめた方がいいと思った。
座標のX軸にもY軸にもマイナスが発生してめんどくさかったぞい。。

これからドットを打つ君たちは絶対左上か右上を(0,0)に定めて、上から縦にドットを打って行くべき。約束だ・・・

あと、(0,0)にはドットを打てないことにもあとから気が付いた。えへ・・・
目を凝らして見てもらうと、こいつがジャンプした瞬間の白目の赤い部分、灰色になってるぞ・・・。

ちくしょうめ。

ドット絵を@keyframesで飛ばすぞ

貼り付けたCodePenを見てもらうとわかると思うんだが、
打ったドット絵は@keyframesの中に入っていて、.qbertの中には書いてないんじゃ。

これは@keyframesでアニメーションさせてbox-shadowを表示させているからだぞ！

@keyframesの指定はこんな感じ。
飛ぶ前と飛んだ後のドット絵（box-shadow）をそれぞれぶちこんでるぞい。

@keyframes jump {
  0%, 24%, 76%, 100% {
    box-shadow: //飛ぶ前のキューバート。実際の記述は長すぎるのでCodePen参照 
  }
  25%, 75% {
    box-shadow: //飛んでるキューバート。実際の記述はやっぱり長すぎるのでCodePen参照
  }
}

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる
わたしはこの人の記事を参考にキューバートを飛ばしたぞ。
この人はドットを打つためのジェネレーター的なものを作ってたりしてマジ半端なかったぞい。

0%, 24%, 76%, 100%と25%, 75%っていう細かい指定が最初よくわかんなかったんだが、
こうやって細かく指定することで、飛ぶ前から飛んだ後のドット絵に一瞬で変化させるための書き方っぽいのう。

（たぶん、24%→25%の間で飛ぶ前から飛んでるドットに、75%→76%の間で飛んでるドットから飛ぶ前のドットに変えてるぽい）

これで飛んでるキューバートは完成だぞ！！！

でかいのでちっこくする

このままだとでかすぎるので、ここでまるごと縮小するぞ。
縮小するのは

transform: scale(0.15,0.15);

この1行を.qbertに入れるでOK。これで実際の大きさの0.15倍に縮小されたぞ。

縮小すると一気にかわいいドット絵っぽくなったな・・・

やった〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜✌︎('ω'✌︎ )

おまけのふきだし

キューバートはよくわかんない言葉を喋るキャラクターなので、
ついでに吹き出しをつけてゆらゆらさせてみたぞい！

ふきだしのHTMLはこんな感じ。

  <div class="fukidashi">
    <div class="fukidashi__inner">
      <p class="fukidashi__comment">&!?@#</p>
    </div>
  </div>

.fukidashiは吹き出しをposition:absoluteさせるためのクラスで、
.fukidashi__innerは白い吹き出しの楕円と右下の三角を作ってるクラス、
.fukidashi__commentは喋ってる言葉を指定してるクラスだぞ。

で、SCSSはこう。

.fukidashi{
  position:absolute;
  top: 30px;
  left: 50px;
  &__inner{
    //吹き出しの白い部分
    position:relative;
    width:100px;
    height:60px;
    border-radius:50px / 30px;//楕円はwidth÷2,height÷2のborder-radiusを指定
    background:#fff;
    animation:yurayura 0.8s infinite;//下にある@keyframes yurayuraを指定
     &:before{
      //吹き出しの右下の三角の部分
      content: "";
      position: absolute;
      bottom: -1px;
      right: -11px;
      margin-top: -15px;
      border: 8px solid transparent;
      border-left: 15px solid #fff;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      }
  }
  &__comment{
    //吹き出しの中のセリフ
    position:absolute;
    top: 0;
    left: 12px;
    font-family:sans-serif;
    font-size:15px;
    font-weight:bold;
  }
}

@keyframes yurayura {
  0%,100%{ transform: rotate(2deg); }//0%と100%は2度回転
  50%{ transform: rotate(-2deg); }//50%は-2度回転
}

ゆらゆらさせるのは@keyframesでyurayuraアニメーションを作って、
そいつを.fukidashi__innerに指定することで実現しているってわけだぞ。

これでゆらゆら吹き出しの完成じゃ！！！！

やってみて

しんどかったけど自分で打ったドット絵にはそれなりの愛着が湧くことがわかったぞ。
あと動くとそれなりにテンションがあがるぞ。

みんなもレッツドット絵！！！