CSSで使い回しの効く光沢表現を作る方法

ボタンなどに光沢を付ける場合、現在ではCSSで光沢表現を付けることよくがあります。

せっかくCSSで作るのですから、光沢表現を保持しつつ出来るだけ簡易に色変更できた方が便利ですよね。

この記事では、なるべく簡単に光沢表現をつけた要素の色変更ができるような、使い回しの効く作り方を書いてみたいと思います。

実現したいこと

実現したいことは以下の通りです。

• CSSで光沢表現のある要素をつくる
• 色を簡単に変更できるようにする
• 画像は使わない

考え方

実現のための方法ですが、考え方はとても単純です。

• 背景色だけで色を決定
• アルファ値を利用する
• アルファ値を調整した白と黒で明暗を表現する

白と黒さえあればそれっぽい感じにはできます。

ちなみに画像でも同じ考え方で同種の使い回しが効くものが作れるのですが、ボタンの大きさやラベルの文字数をある程度確定する必要があるため、汎用性の点で劣るように思います。

コード

以下はよく使われそうなボタン型を想定したコードです。

まず冒頭に実際にCSSを当てたサンプルを設置していますが、使用しているCSSプロパティに対応していれば表示されるはずです。

サンプルではspanに対してCSSを当てていますが、このspanのpadding指定などは省いていますので、その点は留意していただければと思います。

斜めの光沢

 <span class="bg-red oblique-gloss">RED</span>
 <span class="bg-blue oblique-gloss">BLUE</span>
 <span class="bg-orange oblique-gloss">ORANGE</span>

/* 基本色の設定 */
.bg-red{ background-color: #d70035; }
.bg-blue{ background-color: #0075c2; }
.bg-orange{ background-color: #f3981d; }

/* 光沢の設定 */
.oblique-gloss{
  background-image: -webkit-linear-gradient(45deg,transparent 40%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%);
  background-image:         linear-gradient(45deg,transparent 40%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%);
  background-repeat: no-repeat;
}

ガラスの光沢に似た表現です。

CSSのグラデーションを使っており、もっと多くの光沢を入れることや、角度を変更することも可能です。

斜めの光沢に立体感を付ける

<section>
 <span class="bg-red oblique-gloss solid-shadow">RED</span>
 <span class="bg-blue oblique-gloss solid-shadow">BLUE</span>
 <span class="bg-orange oblique-gloss solid-shadow">ORANGE</span>
</section>

/* 基本色の設定省略 */
.oblique-gloss{
  background-image: -webkit-linear-gradient(45deg,transparent 40%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%);
  background-image:         linear-gradient(45deg,transparent 40%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%);
  background-repeat: no-repeat;
}
.solid-shadow{
  border-bottom: 5px solid rgba(0,0,0,.4);
}

サンプルのように角丸にするとちょっと厳しいのですが、角丸にしなければそれなりに見える装飾です。

斜めの光沢に立体感を付ける(没案)

 <span class="bg-red oblique-gloss solid-shadow2">RED</span>
 <span class="bg-blue oblique-gloss solid-shadow2">BLUE</span>
 <span class="bg-orange oblique-gloss solid-shadow2">ORANGE</span>

/* 基本色の設定省略 */
.oblique-gloss{
  background-image: -webkit-linear-gradient(45deg,transparent 40%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%);
  background-image:         linear-gradient(45deg,transparent 40%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%);
  background-repeat: no-repeat;
}
.solid-shadow2{
  box-shadow: 0 -5px 0 0 rgba(0,0,0,.4) inset;
  padding-bottom: 13px;
}

こういう立体表現はbox-shadowを使う方がキレイなのですが、insetにするとサンプルのように陰部分にまで光沢が入ってしまいます。

insetにしない場合の方が完成度が高いのですが、この場合ボタン色ごとに個別に影の色を設定する必要があり、すこし汎用性に欠けます。

今回の趣旨とはズレますがちゃんと作る場合は以下の方法になるでしょうか。

• 下方向の側面(陰に見える部分)を透過させずに、個別に暗い色を設定
• insetをはずし、影の部分に対してボタン色に合わせた暗い色を設定
• 光沢をやめる

柔らかな光沢に立体感をつける

 <span class="bg-red soft-gloss">RED</span>
 <span class="bg-blue soft-gloss">BLUE</span>
 <span class="bg-orange soft-gloss">ORANGE</span>

/* 基本色の設定省略 */
.soft-gloss{
  background-image: -webkit-linear-gradient(rgba(255,255,255,.3) 0%,transparent 50%,transparent 50%,rgba(0,0,0,.1) 100%);
  background-image:         linear-gradient(rgba(255,255,255,.3) 0%,transparent 50%,transparent 50%,rgba(0,0,0,.1) 100%);
  box-shadow: 0 2px 2px 0 rgba(255,255,255,.1) inset,0 2px 10px 0 rgba(255,255,255,.2) inset,0 -2px 2px 0 rgba(0,0,0,.1) inset;
  border: 1px solid rgba(0,0,0,.2);
}

派手さはありませんが、柔らかな光沢もボタンとして使いやすい表現です。

繊細な光沢に立体感をつける

 <span class="bg-red soft-gloss2">RED</span>
 <span class="bg-blue soft-gloss2">BLUE</span>
 <span class="bg-orange soft-gloss2">ORANGE</span>

/* 基本色の設定省略 */
.soft-gloss2{
  background-image: -webkit-linear-gradient(transparent 0%,rgba(255,255,255,.3) 50%,transparent 50%,rgba(0,0,0,.1) 100%);
  background-image:         linear-gradient(transparent 0%,rgba(255,255,255,.3) 50%,transparent 50%,rgba(0,0,0,.1) 100%);
  box-shadow: 0 2px 2px 0 rgba(255,255,255,.2) inset,0 2px 10px 0 rgba(255,255,255,.5) inset,0 -2px 2px 0 rgba(0,0,0,.1) inset;
  border: 1px solid rgba(0,0,0,.2);
}

繊細な光沢表現も、わりと簡単なCSS指定で実現可能です。

個別に設定する方がよりきれいではありますが、背景色を変えれば色の派生を量産できるため、運用時のメリットがあるかと思います。

問題点

単に黒と白と上から薄く乗せているだけなので、それぞれの色ごとに明度や彩度を調整した色に比べるとキレイとはいえません。

この点は汎用性の高さの代償であり、許容しなければならない点です。

よりキレイな光沢を！という場合は、各色毎にグラデーションや陰を個別に作りましょう。

結び

IEで対応していないバージョンを切れば、画像作成の手間を省くだけではなく、工夫はいりますが簡易に色の派生を作ることができます。

当ブログのグローバルナビ(PCサイズでしか表示させていません)のボタンもCSSだけで作成していますし、個別に作り込めばそれっぽい質感の表現もできます。

「それっぽさ」というのは、CSSの工夫次第で便利な形に作れることが多そうです。

ボタンのデザインによく使われる三角形のアイコンに関しても記事を書きましたので、気になる方は以下をどうぞ。

• 色変更可能な三角形のアイコンをCSSだけで作る方法

色別に作り込んだらどうなるか

上記はCSSで色別に作り込んだボタンのスクリーンショットです。

白のアルファ値を使うだけではオーバーレイのような色は出せませんが、最初からオーバーレイ後の色を設定すれば、オーバーレイが使えずとも使っているように見せることができます。

色に深みを出すため陰に寒色を薄く入れるなど、絵を描くような感じで色を置くのも効果的です。

ここまで作り込むと、少し色を変えるだけで全ての色設定を細かく書き換える必要があります。
多くの色を手軽に作る必要がある場合は、こういった作り込みは避けた方がよいでしょう。