Creating Thumbnails Using the CSS Clip Property

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

 

CSS Clip

 

<div class="clipwrapper">
    <div class="clip">
     <img src="castle.jpg" />
    </div>
</div>
.clipwrapper{
  position:relative;
  height:225px;
}
.clip{
  position:absolute;
  clip:rect(50px 218px 155px 82px);
}

 

.clipout{
  position:relative;
  width:136px;
  height:105px;
}
.clipin{
  position:absolute;
  clip:rect(50px 218px 155px 82px);
  top:-50px;
  left:-82px;
}

 

 

This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to Creating Thumbnails Using the CSS Clip Property

  1. rg443 says:

    Test Page

    /* */

    // <![CDATA[
    var crop;
    crop = function( img, div, x, y ) {
    try {
    div = (( document.getElementById ) ? document.getElementById( div ) : document.images[ div ] );
    img = (( document.getElementById ) ? document.getElementById( img ) : document.images[ img ] );
    if ( arguments.length

    Click Image!

    image1.jpg

    INSTRUCTION:

    SYNTAX—
    crop( [ img, [ div, [ x, [ y ] ] ] ] );

    The crop() function comes in 4 parameters:

    PARAMETERS —

    1. img ~ Image id
    2. div ~ Id of the element that hold’s your image.
    3. x ~ Xpos
    4. y ~ Ypos

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s