soy Kseso y esto EsCSS

Recortes Css: las propiedades clip y clip-path y el elemento clipPath

Explicación y uso de las propiedades css clip y clip-path y el elemento SVG clipPath con ejemplos ilustrativos.

Recortes Css: las propiedades clip y clip-path y el elemento clipPath

·Por Kseso ✎ 0

Si tienes un elemento que te resulta demasiado grande y quieres usar sólo una parte del mismo Css te lo pone en bandeja con sus propiedad clip y asociada. Lo que hacen estas propiedades es recortar el elemento dejando a la vista la parte indicada, pero sin destruirlo.
Dicho de otra forma: aplica una suerte de display: none a la parte del elemento que indicamos.

Recortes en Css2.1 La propiedad clip

La propiedad clip quedó definida ya en Css2.1. Es sencilla en su comprensión y uso. Pero antes de pasar a ello conviene que tengas presente ciertas particularidades:

  1. Sólo se aplica a elementos posicionados de forma absoluta: position: absolute
  2. Sólo admite un valor clip: rect(); Esto significa que sólo realiza recortes rectangulares.
  3. Se puede decir que su soporte es universal. Todos lo navegadores lo implementan.

Explicación del valor rect() y cómo funciona

El único valor admitido es clip: rect(X, Y, Z, N);, donde cada letra es un valor numérico y su unidad (px, %, rem...). Una típica declaración sería:

img.recortada { position: absolute;/*complementado con top, left...*/ clip: rect(90px, 630px, 485px, 290px); }

Si has utilizado algún programa de diseño gráfico o edición de imágenes te resultará sencillo de comprender. Recuerda también que en css el punto 0,0 es la esquina superior izquierda y que el sentido en las propiedades resumidas como border o margin es arriba | derecha | abajo | izquierda (top | right | bottom | left).

Así que con la declaración de código de ejemplo anterior le estamos diciendo al navegador que trace una línea a 90px del borde superior de la imagen, otra a 630px de su borde izquierdo, otra a 485px del superior y la última a 290px del izquierdo y que recorte por ellas. O lo que es lo mismo, que esconda y no muestre lo que queda fuera del rectángulo formado por esas cuatro líneas guías. Tal como en el gráfico de abajo:

la propiedad css clip
Funcionamiento de la propiedad Css clip: rect();

Y eso es todo. La propiedad clip no tiene más secretos ni tampoco permite otras formas que la rectangular. Si quieres más variedad de formas tienes que irte a Css3 y combinarla con sus novedades como las rotaciones.

Algún ejemplo creativo de la propiedad clip en este blog:
Sliding figure: animando el revelado del figcaption.
Gráficos circulares (Pie Charts) en puro Css.

Propiedad clip-path y elemento SVG clipPath

En el artículo Propiedad Css Clip-path y cómo animarla [Mayo 2015] tienes ampliado este apartado, demos incluidas.

La propiedad clip-path puede aplicarse a cualquier elemento HTML o SVG, ya sean estos últimos elementos o contenedores. El valor de la propiedad puede ser cualquier elemento <clipPath> o alguna de las formas básicas definidas en las exclusiones CSS

Los elementos <clipPath> pueden ser cualquier elemento gráfico SVG y ser usados como patrón para el recorte. Los elementos gráficos en SVG son:
<rect>, <circle>, <ellipse>, <path>, <polygon>, <image> y <text>.
Estos elementos pueden ser usados individualmente o conjuntar varios de ellos a la vez. En este caso la región de corte es el resultado de todos los usados.

Supongo que te has fijado que en el texto precedente se habla del elemento <clipPath> y de la propiedad Css clip-path.

El elemento clipPath

Vamos a crear una de esas formas o elemento SVG para usarlo como forma de recorte. El marcado en el Html sería para el ejemplo:

/*La regla css*/ .img.una-clase {clip-path: url(#circulo-1);} <!--El elemento SVG en el html--> <svg> <defs> <clipPath id="circulo-1"> <circle cx="284" cy="213" r="213" /> </clipPath> </defs> </svg> <img class="una-clase" src="ruta.ext" alt="" />

Una pequeña explicación al código del elemento SVG y su contenido

  • El elemento defs: permite que su contenido sea reutilizado con posterioridad a su creación. No renderiza donde aparece en el html sino al ser llamado. En el ejemplo la llamada se hace a través de la regla css en la imagen a la que se aplica.
  • <clipPath id="circulo-1">Creación del elemento "clipPath" con un identificador único (id) para poder ser reutilizado con posterioridad
  • <circle ... Definimos la forma básica del clipPath y sus valores.

Las formas básicas y sus valores

Hay unas formas básicas que no necesitan ser declaradas como elementos clipPath en un SVG. Ya están definidas en la propiedad clip-path:

  • rectangle(<top>, <left>, <width>, <height>, <rx>, <ry>) Similar a la propiedad clip: rect(). En este caso los valores top y left corresponden al punto inicial del rectágulo (recuerda: esquina superior derecha). Los dos siguiente (width y height) definen la anchura y altura de la forma a partir del punto anterior. Los dos finales (rx y ry) son opcionales para obtener un border-radius igual en las cuatro esquinas.
  • circle(<cx>, <cy>, <r>) Define un círculo. Los dos valores iniciales son el punto central y el tercero su radio.
  • ellipse(<cx>, <cy>, <rx>, <ry>) Define una elipse con su punto central y sus radios horizontal y vertical.
  • polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>) Define un polígono en base a los puntos indicados.

La aplicación de estas formas básicas es sencilla. Tanto como sólo declarar en nuestros estilos lo siguiente:

.poligono-1 { clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...); }

O lo veo o no lo creo

Una imagen muy estrellada con clip-path: polygon()

Pero, como apuntaba anteriormente, esta propiedad puede aplicarse a cualquier elemento, no sólo imágenes. Con un poco de Css así queda una lista con scroll para indicar hacia dónde hay elementos ocultos con clip-path: url()

Créditos y autoría: El autor de estos 2 ejemplos tan estrellados es Dirk Schulze (aka @dirkschulze) en Html5Rocks. En este último enlace puedes ver más ejemplos.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso