CSSわぷーを描いた時にborder-radiusとか、:afterとか:beforeなどを普段使わないような使い方をしてたら割と理解が深まったので、振り返ってみます。

こちらのわぷー、まばたきも含めてCSSだけで描いてます。

以下がよく使った擬似クラスやCSSプロパティです。
上の3つさえあればCSSでイラスト描けます。

  1. :after / :before
  2. border-radius
  3. transform: rotate
  4. box-shadow(けっきょく使わなかったけど)
  5. animation

ボタンやタイトルのアイコンをCSSで作ることもできるようになると思います。

1. :after / :before

:beforeと:afterは要素の前後に画像や文字などを追加することができます。

例えば、リストの左に”◆”を項目の印として挿入したい場合。

<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

liタグに対して、以下のようにかきます。

li:before {
  content: "◆";
}

この”◆”はテキストなのでフォントサイズや色の調整もできます。

li:before {
  content: "◆";
  font-size: 10px;
  vertical-align: text-top;
  color: #1E8D96;
}

CSSでイラストを描く時はこの:before、:afterを多用しました。

これを使えば一つのタグで3種類の図形を描くことができます

<div class="canvas">
  <div class="graphic"></div>
</div>

CSSは:before、:afterを使ってこんな感じ。

.canvas {
  position: relative;
  width: 300px;
}
.graphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background-color: #1E8D96;
}
.graphic:before {
  content: "";
  position: absolute;
  top: 0;
  left: 90px;
  width: 80px;
  height: 80px;
  background-color: #E7BA21;
  border-radius: 50%;
}
.graphic:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 200px;
  width: 60px;
  height: 60px;
  background-color: #501A32;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}

結果こんな感じになります。

デモサイト

これを応用して、いろんな図形を重ねることで、一つのタグでいろんな形を作れます。

:before、:afterは使わなくてもCSSのイラストは描けますが、使ったほうがタグが少なくてスッキリします。

2. border-radius

CSSでイラストを描く時の要、border-radius。

角丸をつける時によく使われます。

<div class="kadomaru"></div>
<div class="circle"></div>

また、50%指定で円形になることもよく知られていると思います。

.kadomaru {
  width: 300px;
  height: 300px;
  border-radius: 10px;
  background-color: #1570A6;
}
.enkei {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #509B49;
}

border-radiusの指定の仕方はいろいろな指定の仕方があります。

各4コーナーをそれぞれ指定

.kadomaru {
  /* 左上 */
  border-top-left-radius: 10px;
  /* 右上 */
  border-top-right-radius: 10px;
  /* 左下 */
  border-bottom-left-radius: 10px;
  /* 右下 */
  border-bottom-right-radius: 10px;
}

ショートハンドで一括指定もできます。

border-radius: 左上 右上 右下 左下

.kadomaru {
  border-radius: 10px 5px 20px 30px;
}

さらに、border-radiusはスラッシュで区切ることで4コーナーそれぞれの水平方向、垂直方向の半径を指定することができます。

スラッシュの左側は水平方向、右側が垂直方向です。
それぞれ左上、右上、右下、左下の順番です。

.kadomaru {
  border-radius: /* 水平方向 */ 25px 10px 30px 25px / /* 垂直方向 */ 40px 25px 30px 25px;
}

イメージはこんな感じ。

CSSでイラストを描く時はこの水平方向、垂直方向のborder-radius指定をかなり使います。

このborder-radiusの指定の仕方と先ほどの:before / :afterを知っていれば、CSSでイラストを描くことに限らず、ボタンや見出しのデザインをできるようになると思います。

デモサイト

ちなみに、border-radiusはベンダープレフィックスはもういらないと思います。

各ブラウザ最新バージョン、IEでは9以上で対応しています。

3. transform: rotate

1と2に加えて、このtransform: rotateを使えば、かなりCSSの表現方法の幅が広がります。

transform: rotateは回転です。

1の:before / :afterのデモサイトにあった、菱形の図形は資格をtransform: rotateで回転させて作っています。

1.2で作った図形を回転させることで、また違う図形を作ることができます。

指定の仕方はこちら

.kaiten {
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}

数字degは回転の角度です。
数字を変更してして調整してみてください。

上記の例は2Dの回転ですが、3Dの回転もできます。

Xをつけると水平方向(いわゆるx軸)を軸に回転、Yをつけると垂直方向(いわゆるy軸)を軸に回転します。

transform: rotateX(45deg);
transform: rotateY(45deg);

他にも、z軸やx,y,z軸それぞれ指定する方法もありますが、CSSでイラスト描く時は使う必要はなさそうなので省きます。

4. box-shadow

要素に影をつけることができるbox-shadow。

このブログでも写真や画像にbox-shadowを指定して、少し見栄えをよくしています。

.shadow1 {
  width: 100px;
  height: 100px;
  background-color: #7FBCAD;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

影をつけることで立体感を出してくれるbox-shadow。
CSSでイラストを描くのにどこが使えるの?と思いますが、これも意外と使えます。

shadowの指定の仕方はこうなっています。

.shadow {
  box-shadow: /* 水平方向の距離 */  /* 垂直方向の距離 */ /* ぼかしの距離 */ /* 広がり距離 */ /* 色の指定 */;
}

この水平方向と垂直方向の距離を思いっきりずらして、ぼかしを0にすることで同じ図形を複製できます。
以下の記述では円形を複製しています。もちろんrgbaを調整すれば色も変えられます。

.shadow2 {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: #7FBCAD;
  box-shadow: 50px 50px 0px rgba(0,0,0,1);
}

あとbox-shadowはカンマ(,)区切りで何個も追加できます。

.shadow2 {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: #7FBCAD;
  box-shadow: 50px 50px 0px rgba(0,0,0,1),
              100px 100px 0px rgba(255,0,0,1),
              150px 150px 0px rgba(0,255,0,1);
}

CSSわぷーを描く時は使いませんでしたが、同じ図形を複製する時に使えそうです。

デモサイト

ここまで擬似クラスと3つのプロパティを紹介しましたが、以上でCSSでイラストを描くことができると思います。

また、イラストに限らずボタンのスタイルやタイトルのちょっとしたアイコンも作れます。

ただ、イラストの場合静止画だと面白くないのでCSSでアニメーションをつけてみます。

5. animation

CSSわぷーはanimationでまばたきさせています。

例えば、animationはこんな感じです。
円を上下に動かしてみます。

.canvas {
  width: 300px;
  height: 300px;
  position: relative;
}
.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #A1B91D;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -15px;
  -webkit-animation: bound infinite 3s;
  animation: bound infinite 3s;
}

.ballの最後のanimateがアニメーション部分です。

infiniteを指定するとアニメーションが繰り返されます。
3sは3秒でアニメーションをすると指定してます。

boundはアニメーションイベント名です。

アニメーション自体はkeyframeで指定します。

keyframesの後にアニメーションイベント名を指定し、0%が開始時、100%が終了時のスタイルです。

@-webkit-keyframes bound {
  0%{
    transform: translateX(0);
  }
  50%{
    transform: translateY(300px);
  }
  100%{
    transform: translateY(0);
  }
}
@keyframes bound {
  0%{
    transform: translateX(0);
  }
  50%{
    transform: translateY(300px);
  }
  100%{
    transform: translateY(0);
  }
}

0%で0位置、50%で300px、100%で再び0位置にしているので円形が上下に動きます。

デモサイト

%はanimationで指定した時間内の地点になります。
つまりanimationで3秒と指定した場合、50%はアニメーション開始から1.5秒後です。

この%を細かく指定するといろんな動きをつけられます。
このボールの上下アニメーションも頑張れば、本当にボールがバウンドしてるみたいにへこませたりできるはず。

CSSわぷーでは1回目はまばたき1回、1回目はパチパチとまばたき2回するようにしています。

さいごに

CSSで手の込んだイラストを描こうと思うとかなり根気がいりますが、
よくあるCSSだけで表現しているボタンやタイトル、矢印など、なんとなくコピペで使っていたスタイルの仕組みが分かるようになります。

簡単なイラストから挑戦してみてはどうでしょう??

Tweet
このエントリーをはてなブックマークに追加
Pocket