Transparency in Web Design
How is it done? Let’s take a gander at four different ways. Each of them handling the illusion in a different way, and each completely appropriate depending on the situation at hand.
Totally Friggin Fake It
The end result of any web design is basically an illusion anyway. You can always create your transparent effects in Photoshop or whatever other graphics editor and export flat graphics. In Photoshop, transparent effects can be created by changing a layers opacity level, fill level, or blending mode, just to name a few.
Opacity
This entire button has opacity applied to it, to emphasize that it is currently “disabled”.
You can make any element transparent by using the opacity parameter of CSS.
#anything {
opacity: 0.5; /* 50% transparent */
}If you need to support older browsers, see here.
Do note that all descendants of the element with opacity also become transparent. There is no way to “force” any descendant to be come any less transparent as the parent is.
RGBa / HSLa
Using RGBa for a color value in CSS, you can set a transparency level on any color. This has the distinct advantage over opacity in that it doesn’t have any affect on descendants. It is also nice in that creating faded out variations of a color is as easy as changing the final alpha value. Speaking of color variations, that is even easier to do with HSLa, and is still able to handle transparency.
#anything {
background: rgba(0,0,0,0.5); /* 50% transparent */
}#anything {
background: hsla(0,0,0,0.5); /* 50% transparent */
}PNG
When “Saving for web” from Photoshop, you have two choices for PNG’s: PNG-8 and PNG-24. PNG-8 is like a GIF in that you can have transparency in pixels, but a pixel is either fully transparent or fully opaque, no in-between. PNG-24′s, while far bigger in file size, support full alpha-transparency.
In the example above, the shadows from the content areas are from PNG-24s so that the texture in the background can change and the shadows will still be the same.
cool… That’s the first I’d heard anything about HSLA being included in css3.
Same here. What does it stand for? And where does it originate from?
Hue Saturation and Lightness (and Alpha). It’s kinda awesome and I really gotta get around to doing an article on it.
Hue Saturation and Brightness is a favourite feature of mine in Illustrator, so I think HSLa would be great.
That’d be great if you could write an article on it, Chris.
how does likearchitects make the video background without flash?
If you look at the source it looks like it’s just images in the markup that move & fade using jquery cycle. The main div uses a repeating fixed background image to create the pixellated dot effect.
http://jquery.malsup.com/cycle/browser.html
Actually, the cycle plugin is only used for the news.
The background animation doesn’t use plugins, because I couldn’t find a single one that would fit the sliding + cycling behavior that I wanted in the design.
So I had to code it by myself. Code is at http://likearchitects.com/assets/js/application.js
Glad if this was of any help to you.
Chris, your timing never ceases to amaze me – literally just doing a search about this right now, came to do a search through past articles – but no need!
Cheers!
Excelent thank!!
I think none of them don’t work in IE except for the first one which needs IE specific property “filter” :(
You can get 24-bit PNGs to work in IE6 with a bit of JavaScript goodness or as others state you can use Fireworks or this method to create the indexed 8-bit version. Semi-transparency for all browsers!
“PNG-8 is like a GIF in that you can have transparency in pixels, but a pixel is either fully transparent or fully opaque, no in-between.”
Actually that is completely wrong. You can have alpha transparency within a PNG-8 file, however that colour/alpha combination is stored as a specific colour in your limited 256 colour pallet.
Also photshop does not support PNG-8′s with alpha transparency. Fireworks does.
Reference: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
Yeah, I heard of it but completely forgot.
Yeah, this is pretty much the biggest reason to use Fireworks. The added benefit is that if you compress them as PNG-8+Alpha IE6 will render them as if they are PNG-8+Boolean, which in many cases is an acceptable fallback. Unlike PNG-24′s which render with a nasty gray background in IE6, necessitating a JS hack for IE6, which I abhor. PNG8+Alpha FTW!
Do you know of any good tutorials explaining this step by step process? I’ve heard there are a few steps involved to get good fireworks png-8
Previous sentence: When “Saving for web” from Photoshop…
It’s a bummer Photoshop doesn’t support the PNG-8 alpha transparency thing, but it doesn’t make me wrong.
Yeah right. Give Ben due credit for pointing out something that you didn’t, please. If you really meant to say that Photoshop restricted PNG8, then you made a mess of it, and Ben’s comment added value to the article.
It looks like Photoshop CS5 now supports PNG-8
I misspoke. PS-CS5 does “support” PNG8, but it appears that it still doesn’t support alpha transparency.
pngquant and pngnq can also do this png8 optimization trick… for free
The few times I have tried I am usually not very happy with the results in ie6. The “on/off” transparency can look pretty bad sometimes.
I have also tried using AlphaImageLoader to correct the binary transparency but that will only work for png24 not png8.
You can also get a full transparency/opacity mask in the tRNS chunk with PNG8, but the mask is stored as one byte per pixel and the chunk is not compressed. It works for sufficiently small PNGs without taking up slots in your index color palette.
I tried this method, step by step, and it still didn’t render with alpha transparency. I know I must’ve “done something wrong” despite my belief that I followed the instructions correctly… but at the end of the day I couldn’t get alpha in IE6 so I ditched it. Even then, and especially more now with recent statistics and discussions, I simply took the approach, “IE6 users will have a slightly ugly experience. Too bad.”
So, to Greg’s point, which browsers support this technique (rgba, hsla) ? Right now – probably like most folks — I use several css specs to achieve opacity settings a range of browsers. Sure would be nice to handle this with one spec !
Chris, which method do you use most often?
I recently shunned a client for changing up a design where the main wrapper was to be opaque.
You have re-iterated the invaluable additions web with rgba.
Thanks!
*to the… web
I am mostly using PNG’s, but last times use rgba + png fallback for simple transparent blocks. (I really should use hlsa for it, but found syntax less usable than rgba; I don’t need to animate color, anyway).
And sometimes use «fake» (transparent block flatten with background) on small sites that will not change layout.
Thanks, great article. CSS3 is amazing
Probably worth pointing out that only the RGBa and HSLa techniques would be considered CSS3. The others are older or don’t have anything to do with CSS =)
What does “the shadows the content areas are creating my be from PNG-24s” mean?
I think he meant “by me” instead of “my be.”
That was quite awkward, thanks for pointing that out. The point was that the shadows are part of the PNG-24 graphic itself.
Thanks for the article Chris !
Those are great CSS attributes used to create a truly unique interface.
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
No need; Mozilla supports opacity.
does now. -moz-opacity: is for older versions that may still be in use (e.g., netscape navigator).
Or if you’re already using jQuery, use its opacity instead which takes care of all browsers.
THANK YOU bill
Much water will go under this bridge before CS3 gets any practical use….so yes, fun to read now but maybe applied in 2020.
Nice article Chris.
+S
Nice post
Nice roundup of techniques.
Also worth noting that RGBa and HSLa can be used within CSS3 gradients to create some nice effects, so you’re not limited to just a single colour or opacity.
Very helpful, thanks Chris, plus I like the jQuery cycle link in your reply to Ray.
So, maybe I’ve confused myself, but… the RGBa and HSLa options are only CSS3 options, or do they have CSS2 “equivalents”?
Also, are the RGBa and HSLa methods just for background color, or can they be used for other color specs, like font color, border color, etc.?
Thanks for the great article, as always!
there are no css2 equivalents for RGBa or HSLa.
RGBa can be used for any property that would normally accept a RGB declaration, so yeah, pretty much anything that lets you define a color. You should use an RGB declaration first as a “fallback” for browsers that don’t support it (or, as mentioned somewhere above, a transparent png for backgrounds).
I posted this on the RGBa Browser Support article, but I’ll post it again here because I found it so useful in getting RGBa to work in all browsers:
Here’s a more in depth explanation of the IE hack for rgba transparency. There’s even a handy-dandy tool to translate the RGBaa values to hex code. Nice.
Nice trick.
Very awesome, been wondering lots of this my self. Thanks a bunch going to have to try this on some up coming websites. Keep up the good work.
What about performance penalties?
Png: Some browsers (on old computers?) tend to lag rendering (scrolling) a website with several transparencies (even if each transparency is using the same small png file).
How many transparency layers will be rendered by the browser using each method?
Thanks
My thought on that is if you absolutely need some png transparency goodness, keep it as small and simple as possible. I wouldn’t even attempt to do multiple layers unless I was just horsing around with an experimental site. If I try to get too clever on a real site that has to look good cross browser, IE usually bites me one way or the other.
Something I recently found out while trying to work with transparent pngs in IE (Kind of a “duh” moment for me) :
Don’t under any circumstances try to make semi transparent background out of a 1 pixel repeated png and expect it work in IE. Using the various scripting solutions for IE png support, it locks up the IE browsers something terrible. For uniform transparency of a solid color (gradients apparently work also), the RGBa route with the IE hack is money.
Hah! When I read “Transparency in web design” I thought you were talking metaphorical transparency, not literal transparency. That made your first point “Totally frigging fake it” even more apt.
Same here! I was confused for a few seconds :P
Great guide, very informative. Thanks for sharing!
PNG-8 can do Alpha transparency, you have to use Fireworks for saving it.
With transparency there could be some really nice web pages.
Cool. This is what I am looking for!!
cool one…..
I’ve actually been trying to do some stuff related to this using -webkit-mask-image with -webkit-gradient so that I can apply gradients to text using only CSS (purely for experimental/personal use, not for an actual business project), but haven’t found a Firefox equivalent to -webkit-mask-image and am beginning to wonder if it just doesn’t exist yet.
Css opacity is cool, but it will take a lot of time to transfer all those sliced photoshop designs from jpegs to pngs or css effects.
Nice one!!! I love It☺!! Thanks for the post!
Very interesting, I was working with transparent PNGs recently.
I will try these other approaches, Thanks.