Opacity CSS

The most widely implemented feature of CSS3 up till now is opacity. It’s probably also the one people have been waiting for the most…

See the example:

See the difference in the code between the first row, which uses the same color value for each row, combined with an opacity value, and the second, which uses RGB values:

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div> <div style="background: rgb(255, 0, 0) ; opacity: 0.6;"></div> <div style="background: rgb(255, 0, 0) ; opacity: 0.8;"></div> <div style="background: rgb(255, 0, 0) ; opacity: 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>

The exact same effect shown here can be reached using rgba values.

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