All 1 entries tagged Css3

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) |  Close comments |  Report a problem