RGBA colors CSS

CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this
property-name stands, for, you guessed it: alpha. This new feature allows us to specify an opacity value for a color. This one could
make life for webdevelopers a lot easier…

So far, this has only been implemented in Safari 3, and works in the latest Firefox 3 pre-alpha’s.

See the example:

See the difference in the code between the first row, which uses RGBA color values, and the second, which uses RGB values:

<div style="background: rgba(255, 0, 0, 0.2);"></div> <div style="background: rgba(255, 0, 0, 0.4);"></div> <div style="background: rgba(255, 0, 0, 0.6);"></div> <div style="background: rgba(255, 0, 0, 0.8);"></div> <div style="background: rgba(255, 0, 0, 1) ;"></div>

And the second one:

<div style="background: rgb(243, 191, 189);"></div> <div style="background: rgb(246, 143, 142);"></div> <div style="background: rgb(249, 95 , 94) ;"></div> <div style="background: rgb(252, 47, 47) ;"></div> <div style="background: rgb(255, 0, 0) ;"></div>

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s