Hey People,
CSS3 is the new way to style your WebPages. It come with more power and potential for the designers. Though CSS3 is not supported by every browser at the present but more importantly browsers like Firefox, Opera,Safari and Chrome support them.
I am going to discuss CSS3 in parts here, so let us start with the opacity property of an element which can be achieved using rgba in CSS3. This property no doubt is going to make life easier for web developer/designers.
Opacity demo using rgba , CSS3 property.
<style> #css_demo { margin: 10px 0px; } #css_demo div { height: 40px; } </style> <div id="css_demo"> <div style="background: rgba(255, 0, 0, 0.2);">You will see this div with transparency !!</div> <div style="background: rgba(255, 0, 0, 0.4);">You will see this div with transparency !!</div> <div style="background: rgba(255, 0, 0, 0.6);">You will see this div with transparency !!</div> <div style="background: rgba(255, 0, 0, 0.8);">You will see this div with transparency !!</div> </div> |
So as you can see above, its is fairly easy to set opacity level of an element in CSS3. If you are using Internet Explorer (IE) then you wont be able to see any change in the background colors of the divs. But if you are viewing this page on any of the above mentioned browsers, then you definitely can see it working.
Hope you enjoyed the post.
Stay Digified !!
Sachin Khosla.
