clip
Establece la parte visible del objeto posicionado.
Sintaxis
{ clip: sClip }
Valores posibles
sClip
Cadena que especifica o recibe uno de los valores siguientes:
auto |
Valor predeterminado. Recorta para exponer el objeto completo. |
rect (top right bottom left) |
Los valores top, right, bottom y left especifican valores de longitud, cualquiera de los cuales se puede reemplazar por auto, con lo que no se recorta dicho lado. El valor top especifica que se recorta todo lo que haya por encima de este valor en el eje Y (con 0 en la parte superior). El valor right especifica que se recorta todo lo que haya por encima de este valor en el eje X (con 0 a la izquierda). El valor bottom especifica que se recorta todo lo que haya por debajo de este valor en el eje Y (con 0 en la parte superior). El valor left especifica que se recorta todo lo que haya a la izquierda de este valor en el eje X (con 0 a la izquierda). |
Esta propiedad tiene el valor predeterminado auto. No se hereda.
Observaciones
Esta propiedad define la forma y tamaño del objeto posicionado que está visible. La posición debe establecerse en absoluta. Cualquier parte del objeto que esté fuera del área de recorte es transparente. Cualquier coordenada se puede reemplazar por el valor auto, que expone el lado respectivo (es decir, el lado no se recorta).
El orden de los valores clip:rect(0 0 50 50) representa el objeto como invisible porque establece las posiciones superior y derecha del área de recorte en 0. Para obtener una ventanilla de 50 por 50, use clip:rect(0 50 50 0).
La propiedad clip está disponible en el sistema operativo Macintosh, a partir de Microsoft Internet Explorer 5.
Ejemplos
En el siguiente ejemplo se muestra cómo usar un estilo en línea para recortar la imagen:
<html>
<body>
<div style="position: absolute; top: 0; left: 200; clip: rect(15px auto auto auto);">
<img src="sphere.jpg"/>
</div>
<div style="position: absolute; top: 0; left: 300; clip: rect(auto 15px auto auto);">
<img src="sphere.jpg"/>
</div>
<div style="position: absolute; top: 0; left: 400; clip: rect(auto auto 15px auto);">
<img src="sphere.jpg"/>
</div>
<div style="position: absolute; top: 0; left: 500; clip: rect(auto auto auto 15px);">
<img src="sphere.jpg"/>
</div>
</body>
</html>
Información sobre estándares
Esta propiedad se define en la especificación Cascading Style Sheets (CSS), Level 2 (CSS2) (Hojas de estilos en cascada (CSS), nivel 2 (CSS2)).
Aplicable a
A, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, CUSTOM, DD, DEFAULTS, DFN, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, HN, HR, I, IFRAME, IMG, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, LI, OBJECT, OL, P, RUBY, S, SELECT, SPAN, SUB, TABLE, TD, TH, TR, TT, U, UL, VAR, XMP