CSS: uso de la propiedad clip

La propiedad clip en CSS es muy útil para recortar imágenes y en general elementos para mostrar sólo una parte y no toda como muchos pensarían. En este post vamos a platicar un poco sobre la propiedad clip y a ver ejemplos de su uso para poder conocer sobre estas reglas que en ocasiones no muchos suelen tener conocimiento y por ende se pierde la oportunidad de optimizar elementos mostrando una parte visible.

Definición
Establece la parte visible de un elemento

Valores permitidos
Uno y sólo uno de los siguientes valores:

forma geométrica, auto, inherit, Valor inicial, auto

Se aplica a
Elementos posicionados de forma absoluta

Válida en
medios visuales

Se hereda
no

Definición en el estándar
http://www.w3.org/TR/CSS21/visufx.html#propdef-clip

La caja que los navegadores crean para mostrar cada elemento de la página siempre dispone de las dimensiones adecuadas para mostrar todos sus contenidos. No obstante, si se posicionan los contenidos de la caja o si se utilizan márgenes negativos o si se establece de forma explícita su anchura y/o altura, es posible que los contenidos se salgan de su caja. El estándar de CSS define la propiedad overflow para establecer el comportamiento de los contenidos que se salen.

Por otra parte, en ocasiones el diseño de la página puede requerir que sólo se vea una parte de los contenidos de un elemento. Por ello, el estándar de CSS incluye la propiedad clip para "recortar" una caja de forma que sólo se vea una parte de sus contenidos.

Las dos principales limitaciones de la propiedad clip es que sólo se puede aplicar a los elementos posicionados de forma absoluta y sólo se pueden recortar áreas con forma rectangular.

El valor inicial de la propiedad clip es auto, que muestra la caja tal y como es originalmente, sin recortar sus contenidos. El otro valor que se puede utilizar en la propiedad clip es una forma geométrica rectangular que se define mediante la palabra reservada rect.

El clipping o recorte de una caja se realiza indicando los límites de la zona visible de la caja mediante la sintaxis rect(top, right, bottom, left). Top, right, bottom y left indican la dirección del recorte.

Si la dirección de escritura del texto del elemento, establecida con la propiedad direction, es de derecha a izquierda, la referencia de las propiedades left y right es la posición del borde derecho de la caja original.

Cada uno de los valores top, right, bottom y left se establecen mediante cualquier unidad de medida de CSS o mediante la palabra reservada auto. Los valores de las unidades de medida pueden ser negativos y la única unidad que no se puede utilizar es el porcentaje.

Los cuatro valores incluidos dentro de rect() normalmente se separan con comas, aunque el estándar también permite eliminarlas. En la práctica es casi obligatorio eliminar las comas, ya que los navegadores de tipo Internet Explorer sólo interpretan correctamente el valor de la propiedad clip cuando no se incluyen las comas y el resto de navegadores funcionan bien con y sin las comas.

Cuando se necesita un control preciso del recorte, se utiliza el píxel como unidad de medida:

elemento {
  clip: rect(10px 80px 90px 10px);
}

La regla clip: rect(10px 80px 90px 10px) se interpreta como top = 10px, right = 80px, bottom: 90px y left: 10px. Por tanto, verticalmente la zona visible empieza 10px por debajo del borde superior de la caja original y termina a 90px de distancia de ese mismo borde superior de la caja original. Horizontalmente, la zona visible empieza a 10px de distancia del borde izquierdo de la caja original y termina a 80px de distancia respecto de ese mismo borde izquierdo.

Si se quieren realizar recortes proporcionales, como por ejemplo "la mitad de la caja" o "el cuadrante superior derecho de la caja", se puede hacer uso de la palabra reservada auto.

El valor auto hace referencia a cada uno de los bordes de la caja original. Si se emplea por ejemplo el valor auto en la posición left, su valor es 0 de forma que el borde izquierdo de la zona recortada coincida con el borde izquierdo de la caja original. De la misma forma, si se emplea el valor auto en la posición right, su valor es la anchura total de la caja (incluyendo anchura de contenidos, rellenos y bordes) de tal forma que el borde derecho de la zona recortada coincida con el borde derecho de la caja original.

Las cajas recortadas pueden incluir en su interior otras cajas recortadas. En estos casos, la prioridad de los recortes es descendente, de forma que el recorte de una caja siempre afecta a los posibles recortes de sus cajas interiores.

Vía librosweb