Now with CSS3 bits
Follow-up to Image gallery thing using ImageMagick polaroid operation from Mike's blag
Subsequent to creating the above linked, I discovered the CSS3 transform and box-shadow properties. (The W3.org site currently says this regarding box-shadow: "This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.") CSS3 is still a work in progress, so support varies and in the case of transform and box-shadow is done using vendor specific prefixes on the properties. E.g. Firefox supports box-shadow by way of -moz-box-shadow. Chrome supports it via -webkit-box-shadow, though Safari currently doesn't. Opera apparently supports it via -o-box-shadow as of 10.5, but I haven't tested it. Internet Explorer Explorer, unsurprisingly, doesn't support box-shadow and nor does it support transform, but all of the other aforementioned browsers do.
Anyway, two notable attributes of the thumbnails in my previous gallery example are that they are rotated and that they have a shadow. Which means I can do a version of that just uses CSS3 features. (HTML generation script)
Pros over the other version:
- The area of the page that needs to be clicked to display a particular image matches the visible outline of the images.
- Uses less bandwidth. The thumbnails are now done using one single jpeg image which is ~10KB rather than using two images totalling ~60KB
- Much simpler. There's no Javascript used (though this might be necessary/desirable if I'd done the different colour border on mouse over for each image as I did in the other version). Thumbnails are created simply by creating a smaller version the original photo, which is a trivial operation.
- More flexible. The white borders and the shadows are done with CSS rather than having been applied using ImageMagick prior to uploading, so they can be quickly altered without having to regenerate the thumbnails.
Cons:
- Very varying results depending on browser.
- The thumbnails don't quite look as nice. With the png version the thumbnails are not entirely flat, the ImageMagick polaroid operator puts a bit of curve on them. Firefox on Linux does a distressingly poor job of rotating the images, they look far worse than they do in Firefox on Mac OS X. I've been unable to find any discussion on this discrepancy in quality. (Mac screengrab. Linux screengrab.)
Mike Willis
16 Mar 2010 20:32
| 
Tags: Css3 HTML
| 
Comments (8)
| 
Report a problem
8 comments by 3 or more people
[Skip to the latest comment]Mathew Mannion
With the CSS transforms, there is also an issue that Chrome doesn’t anti-alias <canvas> (which it looks like it uses to do the CSS transformation), so there are some really nasty jaggies around the pictures in Chrome.
17 Mar 2010, 12:10
Mike Willis
I’ve only got Chrome installed on Mac OS X (Snow Leopard) and that appears to be applying anti-aliasing, or least doing something that means there’s no nasty jaggies.
Your screenshot looks like it’s from Windows 7. Maybe there’s some variance between platforms, or we’re using different versions.
17 Mar 2010, 13:52
Mathew Mannion
Screenshot is actually from Ubuntu (exactly the same version, 5.0.307.11 beta), but I agree that there is probably variance.
17 Mar 2010, 14:25
Mike Willis
My bad. I mistook the stuff above the tabs for wallpaper seen through the glass themed title bar. I’ve spent very little time in Windows 7.
I’ve just installed Chrome in openSUSE and also see the jaggies.
17 Mar 2010, 17:37
John Dale
Really, really nice work, Mike. Looks great in Chrome and Firefox on Mac, and still pretty good in Safari (if you hadn’t already seen the rendition with drop shadows, you wouldn’t miss them, I don’t think). To be useful other than as a proof of concept, though, I guess you’d need to look at how it degraded in the various versions of IE (which I don’t have in front of me right now). If it fell back to just a rectangular grid, no rotation, no overlap, no drop shadows, I think that’d be perfectly reasonable. If it exploded violently, on the other hand…
Any tips on how to run the HTML generation script for non-linux users (Mac, Windows)?
17 Mar 2010, 22:29
Mathew Mannion
It degrades pretty well in IE8, although the images overlap – you could probably get around that by doing the transformation in CSS somehow (though I haven’t thought too hard about it!)
17 Mar 2010, 22:42
John Dale
Pretty good. Ironically, I think it’d probably look better if the images either overlapped more or less. Doubling up the borders looks a bit clunky, but the way the vertical thumbnails overlap with the horizontal ones looks quite nice; overlapping looks better than tessalating. Bet it all goes wrong in IE7 and 6 though.
17 Mar 2010, 22:52
Mike Willis
Thanks John. I haven’t tested it in IE at all because that would mean booting Windows and I couldn’t be bothered. I’m well aware that sadly one can’t get away with that in a production environment. :)
The first version with PNG images will certainly go wrong in IE6 because IE6 can’t handle the transparency.
I think the CSS version could be made IE friendly by using the one of IE’s CSS Filters but it looks unpleasantly complicated compared to the CSS 3 method.
My best guess for running the bash script in Windows would be cgywin. Or create a virtual machine using VirtualBox or similar and install Ubuntu or openSUSE. :)
For Mac OS X you can just download it then at a command prompt do
$ chmod u+x makehtmlcss3$ ./makehtmlcss3You need to make sure you have the bits it needs though.
photodescriptionsis a file containing filenames and descriptions.thumbsdiris the directory it will look in for thumbnails. (Remove the file name from my url and you’ll get a directory listing where you can find the ones I used.)You also need ImageMagick installed (look in the column on the left) as it’s used to find the width/height of the images so the value can be put in the HTML. For Mac OS X, unless you have Snow Leopard running on a Core 2 Duo, that means also installing MacPorts.
I also have GNU Coreutils installed on my Mac via MacPorts (
sudo port install coreutils +with_default_names) because I got tired of finding options I was used to having on Linux missing on the equivalent commands that ship with Mac OS X. (The tipping point was finding that although Snow Leopard includes the GNU version of sort, it’s a version from 2005 which lacks the random-sort option.) I think this script works without that though.18 Mar 2010, 11:00
Add a comment
You are not allowed to comment on this entry as it has restricted commenting permissions.