CSSだけでできる色彩表現
こんばんは。グラフィックデザイナー、カラリストの藤田です。
今日はWebデザインで使えるCSSを使ったコーディングテクニック。
けっこう色々できます
ひと昔前だと画像でしか表現できなかったことが、CSSを書くだけで表現することができるようになりました。
画像からCSSに切り替えると、表示速度を速めることができるので、できるだけ活用していきたいところ。
そんな中から、色彩に関する表現をいくつかピックアップしてみます。
1. 不透明度
不透明度を調整することで、後ろにあるものを透過させることができます。
opacityという全体的な不透明度を調整するものはあったのですが、透過したくないものまで透過しちゃったりするので、いまいち使い勝手悪かったんですよね。
RGB指定でalpha値も設定できるようになってから、背景色の扱いの自由度が高くなりましたね。
rgba(R, G, B, alpha);
R,G,Bは0～255の範囲の数値、alphaは0～1の小数点刻み（1 = 100%）で指定して使います。
使用例）
background: rgba(255, 255, 255, 0.5);2. グラデーション
これがcssだけで実装できるようになったのは、自分の中でかなり衝撃的でした。
しかも2色間のグラデーションだけでなく、数色に渡って変化させることが可能です。色同士の距離や角度も自由。不透明度すら調整可能です。
流石にグラデーションマップを使うような表現はまだ難しいところがありますが、数行のコードで表現できるのは助かります。
ジェネレーターもあるので、気軽に使えるのも良いですね。
3. ドロップシャドウ
影を落とすのもCSSで可能だったりします。
色や不透明度の指定は、1つめの不透明度と同じ書き方が使えるので、複雑な形状でなければこれで充分。
4. lighten / darken
こちらはSCSSで使えるテクニック。
元の色を基準に明るくしたり、暗くしたりできます。
ボタンをタップしたらちょっと暗くするみたいなのが、統一感をもたせたまま調整できます。
ただし、極端に指定すると不思議な色調になることが多いので、ご注意を。
大体15%以下で抑えるのが良いです。
SCSSはコンパイルが必要なので一段階扱いが難しいですが、使い慣れると単純なCSS表記には戻れません…。
まだまだ色々あるのですが、文字数が凄いことになりそうなので、今日はここまで。
コーディングする方だけでなく、Webデザインする方も「こういう事ができるんだ」というのを知っておくと、作ったデザインをコーダーさんに渡しやすくなると思います。
活用してみてくださいね。
実体験＆勉強から得た色彩のお話を発信しています。 よろしければサポートいただけると嬉しいです。 心躍る色彩のご紹介に繋がる様々なアイテムの準備に活用させていただきます。