Showcase of Transparency in Web Design
Published in Galleries
Transparency is being used in an increasing number of websites. In some cases transparency subtly adds to the quality and character of the design, and in other cases it can be a major design element. In this post we’ll feature 35 websites that are making excellent use of transparency.
2am
Electricurrent
Sam Brown
Housing Works
Lift
Lilly’s Table
Sisu
Russ Kirby
Imaginaria Creative
Mint
Ordered List
Delicious CSS
BenSky
World in My Lens
Galan
WebMynd
Blik
FontShop
Go Media
Squarespace Blog
SOASdesign
Oliver Kavanagh
Gavin Castleton
SolidShops
Blogs.mu
Pulse
Neutron Creations
Two24 Studios
24 Ways
Lynn Cyr
Second Story
Nick Hand
WWF
Pop Labs
The Photo Argus
For more design inspiration please see:
Published February 22nd, 2010 by Steven Snell
46 Responses
Great source of inspiration thanks!
Even if it’s only a blog, I’ll add this one: http://dyvantity.com
regards
*cough* http://joshhemsley.com *cough*
hehe. Great collection though! Thanks for the inspiration!
Wow! What a cool list, and I’m so stoked to be included with these awesome sites… thanks!
Nick Hand
@ Josh lol!
I’ve been using transparency for decades! (Loved transparent inks in serigraphy waaaay back in college!)
And now that I can manage transparencies w/CSS3…yippee!
*cough* http://eyestylesllc.com *cough*
Too bad IE still requires .png backgrounds or alternate hex numbers!
This is a serious source of inspiration, thanks!
Thank you for featuring 2am Media in this listing.
Good stuff, man. I especially like how it’s ben implemented on 24 Ways. Fascinating!
It is not hard to pull of and gives the website a very nice and clean look. Hope people don’t over use it.
@JoshHemsley
big props on your site! I dig it like dug.
Very nice, the transarency i think its going to be a trend of 2010
I’ve been admiring these web design posts for some time, and would like to know if you have, or would consider, posting a tutorial on how you get your screenshots so clear and crisp.
I am a d-i-y-er and don’t have access to the professional tools you do (am currently using Picasa and PhotoPlus6), but I’d sure like to be able to post prettier screenshots.
Great finds, thanks for posting
Is that it? 35 printscreens/links? No comment, no reflexion, no attempt to draw some guidelines out of it?
Here is one : choose carefully the image that goes in the background: contrast is the key (see the first printscreen: the background image is desaturized). Basically, you have two options:
1/ you pick whichever gets the information load: the background or the foreground, not both
2/ you make it so that both fore and background blend into each other (the Mint example).
Why not include this?
http://catalystainteractive.com/
Taxing Lessons,
I don’t have any special tricks. I simply use the screen print key and paste it into Photoshop. Sometimes I use the Screen Grab extension for Firefox.
I love how transparency adds depth. I’ve also incorporated it into my portfolio website – love the outcome. There are a couple of outstanding examples here as well. Great finds.
I never used transparency, but after reading this article, I think I am gonna star using it
Thanks
Thanks a lot for this Article
Great article…I see more examples for my job! Useful! Interesting! Fabulous!! Thanks for the sharing!!
thanks heaps! some really good & useful examples
thank you very much for the feature and the wonderful showcase!
All of excellent works. but sometimes browsers show diffent when we use transpareny with some css rules :/
Nice portfolio, guys. We love transparency in website design!
Great inspiration and showcase of use.
Nice examples of transparency. Don’t forget the transparent PNG fix for IE6!
Loving it, loving it! Specially like the Nick Hand one with a nice bit of tasteful grunge, and a great wee navigation to boot.
My site makes good use of semi-transparent png’s and a javascript moving background, no flash here mates http://www.soultank.com/
Keep up the good work guys, God bless ya.
Another example; http://rubyconfindia.org/index.html
Here is our site http://www.kaynatsoft.com it used power of transparency!
Some fantastic uses of transparency! WWF site is exceptional!
Bookmarked and shared…
Lee.
Great list! Here’s one that I did a few years back: http://www.trainingtrips.eu.
Great stuff got a lot of inspiration from this!
Great, really inspiring and informative blog. Thanks!
A cool one I found, http://www.mediplantfunding.com. Uses transparency.
Add this one too!
http://expressite.com.br/
This one too!
http://silverbackapp.com/
Transparency is really great to spice up a webbdesign, just use a png, its easy. The only problem is ie6 that wont play but there are some clever javascripts to fix that annoying browser.
Good selection, the site itself is also quite good.
Great stuff got a lot of inspiration from this! We’ve actually just created one http://www.ruffordarms.com let us know what you think