La propiedad clip-path en CSS para seleccionar regiones a mostrar en elementos

- Andrés Cruz

La propiedad clip-path en CSS para seleccionar regiones a mostrar en elementos

La propiedad clip-path de CSS permite especificar regiones a cualquiera de los elementos existentes en HTML a través de formas geométricas como círculos, elipses, cuadrados, rectángulos y polígonos:

juegos de tronos personajes seccionado con clip path

Una vez seleccionadas estas regiones, se procede a renderizarse según las formas seleccionadas:

sección juegos de tronos clip path

A continuación, se presenta la tabla de contenido para este artículo en donde daremos los primeros pasos con los clip-path de CSS:

  1. Seleccionando y renderizando la región de interés a través de los atributos
  2. Ejemplos de imágenes con la propiedad clip-path
    1. Definiendo rectángulos con la propiedad clip-path
    2. Definiendo círculos con la propiedad clip-path
    3. Definiendo elipse con la propiedad clip-path
    4. Definiendo polígonos con la propiedad clip-path
  3. Animaciones con la propiedad clip-path
    1. clip-path y animación
    2. clip-path, hover y animación

1.0 Seleccionando y renderizando la región de interés a través de los atributos

Existen varios valores que podemos usar para seleccionar regiones de interés de los elementos HTML; lo cual permite adaptarse fácilmente a las necesidades que tengamos:

circle(<cx>, <cy>, <r>)
ellipse(<cx>, <cy>, <rx>, <ry>)
inset(<x1>, <y1>, <x2>, <y2>)
polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>)

En donde:

<cx> y <cy> Centro de la coordenada "x" y de la coordenada "y" respectivamente
<rx> y <ry> Radio de la coordenada "x" y de la coordenada "y" respectivamente
<x> y <y> Coordenada "x" y "y" respectivamente

2.0 Ejemplos de imágenes con la propiedad clip-path

En esta sección veremos algunos ejemplos prácticos de cómo funciona la propiedad clip-path, para ello usaremos la siguiente imagen referencial:

juegos de tronos personajes

Se usarán los prefijos -webkit- y -moz- para mantener la compatibilidad con la mayoría de los navegadores.

2.1 Definiendo rectángulos con la propiedad clip-path

Es posible seleccionar una sección rectangular de la imagen con el valor polygon establecido como valor a la propiedad clip-path en donde definiremos cuatro puntos con sus coordenadas "x" y "y" (un punto para cada una de las esquinas):

El CSS

    clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%); 

Al establecer el CSS anterior obtenemos el siguiente resultado:

juegos de tronos personajes

Un comportamiento similar se puede obtener con el valor inset; al establecer sus cuatros parámetros:

    clip-path: inset(10% 12% 14% 16%);
juegos de tronos personajes

2.2 Definiendo círculos con la propiedad clip-path

Ahora supongamos que deseamos seleccionar algún participante de la serie a través de una circunferencia empleando el valor circle de la propiedad clip-path podemos realizar esa tarea:

El CSS

    clip-path: circle(48%, 78%, 57px);
juegos de tronos personajes

2.3 Definiendo elipses con la propiedad clip-path

Ahora seleccionaremos la parte superior de la imagen empleando el valor ellipse de la propiedad clip-path:

El CSS

    clip-path: ellipse(50%, 30%, 50%,28%); 
juegos de tronos personajes

2.4 Definiendo polígonos con la propiedad clip-path

Podemos crear polígonos tan complejos como deseemos agregando tantos puntos ("x" y "y") como vértices deseemos que tenga el polígono:

El CSS

    clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
juegos de tronos personajes

3.0 Animaciones con la propiedad clip-path

También podemos emplear la propiedad clip-path en conjunto con otras propiedades de CSS como animation:

3.1 clip-path y animación

El CSS

	img.animacion1{
	  clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%);
	  animation: animation-clip-path 3s infinite;
              opacity:0.5;
	}

	@keyframes animation-clip-path {
	    from { clip-path: polygon(35% 57%, 41% 57%, 44% 100%, 35% 100%); opacity:0.5;}
	    to { clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%); opacity:1;
	}
juegos de tronos personajes

3.2 clip-path, hover y animación

Y por supuestos podemos usar la pseudo class hover en el proceso; intenta posicionar el cursor encima de la siguiente imagen:

El CSS

	img.animacion2{
		clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%); 
	}
	img.animacion2:hover{
		clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%); /*personajes*/
		animation: animation-clip-path-hover 2s infinite;
	}

	@keyframes animation-clip-path-hover {
	  0% {
	    clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%); /*personajes*/
	  }
	  50% {
	    clip-path:polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
	  }
	  100% {
	    clip-path: polygon(0% 57%, 100% 57%, 100% 100%, 0% 100%); /*personajes*/
	  }
	}
juegos de tronos personajes

Posiciona el cursor encima de la imagen.

Puedes visualizar y descargar todos los ejemplos dados hasta ahora en los siguientes enlaces:

Ademas les dejo la tabla que muestra la compatibilidad con los navegadores en el siguiente enlace.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.