デザインTips: 角丸パネルに角丸パネルを重ねた時、それぞれの角丸をバランスよくデザインする方法

角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか? 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。

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

サイトのキャプチャ

Quick Tip: Rounded Corners Done Right

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

サイトのキャプチャ

親と子の中心点を揃える

CSSのborder-radiusで設定する時は、親と子のマージンがそのまま差の値になります。

サイトのキャプチャ

CSSでも設定は簡単

入れ子の角丸を使って悩んだ時は、ぜひお試しください。

sponsors

top of page

©2018 coliss