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.

CSS Clip

Example

Here is a sample image we want to clip:
Castle

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:

CSS Clip

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.

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:

CSS Clip

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;
  top:-2px;
  left:-2px;
}
.shade3{
  position:relative;
  width:136px;
  height:105px;
  background-color:#a0a0a0;
  top:-1px;
  left:-1px;
}

and here is the result:

CSS Clip

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.

69 Comments

  1. 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. 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.
    sqarethumb

  3. 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. 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. @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

  6. I still wonder what this property is good for. By the markup you used, you could have get the exact same effect by a combination of overflow:hidden with width and hight on the outer element and position:absolute on the inner element.

    I assume its the hope for more shapes than rect that makes the difference.

  7. I really can’t see how anyone would complain about this tutorial. It’s very sick and I really appreciate it!

    Awesome Job!!!

  8. Good Article, But this clip function cannot be called as the thumbnail creation, but used only for cropping of the original images, as thumbnail images are the small version of the original image, and not the cropped ones…cause while cropping some portion of the image may be cut from the images, whereas in thumbnail the entire image is seen but in miniature form…take the above image as an example, the green garden at the left and right side has been cut off entirely….

  9. This may be useful for me. I have several corporate logos to display as content images rather than background images. I was wondering if there was a “css sprite method” that would be useful, and this might work. Thanks.

  10. An alternative, that I find supported in more browsers is simply using the normal CSS Clipping style, you’ve even got the same markup (though perhaps i’d change the second div for a span)

    -also your post captcha doesn’t work with javascript disabled 🙁

  11. It’s a very interesting tutorial; great information and useful documentation of a CSS property I would not have otherwise thought of or considered. But it also seems like you have to be careful in it’s use. I don’t think it would work well for creating thumbnails of photos of people, for example. Because you’re clipping and not actually shrinking the original image to create the thumbnail, a photo of a person’s face might clip to a thumbnail of their left nostril.

  12. Hmm, lat post cut off. Gonna Try again.

    After reading over this tutorial one of my colleges mentioned to just set the image as a background and then use positioning to get the same effect. The while reading the comments I noticed that one comment mentioned that you could simply use the overflow:hidden to get the same effect. Another comment mentioned this would only work for images that were not of peoples faces.

    Using the clip property is one of those that needs to be used with thought. I have found that the best solution for using the clip property is as follows:

    I use the PHP function getimagesize() to find the width and height of each image being loaded. You can then reduce that by 50%. This will allow you to place the image at a reduced size thus reducing the risk of only showing part of a fingernail or a nostril. Once you have done that you can add in an anchor tag that surrounds the .clipin div so you can use the hover tag to show the full reduced view of the image on rollover. This will also allow you to add in a thickBox statement to preview the full sized image that has already been loaded into cache thus reducing overall hits back to the server.

    The new code is as follows:
    .clipout{
    position:relative;
    width:136px;
    height:105px;
    top:-1px;
    left:-1px;
    }
    .clipin{
    position:absolute;
    clip:rect(50px 218px 155px 82px);
    top:-50px;
    left:-82px;
    z-index:50 !important;
    }
    a:hover .clipin{
    position:absolute;
    clip:rect(auto, auto, auto, auto);
    top:0px;
    left:0px;
    z-index:100 !important;
    }
    img{
    border:none;
    outline:none;
    }

    <?php
    // get width and height and dump into $img array
    $img = getimagesize(“imgName.jpg”);
    // reduce the width and height of each image
    $reducedWidth = round($img[0]/1.4);
    $reducedHeight = round($img[1]/1.4);
    ?>

    <div class=”clipout”>
    <a href=”#”>
    <div class=”clipin”>
    <img src=”imgName.jpg” width=”<?php echo $reducedWidth;?>” height=”<?php echo $reducedHeight;?>” />
    </div>
    </a>
    </div>

Leave a Reply

Your email address will not be published. Required fields are marked *

Visited 80008 times, 19 so far today