Creating Thumbnails Using the CSS Clip Property. Written on May 13th, 2007 By Joe Seifi (tags: css, design) 69 comments One of the least used properties in CSS is the Clip property. Clip is part of the visual effects module of CSS 2.1 and its job is to place a visible window on top of an object that is being clipped. It is useful for clipping images and creating thumbnails without having to create additional files. This trick can be used to create square thumbnails, or to create other varieties of thumbnails without actually duplicating files on the server.
Here is the rundown. Example Here is a sample image we want to clip: The CSS and HTML look like this: NOTE: The W3C recommendation suggests using commas between the coordinates, however this is broken in Internet Explorer. And the result looks like this: Our class (.clip) sets the clipping region using the TRBL rotation syntax. The other important thing to note is that the clipping class position must be set to absolute for the clip property to work. Removing the clipped areas. CSS Drop Shadows II: Fuzzy Shadows. We like shadows. We enjoy making them drop and we love CSS and standards, so we wrote CSS Drop Shadows. The little voice in our head approved of it. We thought that was the end of it. Article Continues Below We thought wrong. The internet being the kind of medium it is, minutes after the publication of the article, we started receiving comments, queries and suggestions for improvements. The most complained-about shortcoming of the technique turned out to be the sharp top and left edges of the shadow, which, although generally acceptable, are unlike what an image editing program would produce (a fuzzy shadow).
Then Jan pointed out a technique for making Internet Explorer render PNG’s alpha channel correctly. In this article we’ll learn how to: Hide a stylesheet from non-IE browsers so it doesn’t affect document validation. First, we’ll fabricate our fuzzy shadow edge. Start with an image like the “fake shadow offset” we described in the previous article. Ie.css Conditional Comments. PNG8 – The Clear Winner. I ran through this little Fireworks PNG trick in the Design View this morning and thought it was worth dropping in a blog post too. This is a method that’s been around for years, but I’m constantly surprised by how many people don’t know about it.
Even in this office, I’ve had web gurus furrowing their brows and insisting “No, no … that can’t be right … can it?” So, at the risk of having long-time Fireworks users yawn, roll their eyes and think duh! , here it is. As you probably already know, PNG comes in two flavors — 8-bit and 32-bit. PNG32′s major characteristics are: It uses a flexible “JPEG-like” RGB color model, rather than a limited palette as GIF does.
Of course, Microsoft’s scant regard for the PNG spec (authored way back in 1996) meant that the announcement of the glorious PNG format fell on deaf ears. Not to be bowed, a lot of bloodyminded developers set about inventing all manner of hacks, tricks and workarounds designed to force IE to play nice. Let’s look at an example. Tutorial Magazine.