Understandng The CSS Clip Property

February 17th, 2009 by Nikhil

Why do I want to understand this??? … Humm!!!!

Most of CSS writers would agree that CSS Clip property is probably one of most un-used CSS properties. It was so true for me too and was most happy to neglect it , until I started modifying the MOOTOOLS TWO Knob (Pin) Slider Component(with Range Indicator).

There was a good suggestion from one of the component users to modify the Slider Component using clipped backgroud images( against a variable width division) to indicate the slider range. Thus came my time to enter the fun but un-chartered (for me ofcourse) waters of the CSS Clip property.

Well! how difficult it can be? Not much at all …YES and NO. The syntax to use the CSS Clip property is pretty upright but the meaning/usuage is a bit croocked. With a memory like mine, everytime I sit to rework on my Slider Script… I have tokeep referring back to usage of this CLIP property , to remind myself the logic that I have created in my script …. HENCE! thought to pen it down, with a hope to remember it the future ( and also for the benefit of those who seem boggled by the CSS Clip Property)

What does CSS Clip do?

Clip is part of the visual effects module of CSS 2.1 . Simply put, its job is to place a visible window on top of an object that is being clipped , hence clipping images and creating thumbnails without having to create additional files( I have already put this feature to better use in the Slider Component 🙂 )

Using the CSS Clip property, you can create a clipping using the rect shape. Like many other CSS Properties (like margin, padding etc),using rect requires four coordinates Top, Right, Bottom, Left (TRBL). The croocked nature of this property reflects when you take a closer look at how clip calculates the clipping region , using these four coordinates (sends brain into a toss for a while). Now to confuse you the bottom starts from the top, and the right starts from the left. :). You see what i said? …. Hence this post …

This little confusion can easily disappear , with this visual explanation of the CSS Clip/rect property as below!!!!

CSS Clip Requirements

The task we have started is to clip the following Thumbnail image into a squarer looking image (and also a wide-angle image)

original_image  clip_demo
Original Thumbnal/Image Clip Requirements for Sqaure Thumbmail

 

CSS Clip Results

clip_results

View Demo  |  Download sourcefiles

Tags: , , , ,


get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter


One Response to “Understandng The CSS Clip Property”

  1. Expressing IT » Blog Archive » Adding DropShadow To Images Using CSS Says:

    […] Expressing IT Just another, but serious developers weblog « Understandng The CSS Clip Property […]


Leave a Reply

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter