CSS: clip your image or a container

Tweet

Images are a important part of a web site. We know how to correctly place images, how to resize them, but how many of you know about clipping?
An image can be absolutely placed and clipped just to fit its container... with just a line of CSS.

An example?
Well, let's see the following image:

And now we try to clip it.

Can you see what's the effect?
How does it work?

The code is very simple. Imagine you have an image. Assign  it a class named "test".
The css of the above Google image is:

{
position:absolute;
clip:rect(0px,60px,60px,0px);
}

Clip is accepting only the following syntax:

rect (top, right, bottom, left)

Another interesting fact is that we can clip even container like divs.
See the following example:

This is a clipped div

Interesting, isn't it?

The unclipped div is:

This is a clipped div

The point is: will we ever need something like that? It might be.
We can use the so-called CSS sprites and clip would be used to cut the image to the right size. Instead of having a zillion small icons, we could use just one big image which will be cut with split.
It's up to you, in the end, however if you have used sprites in your projects and you want to share your ideas, please use the comments section below.
In the meantime...