Stripes con CSS Custom Properties

Las stripes son esas franjitas tan bonitas que podemos ver en muchos sitios en la calle, a menudo en carteles pero también en lugares cotidianos.

Stripes por todos lados

El cómo hacer esto con CSS no es complicado, vamos a hacer uso de los gradientes, pero lo que veo realmente útil es la simplificación y reutilización de estos con las variables nativas de CSS, más conocidas como CSS Custom Properties.

Empecemos

Para crear un box con stripes dentro, es tan simple como generar un div con ancho y alto (le damos ancho y alto ya que no tiene contenido, si lo tuviera no sería necesario):

Nuestro contenedor de stripes inicial

Luego, para crear los stripes es tan simple como generar un linear-gradient que se repita:

Habemus stripes!

No me voy a explayar demasiado en qué valores se pueden asignar a un repeating-linear-gradient pero en este caso primero indicamos la inclinación que queremos que tenga nuestro gradiente, luego le decimos el color principal (o color inicial en todo caso) y los puntos de corte que queremos.

En nuestro ejemplo:

  • que empiece con el color negro a los 0px y siga con el mismo color hasta los 15px
  • a partir de esos 15px y hasta los 30px le asignamos el color amarillo
  • …esto se repite todo el tiempo completando los stripes.

Y esto es todo para montar nuestros stripes. Ahora bien. Y si queremos tener unos stripes que sean más finos por ejemplo? o queremos que tengan otros colores? Aplicando la metodología BEM podríamos tener algo así:

Las stripes y sus modificadores

Pero hacer esto implica repetir en cada modificador las mismas propiedades pero con distintos valores. Ahí es donde entran en juego las CSS Custom Properties.

Refactorización con CSS Custom Properties

Lo primero que haremos será definir las variables que utilizaremos y que luego serán modificadas según cada caso.

Con esto ya tenemos nuestras variables listas para usar. En la definición de las variables estamos poniendo como valores, los valores que serán por defecto. Lo siguiente que haremos será usar esas variables en nuestro primer stripe.

Obteniendo el mismo resultado que antes:

Nuestro stripe, ahora con CSS Custom Properties

Y a partir de aquí todo es mucho más simple.
Ahora crearemos nuestros modificadores, pero lo único que tendremos que escribir serán los nuevos valores de estas variables.

Así, en el caso de nuestro stripe con franjas finas:

Y en nuestro stripe rojo y blanco:

Y listo! Nuestro código final será

Nuestros stripes refactorizados con CSS Custom Properties

Les dejo también el ejercicio completo en Codepen

Conclusión

Al final, lo bueno de las CSS Custom Properties es que sólo definimos las variables que vamos a reutilizar y luego tenemos que simplemente llamarlas y modificarlas, sin necesidad de reescribir una y otra vez todas las propiedades que las usan.

Gracias por tomarte el tiempo en leer, cualquier feedback será bienvenido :)
Nos vemos por ahí.

Ale
https://alejandronarvaja.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store