コリスさんのborder-radiusで落書き風にデザインする方法について、メモを書いてみました

border-radius-technic
Update

コリスさんの今日の記事の、border-radiusを使ったテクニックがとっても素敵だったのですが、いつも使う角丸の書き方とは違っていて難しかったです。ちょっと調べてメモを書いてみました!

参考にしたコリスさんの記事はこちらです。

いつものborder-radiusの使い方をおさらい

ふだん使うことが多い角丸の作り方をおさらいしてみます。

まず、div要素に背景色を指定しただけの四角です(コードが長くなるので、paddingとかは省略しますね)。

SnapCrab NoName 2013 4 19 18 26 3 No 00 300x204

HTML

<div class="ex-1">Border-Radius:0;</div>

CSS

.ex-1{
background-color:lightcoral;
color: white;
}

角丸にするために、CSSにborder-radius:6px;って書き加えます。

SnapCrab NoName 2013 4 19 18 26 19 No 00 300x208
.ex-2{
background-color:lightcoral;
color: white;
border-radius:6px;
}

ボーダーで囲ったりして使うのもかわいいですよね!

SnapCrab NoName 2013 4 19 18 26 38 No 00 300x213
.ex-3{
background-color: white;
color: lightcoral;
border: 1px dashed dimgray;
border-radius:6px;
}

そもそもborder-radiusって何なんだろう?

コリスさんのサンプルには、スラッシュ(/)を使ったたくさんの値が書かれています。四隅を均等に丸くする以外の使い方なんてこれまで考えたこともなかったので、この書き方がよくわからなかったのです…。

調べてみたところ、先ほどのborder-radius:6px;って、ほんとうは8箇所の値をまとめて書いているらしいということがわかりました。

説明が難しいので、それぞれの6pxがどこをあらわしているのか、下の色付きのコードと画像をごらんください。

border-radius:6px 6px 6px 6px / 6px 6px 6px 6px;
SnapCrab NoName 2013 4 19 17 34 23 No 00 600x394

こんなふうに、要素の四隅丸みの半径を書いていたようです。

  • スラッシュより前は、時計回りに 左上右上右下左下横(水平方向)の半径を指定。
  • スラッシュより後は、時計回りに 左上右上右下左下縦(垂直方向)の半径を指定。

ただの角丸の場合は8箇所とも同じ値だから、まとめて書いていたのですね。

落書き風デザインにチャレンジ!

それでは、落書き風デザインのコードをかいてみます!border-radiusの値は、コリスさんのサンプルと同じです。

まず、div要素をピンクのボーダーで囲います。

SnapCrab NoName 2013 4 19 18 27 3 No 00 300x159
.ex-4{
background-color: white;
color: dimgray;
border:5px solid lightcoral;
}

コリスさんのサンプルと同じ値で、border-radiusを書き加えたものです。

SnapCrab NoName 2013 4 19 18 10 3 No 00 600x427
.ex-5{
background-color: white;
color: dimgray;
border:5px solid lightcoral;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

先ほどのように、対応するところを確認してみます。

border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;
SnapCrab NoName 2013 4 19 18 10 3 No 00 21 600x427

こんなふうに、ほそながーーい楕円の半径をかいてデザインしていたんですね。ようやくわかりました。

このテクニック、センスよく使ったらすっごくかっこいいものが作れそうですね!