WebAppers

/ best free open source web resources /

Shopify

Creating Thumbnails Using the CSS Clip Property

Posted · Category: Capture, License Free

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. Creating Thumbnails Using the CSS Clip Property can be used to create square thumbnails, or to create other varieties of thumbnails without actually duplicating files on the server.

You can also add some drop shadow to the clipped thumbnail by using three wrapper divs with negative offsets of slightly varying background colors to create a shade effect.

css clip

Requirements: -
Demo: http://www.seifi.org/css/creating-thumbnails…
License: License Free

5 Comments
  • http://www.steinhaug.no/ Kim Steinhaug

    While this is a great look into the clip property in CSS2, it is worthless in practical use unless you need px precission on your thumbnails. The markup in the end is rather bloated, and could be solved much easier using the background property and background position.

    There might be a reason why this property is very rarely used, :) Good article though, however very nostalgic!

  • Sherri

    Doesn’t it kind of defeat the purpose of using thumbnails if you are still loading the big image into the page? Thumbnails are meant to be not only smaller in dimension, but smaller in filesize.

  • Pingback: CSSハックマニア その1 | Nutspress

  • Jared Lyvers

    I recently did a write up on this very function. I had so many friends ask how to use it and noticed most people didn’t even know about it. You can check out the full write up at my site: http://lowdownandirty.com/css-clip-function/

  • Pingback: What I’ve been reading this week (July 31/2009) // Roger Stringer

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons