Recortes Css: las propiedades clip y clip-path y el elemento clipPath 4.4.13
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
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:
- Sólo se aplica a elementos posicionados de forma absoluta: position: absolute
- Sólo admite un valor clip: rect(); Esto significa que sólo realiza recortes rectangulares.
- 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:
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.
Kseso
the obCSServer ᛯ 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 Kseso