Creating Thumbnails Using the CSS Clip Property by artoix

Seifi.org » Blog Archive » Creating Thumbnails Using the CSS Clip ...

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-proper...

Home Gallery About

A Web Development Blog by Mojo Seifi Written on May 13th, 2007 by Mojo about design, css

Creating Thumbnails Using the CSS Clip Property 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. Clippings are currently only offered in the shape of a rectangle but more shapes might be supported in the future. You can create a rectangle clipping using the rect shape. Using rect requires four coordinates Top, Right, Bottom, Left (TRBL). Let’s take a closer look at how clip calculates the clipping region since it tends to cause some confusion. Keep in mind that the bottom starts from the top, and the right starts from the left.

Example Here is a sample image we want to clip:

17.01.2008 15:12

Seifi.org » Blog Archive » Creating Thumbnails Using the CSS Clip ...

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-proper...

The CSS and HTML look like this: <div class="clipwrapper"> <div class="clip"> <img src="castle.jpg" /> </div> </div> .clipwrapper{ position:relative; height:225px; } .clip{ position:absolute; clip:rect(50px 218px 155px 82px); }

NOTE: The W3C recommendation suggests using commas between the coordinates, however this is broken in Internet Explorer. Strangely using the commas in IE does not work when in standards-compliant mode, but it does work when in quirks mode. To alleviate this issue I am not using commas which seems to work in all browsers including FireFox. and the result looks like this:

Our class (.clip) sets the clipping region using the TRBL rotation syntax. I’m using pixels lengths but you can also try other lengths or percentages here and they can be positive or negative. You can also use auto, which would skip clipping that specific edge. You can also try nested clips. The other important thing to note is that the clipping class position must be set to absolute for the clip property to work. Here, I have used a relatively positioned wrapper div to keep our image where we want. Also specifying the height of the container div keeps the next line from overlapping with the clipped areas.

17.01.2008 15:12

Seifi.org Âť Blog Archive Âť Creating Thumbnails Using the CSS Clip ...

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-proper...

Removing the clipped areas Keep in mind that the size of the clipped image doesn not change, but you may want to get rid of the clipped off areas. This is easy to do using the top and left offsets. First we have to set the width and height of the container div to the size of the clipped image. Now we just add negative offsets to the top and left of the clipped div to match the top and left settings in the clipping class. So now our new classes are like this: .clipout{ position:relative; width:136px; height:105px; } .clipin{ position:absolute; clip:rect(50px 218px 155px 82px); top:-50px; left:-82px; }

and the result look like this:

Add Some Drop Shadow Finally to add some drop shadow to the clipped thumbnail I am using three wrapper divs with negative offsets of slightly varying background colors to create a shade effect. So our final HTML and CSS look like this: <div class="shade1"><div class="shade2"><div class="shade3"> <div class="clipout"> <div class="clipin"> <img src="castle.jpg" /> </div> </div> </div></div></div> .clipout{ position:relative; width:136px; height:105px; top:-1px; left:-1px; } .clipin{ position:absolute; clip:rect(50px 218px 155px 82px); top:-50px; left:-82px; } .shade1{ width:136px; height:105px; background-color:#e8e8e8; } .shade2{ position:relative; width:136px; height:105px; background-color:#cbcbcb;

17.01.2008 15:12

Seifi.org » Blog Archive » Creating Thumbnails Using the CSS Clip ...

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-proper...

top:-2px; left:-2px; } .shade3{ position:relative; width:136px; height:105px; background-color:#a0a0a0; top:-1px; left:-1px; }

and here is the result:

The CSS3 working draft includes a crop property which is very similar to the clip property but would also crop off the area we have removed, so that the original object is actually replaced with the cropped section. As far as I can see no browsers have implemented this property as of now.

8 diggs digg it

11 Comments on “Creating Thumbnails Using the CSS Clip Property” 1. 1 From Mike on May 14, 2007 at 9:00 am But you are still requiring the user to download the entire image. All you are doing is hiding parts of it. It doesn’t make sense to use this anywhere that you could use a simple server-side thumbnail generator.

2. 2 From Mojo on May 14, 2007 at 9:24 am Mike, The case where this comes in very handy is if you already have a thumbnail that is a rectangle but you need a square thumbnail. If you have multiple pages where on one page you use square thumbs and on another page you use aspect ratio thumbs, the image is already cached on the user side, so you would actually save bandwidth and disk space. As an example, flickr actually creates and stores multiple thumbnails on the server, where as they could easily use this method to simulate the square thumbnail.

17.01.2008 15:12

Seifi.org » Blog Archive » Creating Thumbnails Using the CSS Clip ...

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-proper...

3. 3 From Thomas Thomassen on May 22, 2007 at 9:36 am I’ve used the technique Mojo decribes on my own website. For my gallery section my PHP generates a small thumbnail from my uploaded pictures. My gallery section then displays these. I vary the way these are presented by using .listview.thumbnail.small, .listview.thumbnail.medium .listview.thumbnail.large I plan to implement a javascript where each time a lsit of thumbnail is displayed the user can set desired size of thumbnails via a slider. For this the clip is key.

4. 4 From Andrew Davey on Jun 13, 2007 at 4:25 am You might notice that Facebook uses this when you add a profile picture. I assume they use a dynamically updated clip. As there seems like no other way to do this? Or is there? Either way i think the idea is a good one and will look into using it as and when i am able to.

5. 5 From Udi on Jun 27, 2007 at 1:55 am Thanks Mojo, Very good explain regarding the clip. I liked the tip how to drop the extra areas.

6. 6 From Gestire le immagini in ogni occasione | Marzia Compassi on Jul 2, 2007 at 4:51 pm [… ] ai tre che ho presentato non molto tempo fa in Gallerie di miniature non omogenee:si tratta di Creating Thumbnails Using the CSS Clip Property che, come dice il titolo, usa la propriet clip per tagliare la parte eccedente [… ]

17.01.2008 15:12

Seifi.org » Blog Archive » Creating Thumbnails Using the CSS Clip ...

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-proper...

7. 7 From vik on Aug 7, 2007 at 12:15 am I think this is a great idea! I like it! Thank for your article!

8. 8 From chromaSYNTHETIC Journal » Blog Archive » Cool Flash Effect Without Flash on Aug 8, 2007 at 11:21 am [… ] like this: clip: rect(20, 100, 100, 20). For more info on using the clip property, try this thumbnail tutorial. Luckily, while searching the Mootools forums, I came across Fx.CSS.Clip. Here’s how I [… ]

9. 9 From Fatih Hayrio lu’nun not defteri » Kutu Modeli - Görünürlük Özellikleri on Sep 6, 2007 at 8:41 am [… ] http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html [… ]

10. 10 From Jo on Dec 16, 2007 at 12:06 am Ouufff I cant believe i didn’t know this property before… Very nice

11. 11 From Richard on Dec 16, 2007 at 1:42 am @mike. Mojos function is very useful especially if you want to present a matrix of square thumbnails, and then allow a mouseover which pops up the full-size thubmnail for example. You don’t need to retreive the image from the server on the mousover