CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and CIS 137

CSS Visibility Includes clip With 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, CSS Styles Clipping by Professor Al Fichera

clip Does Not Affect Layout Clip 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, CSS Styles Clipping by Professor Al Fichera

Measurement Values for clip You 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, CSS Styles Clipping by Professor Al Fichera

clip is a Part of the Visibility Team Remember, 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, CSS Styles Clipping by Professor Al Fichera Note: ?px means actual pixels used. And #idName means you pick a name for the ID. 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, 2010 CSS Styles Clipping by Professor Al Fichera 6 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, 2010 CSS Styles Clipping by Professor Al Fichera 7 Without damaging the original image, I will only show one person at a time. Of course you could actually destroy the picture, but what if they get back together again. See I'm thinking ahead!

So How Did I Do That? September 22, 2010 CSS Styles Clipping by Professor Al Fichera 8 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, 2010 CSS Styles Clipping by Professor Al Fichera 9 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, 2010 CSS Styles Clipping by Professor Al Fichera 10 Here is the important his clip code explained. clip: rect(0px 350px 306px 190px); Remember the image is 350px wide and 306px tall. The 1 st number 0px is how much of the top I want to clip out, nothing. The 2 nd number 350px is the far right side to show, everything up to it. The 3 rd number is how much of the bottom do I want to show, all of it. The 4 th number is how much of the left side do I want to hide, just her. 190px

Deconstructing Her clip Coding September 22, 2010 CSS Styles Clipping by Professor Al Fichera 11 Here is the important his clip code explained. clip: rect(0px 190px 306px 0px); Remember the image is 350px wide and 306px tall. The 1 st number 0px is how much of the top I want to clip out, nothing. The 2 nd number 190px is how far to the right to show, just her. The 3 rd number is how much of the bottom do I want to show, all of it. The 4 th number is how much of the left side do I want to hide, none. 190px

Wrapping It Up September 22, 2010 CSS Styles Clipping by Professor Al Fichera 12 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); } September 22, CSS Styles Clipping by Professor Al Fichera