SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: clip:rect();

  1. #1
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clip:rect();

    Hello.

    I am trying to figure out how clip works.

    I'm aware that the idea of clip is to essentially "mask" a particular element with a transparent blanket; it would be a similar thing to covering up a paragraph on a piece of paper with another piece of paper on top it (only the content behind the paragraph paper gets displayed instead of the covering paper).

    So anyways, whenever I use the CSS property, I get very confused with how the (top,right,bottom,left) works.

    Lets say I have a div with width:200px; height:200px; background:red;

    If I set all the rectangle values to 0 then nothing appears.
    If I set all the rectangle values to the same value (so 50px 50px 50px 50px) nothing appears.
    If I set all the rectangle values to the max dimensions (so 200px 200px 200px 200px) NOTHING APPEARS.

    Can someone explain to me exactly what values I need to put in order to make it appear.
    I can't believe I ate the whole thing

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the div positioned? Clip is only applied to an absolute positioned element: w3.org
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The top and bottom positions are relative to the top edge of the element.
    The left and right positions are relative to the left edge of the element if the direction is left-to-right, or to the right edge of the element if the direction is right-to-left.

    Try this:
    Code:
    clip:rect(50px 150px 150px 50px);
    This should mask a 50px 'border' and reveal a red square where each side is 100px.
    Birnam wood is come to Dunsinane


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
  •