Psychotik

solucionando marrones desde 2003

Enmascarando imágenes con “Clip-path”

Pertenece a  Destacados, Tips  el 24 Diciembre
Enmascarando imágenes con clip-path

Lo primero puntualizar que no funciona en IE y Firefox está propiedad a fecha de publicación del post, así que si queréis ver el resultado es mejor que lo reviséis desde un navegador -webkit-. Clip-path es la evolución de la antigua propiedad, ya en desuso (deprecated), clip. Esta propiedad nos permite aplicarle una máscara de forma a nuestras imágenes, haciendo solo visible el área que queramos, para ello cuenta con una variedad de valores que nos permiten generar desde formas geométricas a la importación de archivos .svg para que las personalicemos al gusto (aunque el proceso es algo más complejo). Por si alguien tiene dudas, la principal diferencia con la otra propiedad css que también “enmascara”, mask, es que esta última es susceptible de afectar al canal alpha de la imagen, pudiendo jugar con la opacidad. A continuación os cuento un poco sobre dichas propiedades de clip-path y algunos ejemplos simples:

url
Nos permite importar archivos .svg (requiere insertar y definir la etiqueta ‹svg›)
polygon
Genera una máscara con forma de polígono, con los lados que necesitemos, cada lado contiene 2 valores numéricos en px o %, dichos valores nos dan las coordenadas x/y de cada punto que generamos
circle
Crea una forma circular, tiene 3 valores; alto, ancho y posición centro
ellipse
Genera una máscara elíptica, contiene 4 valores, alto y ancho separados por “at” y dos valores más que nos dan las coordenadas x/y
inset
Forma rectangular, 4 valores con el ordena habitual; arriba / derecha / abajo / izquierda

Código HTML:

‹div class=”aquí el css que utilicemos (.polygon, .circle, etc)”›
   ‹img src=”ruta_de_tu_imagen.jpg” alt=””/›
‹/div›

Polígono

div,div img{
   float:left;
   width:100%;
   height:auto;
}
.poligono{
/* Cada lado del polígono cuenta con dos valores, +y / +x para darle las coordenadas donde queremos que se coloque cada punto que generamos */
   clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
   -webkit-clip-path: polygon(20% 0%, 80% 0%, 50% 0%, 100% 100%, 0% 100%);
}

Resultado:

Clip-path-polygon

Rectángulo

.rectangulo{
   clip-path: inset(10px 20px 30px 200px);
   -webkit-clip-path: inset(10px 20px 30px 200px);
}

Resultado:

Clip-path-circle

Elipse

.elipse{
/* Aquí los valores cambian un poco, los dos primeros indican arriba y derecha, y los otros dos nos indican las coordenadas y / x */
   clip-path: ellipse(25% 40% at 40% 60%);
   -webkit-clip-path: ellipse(25% 40% at 40% 60%);
}

Resultado:

Clip-path-inset

Sobre el uso de SVG ya hablaré más adelante ya que es algo más complejo insertarlo y al ser un formato relativamente “nuevo” se merece un estudio aparte. Por supuesto podemos darle, por ejemplo, estados :hover y utilizar transition para crear una animación suave.

¡¡Ah!! Comentar que la propiedad clip-path NO funciona si la aplicamos con overflow:visible.


Volver atrás

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »