A pragmatic guide to modern CSS colours - part one - Piccalilli
https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/
このエントリの冒頭部分で見ていたのですが、メモ
/* red, 50% opacity */
.red-50 {
color: rgba(255, 0, 0, 0.5);
}
以前はrgbaと書いていたのが
/* red, 50% opacity - this works*/
.red-50 {
color: rgb(255, 0, 0, 0.5);
}
rgbだけで済むように(4番目のチャンネル追加が不要に)
また、カンマ区切りは今ではレガシー構文になったので
/* this works */
.red {
color: rgb(255 0 0);
}
.blue {
color: hsl(226 100% 50%);
}
スペースで区切ることができます
*ただし、4つ目の値を追加するにはスラッシュ(/)を使用する必要があります
/* full red */
.red {
color: rgb(255 0 0);
}
/* red, 50% opacity */
.red-50 {
color: rgb(255 0 0 / 0.5);
}
.hsl-red-50 {
color: hsl(0 100% 50% / 0.5);
}
まぁMDNにもありますが
rgb() - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/color_value/rgb




0 comments:
スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。
注: コメントを投稿できるのは、このブログのメンバーだけです。