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

border-radius-technic
Update

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

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

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

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

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

SnapCrab_NoName_2013-4-19_18-26-3_No-00

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

.ex-2{
background-color:lightcoral;
color: white;
border-radius:6px;
}

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

SnapCrab_NoName_2013-4-19_18-26-38_No-00

.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

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

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

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

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

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

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

SnapCrab_NoName_2013-4-19_18-27-3_No-00

.ex-4{
background-color: white;
color: dimgray;
border:5px solid lightcoral;
}

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

SnapCrab_NoName_2013-4-19_18-10-3_No-00

.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-2

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

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