[CSS]2pxのほのかな角丸でどことなくサイトを優しくする方法

CSSの角丸でサイトを優しい印象に

背景色を付けたそのボタン。ほんの少しの角丸をつけてあげると、どことなく優しい印象になるかもしれませんよ?

「何かちょっと、とげとげしい…」と感じた部分に付けてみたたった2pxの角丸

この角丸が意外といい仕事しています。

ブロック要素の角々しさ

「たらハコ」はWordPressに移ってから、フラットデザインを意識したデザインになりました。よっひー(@yosiakatsuki)です。

ドロップシャドウもなにも付けない要素は、言わば打ちたてのそばのように…

ちがうちがう… コンクリート打ちっぱなしのように、どことなくとげとげしく、角々しい感じがしました。

角丸がないとなんとなく尖った印象に

ほんの少しCSSで角丸を効かせることで印象が変わった。

とげとげしいブロック要素に優しさを与えるために、なんとなく追加してみた角丸が意外にもしっくりきました!

角丸を強く効かせると「角丸つかってんなぁ!」と、角丸推しになってしまいますが、たった2pxというさりげない角丸は程よく優しさをプラスしてくれました。

角丸のおかげで優しい印象に

CSSで角丸を効かせる方法

僕のブログで適用している角丸のサンプルはコチラ

.sample {
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px
}

各ベンダープレフィックス付のborder-radiusも適用しています。

全部で5種類のborder-radiusが適用されてますが、わざわざ全部書いたわけではありません。

僕はブログのCSSをSass + Compassで書いているので、実際に書いたコードは以下の1行です。

.sample {
    @include border-radius(2px);
}

Compassのborder-radius()は、たった1行のコードを書いただけなのに、ベンダープレフィックス付きのスタイルまで出力してくれるすごい奴です!

角丸ってなんとなく大変なイメージを持っていたのですが、Sass + Compassを使い始めてからそんなイメージはどこかに吹き飛びました!

ちなみに…僕はSASSを勉強するにあたってコチラ↓の本を買いました。

開発環境の構築手順から書かれているので、「Sass」っていうキーワードしか知らないようなビギナーでも、十分勉強を始められると思います!

よっしーのひとこと

よっひー

「たらハコ」のデザインをこんな中途半端なフラットデザインにしてなければ、もしかしたら角丸はいらなかったかもしれないですね…

僕はこのほんの少しの角丸が優しい印象を出していると思いますが、みなさんはどうなんでしょう…

もし、共感を持っていただけたら、試してみてください!

ではまた。