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.

Visited 49373 times, 32 so far today

69 Comments on “Creating Thumbnails Using the CSS Clip Property”

  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. 4

    From Andrew Davey

    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. Thanks Mojo, Very good explain regarding the clip.
    I liked the tip how to drop the extra areas.

  6. [...] 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 [...]

  7. I think this is a great idea! I like it! Thank for your article!

  8. [...] 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. Ouufff I cant believe i didn’t know this property before…

    Very nice

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

  11. Very cool, i did not know this property.

  12. This guide is actually only usable Clip guide I’ve found!

    Thanks for sharing!

  13. [...] [...]

  14. [...] December 22, 2008 I need to size and crop an image into a square thumbnail using CSS  http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html [...]

  15. This is excellent. Thank you and nice job!

  16. [...] Seifi.org does a nice write up on using clip to create thumbnails. Have a read! [...]

  17. 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.

  18. 19

    From Bucksuper

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

    Awesome Job!!!

  19. [...] Creare thumbnail grazie alla proprrietà clip [...]

  20. 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….

  21. Great post. Thanks very much, guy

    Keep it up.

  22. [...] Creating Thumbnails Using the CSS Clip Propertyseifi.org [...]

  23. 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.

  24. [...] Creating Thumbnails Using the CSS Clip Property Interesting use of CSS Clip property (tags: design webdesign tutorial development webdev gallery resize crop) [...]

  25. 26

    From nonbreakingspace

    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 :(

  26. [...] Tools To Create Wi… 60+ Vintage Style Textures Every Designer Should Have – Web Design Creating Thumbnails Using the CSS Clip Property 40 Sexy And Creative Typographic Logo Designs Spyre Studios Advanced jQuery Photojojo How to Make [...]

  27. wow, this is a really wonderful tutorial. very helpful.

    thanks

  28. Thanks. had completely forgotten about it. Good for pages where you are not using many thumbnails.

    vicki pandit | User Interface
    http://twitter.com/merlinvicki

  29. 30

    From cjlambre

    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.

  30. [...] Creating Thumbnails Using the CSS Clip Property (tags: css xhtml images html javascript tutorial) [...]

  31. 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>

  32. [...] me he encontrado con este artículo (que creo es un poco antiguo) en el que nos muestran como crear miniaturas con CSS, concretamente [...]

  33. [...] me he encontrado con este artículo (que creo es un poco antiguo) en el que nos muestran como crear miniaturas con CSS, concretamente [...]

  34. great article, thanks ;)

  35. Is this a css 3 feature, because it isn’t working for me.

    this is my html:

    this is my css:

    .clipwrapper { position: relative; height:314px; }
    .clip { position: absolute; clip: 50px 118px 55px 82px; }

    this is the page:

    http://martyandbeth.com/tutorials/css/

  36. [...] is useful for clipping images and creating thumbnails without having to create additional files. Creating Thumbnails Using the CSS Clip Property can be used to create square thumbnails, or to create other varieties of thumbnails without [...]

  37. [...] Creating Thumbnails Using the CSS Clip Property [...]

  38. [...] Mas detalles: Seifi.org [...]

  39. [...] for writing images as well as formulating thumbnails but carrying to emanate one more files. Creating Thumbnails Using a CSS Clip Property can be used to emanate block thumbnails, or to emanate alternative varieties of thumbnails but [...]

  40. [...] me he encontrado con este artículo (que creo es un poco antiguo) en el que nos muestran como crear miniaturas con CSS, concretamente [...]

  41. [...] Creating Thumbnails Using the CSS Clip Property Como hacer crop a una foto con la propiedad clip de CSS (tags: css howto tutorial clip crop photos pictures) Otros artículoslinks for 2009-07-31links for 2009-04-30links for 2009-01-06links for 2009-05-31links for 2009-01-20 [...]

  42. [...] Tutorial CSS Clip pentru decuparea imaginilor cu CSS – foarte util Tutorial – Margini rotunde cu CSS3 Harta Clujului pentru iPhone Apple tablet se lanseaza in septembrie The Expendables (2010) – interesanta distributia filmului: Stallone, Jet Li, Schwarzenegger, Jason Statham, Burce Willis etc [...]

  43. [...] Creating Thumbnails Using the CSS Clip PropertyThe clip property in CSS 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 kinds of thumbnails without actually duplicating files on the server. Here is the rundown. [...]

  44. [...] Creating Thumbnails Using the CSS Clip Property The clip property in CSS 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 kinds of thumbnails without actually duplicating files on the server. Here is the rundown. [...]

  45. [...] Creating Thumbnails Using the CSS Clip PropertyThe clip property in CSS 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 kinds of thumbnails without actually duplicating files on the server. Here is the rundown. [...]

  46. [...] Creating Thumbnails Using the CSS Clip PropertyThe clip property in CSS 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 kinds of thumbnails without actually duplicating files on the server. Here is the rundown. [...]

  47. [...] Creating Thumbnails Using the CSS Clip PropertyThe clip property in CSS 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 kinds of thumbnails without actually duplicating files on the server. Here is the rundown. [...]

  48. [...] Creating Thumbnails Using the CSS Clip PropertyThe clip property in CSS 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 kinds of thumbnails without actually duplicating files on the server. Here is the rundown. [...]

  49. This is a great post! A technique perfectly communicated! Thanks a lot! :-)

  50. [...] Creating Thumbnails Using the CSS Clip PropertyThe clip property in CSS 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 kinds of thumbnails without actually duplicating files on the server. Here is the rundown. [...]

  51. [...] Creating Thumbnails Using the CSS Clip PropertyThe clip property in CSS 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 kinds of thumbnails without actually duplicating files on the server. Here is the rundown. [...]

  52. [...] Creating Thumbnails Using the CSS Clip PropertyThe clip property in CSS 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 kinds of thumbnails without actually duplicating files on the server. Here is the rundown. [...]

  53. [...] It is useful for clipping images and creating thumbnails without having to create additional files. Creating Thumbnails Using the CSS Clip Property can be used to create square thumbnails, or to create other varieties of thumbnails without [...]

  54. [...] Creating Thumbnails Using the CSS Clip Property The clip property in CSS 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 kinds of thumbnails without actually duplicating files on the server. Here is the rundown. [...]

  55. [...] Creating Thumbnails Using the CSS Clip Property  [...]

  56. Tesekkürler, Thanks, Dankjewel, Vielen dank, bla

  57. 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…)

  58. This is wat i need… tnx

  59. Here’s a jQuery plugin that is based on this post, enjoy:

    http://github.com/ncr/jquery.sqrop

  60. 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?

  61. [...] Creating Thumbnails Using the CSS Clip Property on sefi.org [...]

  62. [...] It is useful for clipping images and creating thumbnails without having to create additional files. Creating Thumbnails Using the CSS Clip Property can be used to create square thumbnails, or to create other varieties of thumbnails without [...]

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

  64. [...] Creating Thumbnails Using the CSS Clip Property The clip [...]

  65. [...] Creating Thumbnails Using the CSS Clip Property The clip property in CSS 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 kinds of thumbnails without actually duplicating files on the server. Here is the rundown. [...]

  66. [...] is useful for clipping images and creating thumbnails without having to create additional files. Creating Thumbnails Using the CSS Clip Property can be used to create square thumbnails, or to create other varieties of thumbnails without [...]

Leave a Reply