css styles clipping

C I S 6 7Fo u nd ati o n s fo r C re ati n g We b Pa ge s

Professor Al Fichera

CSS STYLES CLIPPING

Rev. August 25, 2010—All HTML code brought to XHTML standards.

Reference for CIS127 and CIS 137

CSS Styles Clipping by Professor Al Fichera http://profal2.com

CSS Visibility Includes clipWith CSS clip, you can control exactly which portions of a

page element are visible and which are invisible. This property works only on those elements that have

been absolutely positioned inside of a DIV first.The clip attribute can be used to mask off parts of an

image that you don't want to be seen, like that ex-boyfriend or ex-girlfriend, ex-wife or ex-husband! And you don't even have to do any Photoshop work on the image

too!

September 22, 20102


clip Does Not Affect LayoutClip affects the display of the element, but not the page

layout. So, whatever you clip still takes up room on the page.

Clip — You specify values for the, Top, Right, Bottom, and Left coordinates to "clip" off content within the AP DIV Element in the same way you'd crop an image in Fireworks or Photoshop.

September 22, 20103


Measurement Values for clipYou could also use any other length units, or even

percentage values if you wish. A value of auto means that no clipping will occur. Negative values for clip are permitted.

So enough of the basics, let's see how it works next.

September 22, 20104


clip is a Part of the Visibility TeamRemember, the clip property works only on those elements that

have been absolutely positioned inside of a div. Here is a blank template example of how to use this feature in

your Style Block:#idName{position: absolute;top: ?px; left: ?px; width: ?px; z-index: 1; clip: rect(?px ?px ?px ?px);}

September 22, 20105

Note: ?px means actual pixels used.And #idName means you pick a name for the ID.

Remember, when using a string of numbers in CSS, they read as follows: Top, Right, Bottom, and Left sides


Setting Up a clip From an Image

September 22, 20106

The dimensions of the image I will use in this demonstration of clip has a width="350" and a height="306"

It will be important to know these dimensions.


Concept: Separate the Couple

September 22, 20107

Without damaging the original image, I will only show one person at a time.

Of course youcould actuallydestroy the picture, but whatif they get backtogether again.

See I'm thinkingahead!


So How Did I Do That?

September 22, 20108

Let's take a look at his clip values.#theEXhim {position:absolute;width:350px;height:306px;z-index:3;left: 65px;top: 435px;clip: rect(0px 350px 306px 190px);visibility: visible;

}


Deconstructing His clip Coding

September 22, 20109

To be able to clip his image out of the photograph it had to be placed inside of a div and absolutely positioned.

#theEXhim {position:absolute;

I gave him an id of #theEXhim that way I'd know it was his special code.Note: The width, height, z-index, left and top portions of

the code only set up placement on the page, and not really a part of the clip.


Deconstructing His clip Coding

September 22, 201010

Here is the important his clip code explained.clip: rect(0px 350px 306px 190px);Remember the image is 350px

wide and 306px tall.The 1st number 0px is how much

of the top I want to clip out, nothing.The 2nd number 350px is the far

right side to show, everything up to it.The 3rd number is how much of the

bottom do I want to show, all of it.The 4th number is how much of the

left side do I want to hide, just her.190px


Deconstructing Her clip Coding


Here is the important his clip code explained.clip: rect(0px 190px 306px 0px);Remember the image is 350px

wide and 306px tall.The 1st number 0px is how much

of the top I want to clip out, nothing.The 2nd number 190px is how far to

the right to show, just her.The 3rd number is how much of the

bottom do I want to show, all of it.The 4th number is how much of the

left side do I want to hide, none.190px


Wrapping It Up


See wasn't that easy! What still confused?It's simple, you can hide any portion of an image you want

to by figuring out what you don't want to see.Remember the clock, CSS uses 12 the top, 3 the right, 6

the bottom, and 9 the left sides in a string of numbers.What's left well practice will bring the concept home to

you, just reading and not doing won't clear anything.Lastly, don't do what the next slide shows, EVER!


Clipping Text Not Advisable!I can't think of one good reason in the world to use clip on

a body of text, can you? This is like being brain dead!h4 { position: absolute; top:130px; left:300px; width: 150px; clip: rect(10px 200px 100px 40px); }


css styles clipping

Documents