SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    Practical use for clip:

    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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    1)Just have a container with RP that is an inline element . Same thing.

    2) Images are replaced inline elements so their dimensions are intristic
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    i see..

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,368
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •