Cascading Style Sheets/Clipping

Clip Property Top/Left Coordinates

The top and left parameters of the clip property remove any pixels with coordinates above or before the specified values, based on the top and left edges of the element.

Clip Property Bottom/Right Coordinates

  • The bottom and right parameters remove any pixels located below or after the specified values, based on the top and left edges of the element.
  • The values for bottom and right must be higher than the values of top and left in order to see any of the layer.

Clip Property Limitations

  • The clipped element must be absolutely positioned for the clip property to work, so use a relatively positioned container around it.
  • Specifying the height of the container keeps the next line from overlapping with the clipped areas.

Clip Property Usage

Use clip: rect(0, auto, auto, 0); as the default clip values to do proper trial and error

Use clip: rect(0, ###, auto, 0); to clip from left-to-right

Use clip: rect(0, auto, ###, 0); to clip from top-to-bottom

Using the Clip Property to create a File Upload Button Replacement Solution

Use clipping, opacity and z-index to style file inputs by transparently positioning the field over an image:

 input[type="file"] { outline: none; cursor: pointer; position: absolute; left: 0; clip: rect(0px 215px 22px 145px); z-index: 2; opacity: 0; }

Use separate styles for Webkit browsers since the file input is rendered differently:

* > /**/ input[type="file"], x:-webkit-any-link { outline: none; cursor: pointer; position: absolute; left: 0; clip: rect(0px 86px 22px 0px); z-index: 2; opacity: 0; }

  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.


Cascading_Style_Sheets/Clipping
 

Manage research, learning and skills at IT1me. Create an account using LinkedIn to manage and organize your IT knowledge. IT1me works like a shopping cart for information -- helping you to save, discuss and share.


  Contact Us  |  About IT1me.com |  IT Training & References |  IT Careers |  IT Hardware |  IT Software |  IT Books