CSS clip Property
Example
Clip an image:
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
position: absolute;
clip: rect(0px,60px,200px,0px);
}
Definition and Usage
What happens if an image is larger than its containing element?
The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped.
Note: The clip property does not work if "overflow:visible".
Note: The clip property is deprecated and will be replaced by the clip-path property in the future.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. |
| Version: | CSS2 |
| JavaScript syntax: | object.style.clip="rect(0px,50px,50px,0px)" |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
- object - object in javascript means the element on which
clipis applied. - Animatable - "Animatable = yes" means that it can be animated with CSS
@keyframes.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| clip | 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
CSS Syntax
clip: auto|shape|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| auto | No clipping will be applied. This is default | |
| shape | Clips an element. The only valid value is: rect (top, right, bottom, left) | |
| initial | Sets this property to its default value. | |
| inherit | Inherits this property from its parent element. |
Comments
Post a Comment