Resize Graphics and Photos for iPad and iPhone
Optimize Images in Photoshop for iPhone and iPad
Design for Safari and Chrome Browsers

Web Design with Transparency in CSS 3

In addition to the keyword transparent, CSS 3 has another way to produce transparent or translucent elements on your web pages, as shown in the following chunk of code.

CSS 3 introduces the new color selector RGBa. RGBa is the same as the original RGB color selector, except that it takes a value that describes the alpha, or transparency, of the styled element.

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

These elements are all blue, but they have a different amount of transparency, as illustrated. Note how the solid red block shows through.


In this example site about jellyfish, gradients with transparency were used to let the background show through. You can see that it was used to create a layered effect. If the bottommost color of the page is changed, all the layered colors let the change filter through a tint.


The result of using this gradient technique is that the entire website can change with a single change of the background.

blog comments powered by Disqus
Assess Your Current Web Presence
Use iOS-Specific Meta Tags in HTML5
Web Design for the iPhone and iPad
Insert Images into Page Designs for iPhone
Don’t Clutter the Screen with Navigation Options