Platzi
Platzi

Suscríbete a Expert y aprende de tecnología al mejor precio anual.

Antes:$249
$209
Currency
Antes:$249
Ahorras:$40
COMIENZA AHORA
79

¡Aprende a crear máscaras de recorte con CSS!

105839Puntos

hace 4 meses

Curso de Frontend Developer 2019
Curso de Frontend Developer 2019

Curso de Frontend Developer 2019

Domina las bases de HTML y CSS. Define la arquitectura de tu código y construye un sitio web usando componentes estáticos. Maqueta las pantallas principales de tu página web. Agrega diseño responsivo y usa preprocesadores para optimizar tu código CSS. ¡Conviertete en Frontend Developer con Platzi!

Así que ya estás empezando a adquirir experiencia como Frontend Developer, ¿eh? 😉. Crear proyectos y hacer cosas increíbles sin duda han hecho que avances en ese largo camino del desarrollo web, y cada día toca aprender algo nuevo 💪.

En este punto ya te habrás dado cuenta de que aprender CSS es indispensable para el desarrollo de páginas y aplicaciones web y que es algo a lo que no debes temerle. Gracias a este lenguaje podemos estilizar nuestras páginas y darles una identidad, pero más allá de eso, CSS también nos brinda algunas herramientas para poder hacer cosas más avanzadas e increíbles.

Un ejemplo de estas herramientas es el uso de animaciones y transiciones, pero también hay una propiedad que muy pocos conocen y a la que podemos sacarle mucho provecho, esta es la propiedad clip-path.

Entendiendo la propiedad clip-path

¿Alguna vez has usado algún programa de edición de fotografía o video? Seguramente has visto que la mayoría de ellos tienen una opción para crear máscaras de recorte, que básicamente es crear alguna figura sobre algún elemento, y esta figura definirá el área visible de dicho elemento:

Máscara.png

Bien, pues justamente eso es lo que hace la propiedad clip-path, gracias a esta propiedad podemos definir diferentes puntos a lo largo de algún elemento y crear una máscara de recorte para el mismo, pero… ¿Cómo se usa? 🤔. Bien, ¡mirémoslo!

.my-element {
    clip-path: <basic-shape>
}

Simplemente debemos seleccionar el elemento al que le aplicaremos la máscara de recorte, escribimos la propiedad clip-path y ponemos alguna de las siguientes funciones que esta propiedad soporta:

  • url(): Esta función nos ayuda a referenciar alguna etiqueta <clipPath> que esté en nuestro documento HTML, esta etiqueta nos ayuda a construir una máscara de recorte, pero desde HTML.
  • circle(): Esta función nos permite crear una máscara circular, podemos definir el radio del círculo así como su posición.
  • ellipse(): Al igual que circle(), nos permite crear una máscara circular, pero con la diferencia que esta máscara puede no ser un círculo perfecto; es decir, podemos manipular el radio del círculo tanto en x como en y.
  • polygon(): Esta es probablemente una de las propiedades más interesantes, ya que nos permite crear formas personalizadas. Simplemente debemos escribir cada punto usando coordenadas separadas por comas y la propiedad irá haciendo la máscara de forma automática 😄.

Existen algunas otras funciones que no vimos aquí, pero puedes encontrarlas en la documentación de <basic-shape>, ahí también podrás profundizar en la sintaxis de las funciones que acabamos de mencionar 😉.

¡Hagamos nuestra primera máscara de recorte!

¡Genial! Sé que ya tienes ansias por empezar a crear máscaras de recorte usando CSS, y eso es lo que haremos ahora mismo, para ello usaremos alguna imagen. Puedes encontrar muchas imágenes de libre uso en Pexels.

Primero crearemos una etiqueta <img>. Para estos ejemplos estaré usando Codepen, pero tú puedes usar tu editor de código favorito con archivos HTML y CSS:

<imgsrc="https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
clip-path-1.png

Ahora con CSS vamos a darle algunos estilos para que la imagen no se vea tan grande, en mi caso, con esto debe ser suficiente:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center
}

img {
  width: 500px;
  margin-top: 50px;
}
clip-path-2.png

Para este caso simplemente reseteamos los margin y padding de todos nuestros elementos, centramos la imagen horizontalmente y le dimos un ancho de 500px con un margin-top de 50px. El resultado que tenemos hasta ahora es este, pero aún no hemos usado la propiedad clip-path… ¡Usémosla! 😈.

Probemos primero con una máscara circular, para ello vamos a poner dentro de nuestro img la propiedad clip-path con el siguiente valor:

img {
  width: 500px;
  margin-top: 50px;
  clip-path: circle(50% at 50% 50%);
}
clip-path-3.png

¡Como puedes ver, con solo esa propiedad hemos creado una máscara circular! Pero ¿por qué se ve así? Bien, la función circle() recibe como primer parámetro el radio del círculo, en este caso le pusimos un radio del 50%, pero nuestra imagen no es totalmente cuadrada, sino que es una imagen rectangular, por lo que toma como radio el 50% del ancho de la imagen, lo que provoca que el alto de la máscara sea más grande 😉.

Como segundo parámetro recibe la palabra at seguido de un par de coordenadas las cuales indican cuál es el centro de nuestra máscara. Para este caso le pusimos a ambos una coordenada del 50%, te reto a jugar con estos valores para que veas como se mueve la máscara 😄.

¡Hagamos otra prueba! Intentemos con una elipse:

img {
  width: 500px;
  margin-top: 50px;
  clip-path: ellipse(15% 40% at 50% 50%);
}
clip-path-4.png

En este caso hemos creado una elipse, como puedes ver, a diferencia de la función circle(), la función ellipse() recibe dos radios, uno es el radio en x y el otro es el radio en y. También recibe las coordenadas del centro de la elipse, así que podemos cambiar la ubicación desde la cual nuestra máscara empezará a pintarse.

Muy bien, ya hemos visto como usar las máscaras más simples, pero la función polygon() es la que nos permitirá hacer formas más locas e increíbles, ¡así que vamos allá!

¡Ahora sí viene lo chido!

Como ya te expliqué antes, la función polygon() recibe una serie de coordenadas separadas por comas de los diferentes puntos que tendrá nuestra forma personalizada… ¿Y si hacemos una estrella?.. 😏.

img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  margin-top: 50px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
clip-path-5.png

¡Hey espera! ¿De dónde salieron todos esos valores y propiedades? 😨… ¡Calma! Vamos paso a paso:

Para facilitarnos las cosas, hice que nuestra imagen sea un cuadrado perfecto, eso lo logramos poniendo el mismo width y height, pero para que nuestra imagen no se deforme nos ayudamos con la propiedad object-fit: cover;, de esa forma la imagen queda recortada en forma de cuadrado.

Ya que tenemos una imagen perfectamente cuadrada aplicamos nuestro clip-path. Quiero que veas como los valores están por pares, cada uno de ellos separados por una coma. Cada par representa una coordenada dentro de la imagen, y cada coordenada es cada punto que conformará a nuestra máscara de recorte, siendo el primero el pico de arriba de nuestra estrella.

Para que puedas visualizarlo mejor, te dejo esta imagen que muestra cada punto que está poniendo nuestra propiedad clip-path a la imagen:

clip-path-6.png

¡Hagamos otro! Hagamos esta vez una tacha:

img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  margin-top: 50px;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
clip-path-7.png

¡Genial! Como puedes ver, la lógica es la misma. Simplemente le indicamos a nuestra propiedad clip-path las coordenadas de cada punto y esta irá haciendo el dibujo correspondiente 😉:

clip-path-8.png

Ok, todo bien, pero… ¿No consideras que es muy difícil estar adivinando qué punto debe ir en qué lugar? 😩. Afortunadamente no tenemos que hacerlo, podemos usar generadores de clip-path los cuales nos ayudarán a crear las formas que queremos, ¡y algunos tienen formas predefinidas!

Un ejemplo de ellos es Clippy:

Clippy

Esta herramienta trae algunas formas predefinidas, o puedes controlar los diferentes puntos para crear tu propia forma 😉.

Consideraciones para el uso de clip-path

Ya conoces cómo funciona esta propiedad, pero debes tener en cuenta que esta es una tecnología experimental ⚠️. ¿Esto qué significa? Que básicamente no todos los navegadores tienen soporte para ella aún, te recomiendo mucho revisar la compatibilidad entre navegadores antes de usarla para un proyecto en producción.

Al día de hoy, la mayoría de los navegadores tiene soporte parcial 👇:

clip-path-10.png

Esta propiedad es útil para crear máscaras de recorte, aunque también nos puede servir para crear algunas formas complejas cuando tratamos de dibujar con CSS. ¿Se te ocurre en qué más podríamos usar esta propiedad? Déjalo en los comentarios 😉.

Como vimos a lo largo de este blogpost, la propiedad clip-path básicamente nos sirve para hacer máscaras de recorte sobre algún elemento que esté en nuestro HTML. Nosotros lo hicimos con una imagen, ¡pero podemos hacerlo con cualquier elemento! Incluso yendo más allá, podemos hacer animaciones con esta propiedad, ¿te imaginas hacer una animación que pase de una forma a otra? Esto lo podemos lograr con la propiedad animation o transition de CSS, ¿te animas a intentarlo? Aquí te dejo el enlace en mi mismo Codepen con este ejercicio:

Clip Path con animaciones

CSS tiene muchas curiosidades ocultas que te aseguro que aún no conoces, y no tienes por qué sabertelas todas, pero siempre es bueno ir descubriéndolas. Como Frontend Developer debes probar nuevas cosas, ser Frontend Developer implica mucho más que solo saber React, Vue, Angular o Svelte; implica mucho más que solo ser un experto en JavaScript, ser Frontend Developer implica saber crear cosas increíbles con HTML y CSS, implica ingeniártelas para hacer tus propios elementos y tus propios componentes.

¿Cómo te las ingeniarías para hacer elementos personalizados con HTML y CSS? ¿Cómo harías un <select> que te muestre imágenes en cada opción que se despliegue? ¿Cómo harías un submenú animado? Ser Frontend Developer implica saber ingeniártelas para lograr hacer todo esto sin necesidad de que alguien más te diga cómo hacerlo 😉. Aprende todas las bases para convertirte en Frontend Developer profesional en el Curso de Frontend Developer. Recuerda que el objetivo es desarrollar la habilidad de crear tus propios componentes con tu propia lógica usando las herramientas que aprendes cada día 😉.

También, si te gustaría un blogpost enseñándote a hacer estos componentes personalizados puedes pedirlo en los comentarios 👀.

#NuncaParesDeAprender

Curso de Frontend Developer 2019
Curso de Frontend Developer 2019

Curso de Frontend Developer 2019

Domina las bases de HTML y CSS. Define la arquitectura de tu código y construye un sitio web usando componentes estáticos. Maqueta las pantallas principales de tu página web. Agrega diseño responsivo y usa preprocesadores para optimizar tu código CSS. ¡Conviertete en Frontend Developer con Platzi!
Carlos Eduardo
Carlos Eduardo
RetaxMaster

105839Puntos

hace 4 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
3
10461Puntos

Me encantó este artículo. Me puse creativo con algo alusivo a mi emprendimiento y hobby de los Drones FPV de carreras
Captura de Pantalla 2021-05-26 a la(s) 22.25.18.png

Si les llama la atención o si quieren mejorar el clip-path se los dejo por acá:

img {
  width: 50rem;
  height: 50rem;
  margin-top: 5rem;
  object-fit: cover;
  clip-path: polygon(12% 0%, 24% 20%, 44% 36%, 48% 35%, 52% 36%, 60% 12%, 68% 4%, 88% 0%, 100% 12%, 80% 24%, 64% 44%, 65% 48%, 64% 52%, 88% 60%, 96% 68%, 100% 88%, 88% 100%, 76% 80%, 56% 64%, 52% 65%, 48% 64%, 40% 88%, 32% 96%, 12% 100%, 0% 88%, 20% 76%, 36% 56%, 35% 52%, 36% 48%, 12% 40%, 4% 32%, 0% 12%);
}

Voy a intentar animarlo para que parezca que la propela se mueve, pero me va a llevar un rato el cálculo de esas coordenadas.

Alguien sabe si hay un tool o api que calcule la rotación de coordenadas cartesianas? Me encantaría saberlo.

Si lo quieres ver te lo dejo por acá

Captura de Pantalla 2021-05-26 a la(s) 22.35.40.png
4
105839Puntos
4 meses

Wow! Te quedó genial

No te compliques tanto, simplemente encierra esa imagen en un contenedor y anima el contenedor usando un rotate, es mucho más fácil y conseguirás el mismo efecto 😉

1
1415Puntos
un mes

Un poco increíble como podemos hacer tantas cosas en este gran mundo por ejemplo con CSS

2
8647Puntos

Eres un crack amigo! El mundo del desarrollo web es tan maravilloso, vengo iniciando pero ya estoy enamorado de esto ❤️

2
15720Puntos

Habia escuchado esta propiedad antes. Pero verla en acción me ha dado ideas 🤩

Lastima que sea experimental, pero aun asi se le puede sacar provecho y ponernos creativos

2
4475Puntos

Lo único malo es que no le podemos dar sombra (box-shadow)

2
5463Puntos

Disfrute mucho con este articulo. Estare atento a leer los siguientes que hagas.

1

Muy buen artículo. Creo que, artículos sobre herramientas que podemos usar…estaría genial. Gracias.

1
10964Puntos

pudieras hacer algún post sobre las distintas formas de hacer el efecto parallax solo con CSS ???