2021.04.27

CSSのHEX値で透明度を指定する

最近使うようになった小ネタ。
IEでは当然使えません。

RGBA指定が面倒

color: rgba(0, 0, 0, 0.5);

黒とか白なら楽ですが、複雑な色になるとPhotoshopからコピペも面倒なので、最近はHEX値でやるようになりました😊

color: #00000050;
-> rgba(0,0,0,0.5)と同じ

color: #00050;
-> エラーで認識しない

最後の2桁が透明度(0-100)です。
ショートコードだとエラーになります。

Sassの時はこんな感じで使ってます。

$black : #000000;

color: #{$black}50;
-> color: #00000050;

参考
https://www.digitalocean.com/community/tutorials/css-hex-code-colors-alpha-values
https://caniuse.com/css-rrggbbaa

NEWER POST
NO POSTS
OLDER POST