1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

element clipping Css

Discussion in 'CSS' started by A Curry, Jun 13, 2014.

0
  1. #1
    I need to clip some content that is 20px wide by 20px high and situated in the top left corner. Now ive read this section 3x in my textbook and the only syntax they show is clip: rect(t,r,b,l) format so Im a little unsure what 20wide by 20high is. Do they just want me to use width and height properties instead of clip: rect(0,0,0,0)? Here is what I currently have:

    figure{
    background-color: rgb(70,76,222);
    color: #fff;
    width: 150px;
    position: absolute;
    z-index: 1;
    /* left: 20px;
    top: 20px;*/
    clip: rect(20px,20px);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;

    }
     
    A Curry, Jun 13, 2014 IP
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    Clip values are not defining dimension they represent the distance from the edge of the element that is to be removed. So if the image you are clipping was 200 by 150 and yo wanted just the center 20 px the values would be clip:rect(90px,65px, 90px, 65px);
     
    COBOLdinosaur, Jun 13, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    I don't get the need for "clip"... Just set the dimensions on the container and set overflow:hidden;
     
    deathshadow, Jun 14, 2014 IP
  4. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #4
    Using overflow would only work if you want the top left corner. For anything else you would have to use position with negative values to get the part of the image in the visible portion of the container. A soon as you get into setting position that way it can turn a page ugly.
     
    COBOLdinosaur, Jun 15, 2014 IP