Practical use for clip:

HTML & CSS
1

so I heard this is CSS’ most misunderstood property. I understand why.

It’s not that I dont get what id does, it seems pretty straight forward, but I dont see when it would be useful.

some of my misconceptions:

  1. thought it could lead to wasted bandwith, I thought it would be useful for cropping IMGs; isolating a single person in a group shot, etc. But since the clip property only applies to ABSOLUTELY position elements, it woudlnt work for something that NEEDS to be an inline image. \

  2. Adjusting size and over flow of an element… BUT WAIT… why not just adjust the HEIGHT/WIDTH and set OVERFLOW: hidden. doesnt that doe exactly the same thing?

  3. I would have hoped that it could be used to EXTEND something outside a contained element, when overflow is set to hidden, but it just doesnt seem to work.

so when is the clip property useful… exactly?

2

1)Just have a container with RP that is an inline element :). Same thing.

  1. Images are replaced inline elements so their dimensions are intristic
3

but Ryan…

OK, in#1 wrap the image in a RP container , float the container , use clip to crop the image… is that what youmeant?

in #2 I mean of a non img element.

4

If you use height/width/overflow then it will clip the bottom (if it’s height wise) or the right side (if it’s width wise) (if you know what I mean lol)

Clip allows you to clip different sides then what you would noramlly do with width/height/overflow (unless you purposefully used margins or whatever to move the iamge around)

  1. Yes.
5

i see… :slight_smile:

6

I do agree though it can’t really be practically used in many situations :). There are uses for it but it’s a forgotten property, even though some cool effects can be achieved with it :wink:

7

Clip is used a lot in JS for animations where you can just change the co-ordinates dynamically and have the image appear to move in any direction as required. It can of course be done by other means but is the most efficient and simplest way of doing something like that.

Clip was the answer to a quiz I posted last year and was used to produce this effect.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
.outer {
    position:relative;
    width:60&#37;;
    margin:20px auto;
    font-size:124%;
    min-width:400px;
}
p {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding:10px;
    background:#fcc;
    color:red;
    border:10px solid;
}
p.tl{
    background:red;
    color:green;
    clip:rect(0 150px 200px 0);
}
p.tr {
    background:yellow;
    color:#000;
    clip:rect(0 auto 100px 150px);
}
p.bl {
    background:blue;
    color:yellow;
    clip:rect(200px 350px auto 0);
}
p.br {
    background:teal;
    color:orange;
    clip:rect(100px auto auto 350px);
}
</style>
</head>
<body>
<div class="outer">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    <p class="tl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    <p class="tr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    <p class="bl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    <p class="br">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
</div>
</body>
</html>

It could be done by other means (overflow:hidden and absolute positioning sections into place) but clip was easier in this case and works well even for a fluid example as shown above.

There are many css properties (methods) that can do the same thing and the one you use depends on the job in hand and which is easiest and most economical.

Possibly in the future clip may be able to make shapes rather than rectangles which will be much more interesting. At present you can imitate clip in most cases by other means without much extra code so it is a bit of a wasted property in some respects.