DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
18-12-2014

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Flat Module con puro CSS

Flat Module con puro CSS

Algunos artículos que te pueden interesar

Truco para los bordes en CSS: Bordes internos

Truco para los bordes en CSS: Bordes internos

En esta entrada veremos como crear bordes que no influyan en el tamaño del contenedor; como bien sabrás al definir distintas propiedades como padding, margin y/o border éstas repercuten directamente en el tamaño del contenedor.

Andrés Cruz 13-04-2015

¿Cómo hacer rotaciones con CSS3?

¿Cómo hacer rotaciones con CSS3?

En esta entrada veremos como realizar rotaciones sobre cualquier elementos HTML empleando la propiedad transform de CSS3.

Andrés Cruz 07-08-2014

La pseudo-class :checked en CSS

La pseudo-class :checked en CSS

El selector de la pseudo-class :checked representa (permite seleccionar) a cualquier elemento HTML radio, checkbox u option.

Andrés Cruz 26-01-2015