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. Very clearly explained – I was able to implement it quite easily just from this info. Thanks!

    One question: is there any way to have an image of indeterminate width be ‘pinned’ to the right and be cropped off to the left? Can uploaded images that are a specific height but could be different widths be set to have their LEFT side clipped and have the right edge of the image always at the right-most edge of the div?
    (Doing this clipping the right/pinned to zero px on the left is simple, but…)

  2. Jacek, We looked at your plugin but don’t understand how to use it. We have pages on our site that have hundreds of images on them, and we are trying to find a way to easily make them into thumbnails, to save page load time. (example: http://www.djdeals.com/cases.htm). Would your plugin work, and where would we find the instructions?

  3. Very nice post.
    Is it possible to clip the image at an angle(say 45 degree from top) using this way?

Leave a Reply

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

Visited 75235 times, 17 so far today