Journal
PNG Overlay
17 January 2007 › 28 comments
PNG Overlay: Example | Download (44 KB)
Have you ever run into the problem of creating a site with pictures given by the client, only to find later after they update their photography the original look and feel is not retained? For instance, you might add a drop-shadow, rounded corners (maybe both) or some other graphical effects applied to the images. This is all well and good, but what about the webmaster or journalist who follows after you – Will he or she be able to keep the look consistent?
In order to help remedy this potential problem, here is a solution that I came up with. Basically, it involves creating a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF. This way, a typical CMS installation can be configured so users can upload photos without having to worry about using any graphics program to apply filters. Even if you are already a whiz with graphics, it will help save you time.
The nice thing about this method is that you are just applying an absolutely positioned <div> with a PNG backround over the top of a regular image, so you still get the benefits of a relevant alt attribute / value pair, as well as printing images because they are technically in the foreground as far as the browser is concerned. It will even work in IE6, with the proprietary Microsoft alpha style filter applied. IE7 will handle the transparency natively.
I am not going to go in depth and explain how to make transparent overlays, because there are already plenty of Photoshop tutorials out there. For a good explanation of how to achieve this effect in Fireworks, check out the article at solarDreamStudios. I hope this demo inspires ideas and makes life easier.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Travis
Nice Tut. These soft gradient shadow outlines make every image look better. This is a good way to only have to apply/define it once, so that it applies to all further images.
#2 Jason Beaird
Interesting idea. I’ve tinkered with the concept of png overlays before, but not quite like this. Nice background on .pan_wrap class. :)
#3 Robert
Nice! That is a cool technique. You could take it even farther for other things like adding a glass look to the transparency that sits over the image. That would be so “web 2.0”. :p
Oddly, it reminds me of a program for the Mac that takes 3 images of the same picture (under exposed, just right, over exposed) and combines them for a more real (surreal) look.
Anyways, thanks for sharing this!
#4 Jesse Anderson
Great idea! Bookmarked, I’m sure I’ll find good use of this sometime in the future.
#5 Nathan Logan
When I turn off CSS, the overlays disappear. What’s wrong with your script? ;)
Good stuff – thanks for the much-better-implementation than I’ve used in the past (a jagged expanding .gif). You’re the king of CSS.
#6 Ryan
Very Cool. We’re always struggling with doing some cool texturing to images and then having to train the client on a PSD template or utilizing Flash to contain the shadow or texture wrapper.
#7 James Finley
See, if I actually published my ideas on the web… Grrr. I have done this before. lol I am gonna be launching a new design/programming blog soon, and all the new stuff from From The Gates of Hell will be shown on there (how I did certain things) and I will be doing tons of new stuff for the new blog too. If you haven’t checked out my new layout yet, Nathan, check it out ASAP. Just kidding. When you have a chance, check out my new photo gallery. I created a brand new Javascript gallery system. There will be an article on it soon for my new blog.
#8 Ara Pehlivanian
Very nice. Very nice indeed. Smart, smart man you are. ;-)
#9 Matt Donovan
This will come in handy, I’m sure.
warning – unrelated: any idea when the next refresh dallas meeting will be? I tend to get the reminders day of – which is generally too late.
#10 Jeff Croft
I don’t want to just be a whore for my books, but I have to say that I wrote a whole chapter on creative use of PNGs (including this exact same PNG overlay idea — and many more!) in the upcoming book Web Standards Creativity from Friends of Ed (you can find it on Amazon).
PNGs are amazing little guys, and with a bit of love, you can make them work well in IE, too. The things you can do, if you are creative about it, could well change the face of visual design on the web if people start really taking advantage of them. Now that IE7 supports them, it’s definitely time to start adding some clever PNG tricks to your bag.
Nice article, Nathan.
#11 Rob
Yup, I’m with Jeff. I think we’ll see an emergence of PNGs in the not so near future. Thanks Nathan.
#12 Nate K
This is a very snazzy technique. As Jeff said, I think there will be many creative possibilities with PNGs – something I look forward to playing with.
I like this example for the simple reason: I am not always the one publishing online ads in certain spaces on our websites. For this lack of control, we are stuck to the box look – whereas with something like this we could afford a little more creativity.
Good work….
#13 Matthew
Nathan,
Andy Clarke addresses some of this stuff conceptually in transcending css, its worth a read. Thanks for the work on showing us how its done.
#14 Kyle Talbott
Nathan,
I love yer mind. This has been on mine for a while, back burner… but you cooked it up and served it right!
Thank you, Obi Wan!
#15 Brendan
CSS play had a similar idea last September Partial Opacity
#16 Chris
Love the idea…absolutely great. I can’t wait for the day when IE6 will be all but dead so we can finally start using PNG’s with alpha channels, and not have to worry about 80% of the site’s visitors not displaying correctly (or knowing enough to download the IE6 plugin to display these correctly).
#17 Jeff
Hey, Nathan! Loved your tutorial on PNG overlays. I think I will use the technique to display map images in reviewing one of my favorite video games on my site.
I do have a question… do you think multiple transparency would work? My issue is this… I want give the images a border using this method, but I would like to keep the underlying background. I’m using a CSS fixed background technique, so the background isn’t a solid color, but if it is possible I would like that to be visible underneath the rounded edge border. Can you help?
#18 Arne Kuilman
I am having trouble getting the layers to align when I use different images. Could you explain how it exactly works. I noticed your source image is 10px less tall than your PNG for instance.
#19 Brian Zollinhofer
I’m not sure if I’m just missing something here. I think this idea is great, and I would love to be able to implement it, but I don’t see a tutorial of how to do this… You just said that it can be done. What size does the overlay have to be? It looks like your images were the same size, do all the images you want to do this with have to be the same dimensions?
I’m sorry if this is all common sense or I should know it. I’m feeling a bit brain dead this morning.
#20 Nathan Smith
I’m glad everyone seems to have liked this simple demo. As was mentioned already, I would highly recommend Jeff Croft’s book Pro CSS Techniques. I also got the chance to peek at a coworker’s copy of Transcending CSS. From what I saw, that book appears to be a very nice one too.
Brendan: CSS Play’s demo falls short – He didn’t make it work in IE6.
Arne / Brian: Yes, your images need to be roughly the same size as your overlay. You will need to create overlays for each size you want to use.
Jeff: Yes, that’s possible. You will need to create a border that sufficiently covers your main image, but still allows for the rounded corners to hang over the background color. The border will need to be pretty thick.
#21 mrdale
OK, good work.
But empty divs are kinda rude from a semantic perspective, don’t you think? Especially if youhave a lot of images on the page.
I think a little JS to dynamically add the overlay might leave your code clearer and more semantic.
I used a similar technique a while back using empty spans to add corners, but felt like a real markup piglet.
#22 Nathan Smith
Mrdale: You bring up a valid point. Here is my opinion on that…
Extra div vs. JavaScript – which should be for behavior only but not presentation – They’re both bad from a purist standpoint. Either one is a misuse of what the language was meant for. Which one should we misuse? Both are equally “rude.” I tend to use JS for things that either HTML or CSS cannot handle, not for eye-candy. SWAT doesn’t write parking tickets.
I prefer the HTML route, because at least it works with JavaScript off; One less player in the equation. An empty div with a space is innocuous to screen readers too. So, I figure if there’s no harm, no foul. It’s not like putting an entire layout in tables, which contains actual relevant content that cannot be handled very well by assistive technologies. On that note…
In the site for which I am using this technique, there will actually be content inside some of the div areas, which would be a travesty to reproduce with JavaScript because that content would be completely inaccessible.
#23 Mark Priestap
Nice post Nathan – How are things in TX?
My only question to this approach, (other than what has already been covered) is how this behaves if the area needs to be clickable. This approach would be fantastic for plopping an absolutely positioned PNG website logo over top of a photo, but I’ve had experience with IE6 where the entire area becomes unclickable as soon as the Microsoft transparency filter is used (at least I THINK it’s the filter that’s causing the problem… not sure). What think ye?
#24 mrdale
See your point Nathan.
Although, I think it could go either way. Imagine you want to add an overlay to two-hundred images on a page. Adding two hundred empty divs compared to one JS is a clear case where the JS solution wins.
I like the Behavior, Presentation, Content trichotomy (B-P-C). But I personally think that it’s more ok for the B to cross the P threshold than it is for either the B or P to cross the C threshold.
That is, we like to keep our content clean and semantic, because that’s the whole reason for the B and P. We’ll often lift the C out of one context and into another.
Content is king: (b-p-C).
Great approach though, and I really appreciate your write-up. Hypocritically, I’m actually going to use your technique today for a client.
I’m just talking theory, which sits at the perfect end of a continuum.
Looking forward to your book BTW.
#25 Nathan Smith
Mark: It wouldn’t be too much of a problem. You could just size a link within the overlay div to be display:block and have the exact dimensions as the overlay. I believe that would work. Try it and let me know.
Mrdale: Yeah, I agree that this technique would not be good to use multiple times per page. I meant it for use as an enhancement to be used once or twice per page. The up-side is that once the PNG is cached as a background image, it loads instantaneously as opposed to JS having to parse the DOM.
#26 Rick Curran
Hi Nathan, Just been browsing around on 9Rules.com and I was reminded to come check out your site, I’m afraid I’ve been pretty much a lurker on GodBit and haven’t really taken part much in discussion for a while. Still read the articles regularly though. Anyway, I just wanted to say hi and I hope you’re move to Texas has gone well.
Any updates on the whole J.R. thing? ;)
Cheers,
Rick
#27 Nathan Smith
David: Hey, thanks for taking the time to comment. Things are going well in Texas, but the trail seems to have run cold as to who shot J.R.
#28 Lance Fisher
Nice post! I just learned about this technique this week, and I really like it. They have a similar post over at Photoshop Lab.
http://www.photoshoplab.com/fun-with-transparent-png-images.html
I was also thinking about clicking on the image being ruined by doing this. Sometimes, though, this is what you want. For instance, I’m working with a photographer on building a site for his photography and he doesn’t really want the photos to be downloaded easily. I’ve always hated the js alert box method. e.g. “This photo is copyrighted…” since it is terribly annoying, but this would be a great roadblock.
In fact, I’m pretty sure they do this on flickr if you set an option on your account.