CSSで使い回しの効く光沢表現を作る方法ボタンなどに光沢を付ける場合、現在ではCSSで光沢表現を付けることよくがあります。 せっかくCSSで作るのですから、光沢表現を保持しつつ出来るだけ簡易に色変更できた方が便利ですよね。 この記事では、なるべく簡単に光沢表現をつけた要素の色変更ができるような、使い回しの効く作り方を書いてみたいと思います。 実現したいこと 実現したいことは以下の通りです。 CSSで光沢表現のある要素をつくる 色を簡単に変更できるようにする 画像は使わない 考え方 実現のための方法ですが、考え方はとても単純です。 背景色だけで色を決定 アルファ値を利用する アルファ値を調整した白と黒で明暗を表現する 白と黒さえあればそれっぽい感じにはできます。 ちなみに画像でも同じ考え方で同種の使い回しが効くものが作れるのですが、ボタンの大きさやラベルの文字数をある程度確定する必要があるため、汎用性の点で劣るように思います。 コ
