CSS STYLES CLIPPING

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

2. 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 positionedinside of a DIV first. • The clipattribute 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! CSS Styles Clipping by Professor Al Fichera http://profal2.com

3. clipDoes 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. CSS Styles Clipping by Professor Al Fichera http://profal2.com

4. Measurement Values for clip • You could also use any other length units, or even percentage values if you wish. • A value of automeans that no clipping will occur. • Negative values for clip are permitted. • So enough of the basics, let's see how it works next. CSS Styles Clipping by Professor Al Fichera http://profal2.com

5. 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);} 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 CSS Styles Clipping by Professor Al Fichera http://profal2.com

6. Setting Up a clip From an Image • The dimensions of the image I will use in this demonstration of cliphas a width="350" and a height="306" • It will be important to know these dimensions. CSS Styles Clipping by Professor Al Fichera http://profal2.com

7. Concept: Separate the Couple • 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! CSS Styles Clipping by Professor Al Fichera http://profal2.com

8. So How Did I Do That? • 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; } CSS Styles Clipping by Professor Al Fichera http://profal2.com

9. Deconstructing His clip Coding • To be able to clip his image out of the photograph it had to be placed inside of a div and absolutelypositioned. #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. CSS Styles Clipping by Professor Al Fichera http://profal2.com

10. Deconstructing His clip Coding • Here is the important his clipcode explained. clip: rect(0px 350px 306px 190px); • Remember the image is 350px wide and 306px tall. • The 1st number 0px is how muchof the top I want to clip out, nothing. • The 2nd number 350px is the farright 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 theleft side do I want to hide, just her. 190px CSS Styles Clipping by Professor Al Fichera http://profal2.com

11. Deconstructing Her clip Coding • Here is the important his clipcode explained. clip: rect(0px 190px 306px 0px); • Remember the image is 350px wide and 306px tall. • The 1st number 0px is how muchof the top I want to clip out, nothing. • The 2nd number 190px is how far tothe 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 theleft side do I want to hide, none. 190px CSS Styles Clipping by Professor Al Fichera http://profal2.com

12. 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! CSS Styles Clipping by Professor Al Fichera http://profal2.com

13. 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 by Professor Al Fichera http://profal2.com