border-radiusをバランスよくデザインする方法

CSS3の内容をなかなか覚えれない。
そんな人も少なくないかもしれません。

アニメーションや奥行きなど様々な表現ができるCSSですが
よく利用する角丸のちょっとしたデザイン方法をご紹介します。

border-radiusのことですね。
角丸のパネルに角丸のパネルを重ねたデザインを書く際
それぞれの角丸はどのくらいにしていますか?

親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれませんね。
でも同じカーブ、例えばborder-radius:10px;と
双方した場合、「なんか変」な感じがしませんでしょうか。

こういった時の一つの目安として、バランスが良い角丸のデザイン方法があるんです。
しっかりとした数値の違いをつけて
2つの角丸をデザインすることができます。

見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。
こうすることで、2つの角丸は非常にバランスのとれたものになります。

具体的に数字でいうと
CSSのborder-radiusで設定は
親と子のマージンの差の値になります。

子のborder-raduisが10pxの場合で
親と子のマージンが30pxある場合は

親のborder-radiusが40pxになります。

こういう風に、数字として差をつければ
キレイな円を描いた角丸ができるということなんです。

ウェブデザインをしていく上で
一度お試しください。