"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Usar gradientes CSS como patrones

Recientemente he visto que varias personas estan usando los gradientes CSS como patrones.
Es decir en vez de usar una imagen (en el formato que sea) como background en las páginas, usan un gradiente de css.

La técnica es bastante sencilla de explicar, aunque me parece que aplicarla requiere de un trabajo de diseño y programación algo más avanzado, sobretodo cuando los patrones son ya bastante complejos.

Básicamente lo que hacen es definir un color de base con la propiedad background-color y después definir por encima el patrón usando reglas como linear-gradient, radial-gradient o repeating-linear-gradient sobre background-image.

Es en este punto donde usan los gradientes donde veo la verdadera complejidad de esta tarea, sin embargo los resultados son estupendos y tiene grandes ventajas sobre el uso de imágenes de fondo.

Sin ser un experto en este tema os explico los pros y los contras que veo.

Compatibilidad

Mientras que el uso de imágenes de fondo es valido en cualquier navegador, las reglas de CSS relativas a repetir gradientes son más modernas aunque están implementadas en todos los navegadores actuales.

Sin embargo si que existen navegadores que no lo soportan como Internet Explorer 9 y anteriores, dependiendo de si para ti es un requisito dar soporte a estos navegadores podrás usarlos o no.

Velocidad

El tener que importar un recurso a nuestra web siempre es más lento, incluso aunque se trate de un archivo pequeño como suelen ser los patrones, ya que el solo hecho de realizar una llamada es lo que nos penaliza.

Por otra parte puedes incrustar la imagen en base64 dentro de la propia hoja de estilos y evitar la llamada pero incluso de esta manera sería más lento y estaríamos subiendo el peso del archivo notablemente.

Mantenimiento

El mantenimiento de las imágenes es muy superior al del uso de los gradientes.

Por ejemplo si ahora resulta que queremos cambiar el color del fondo o el color de un elemento de nuestro patrón, esto implica:

  • Regenerar la imagen y para ello tener que editarla (algo que puede ser dificil y además quedar mal).
  • Si además la imagen esta incrustada a mayores hay que codificarla antes de editar el fichero CSS.
  • Si además tenemos varias imágenes según para que dispositivo, algo que hacemos para que se visualice correctamente en aquellos dispositivos que tienen pantallas con el doble o el triple de resolución (por ejemplo las pantallas retina de los ipads), el trabajo se multiplica.

Sin embargo cuando usamos gradientes CSS este proceso es tan sencillo como cambiar el parametro de color en la hoja de estilos.

Y al igual que los colores el resto, si nuestro esquema es un punteado, y hay que hacer los puntos mas o menos gruesos, la labor de edición de las imágenes es una autentica locura mientras que con los gradientes se resulve modificando un simple atributo.

Para ver un ejemplo funcionando os dejo el trabajo de algunos desarrolladores.

See the Pen CSS Patterns by Wally (@CWEI) on CodePen.

See the Pen CSS Pattern Gradients by Felix Rilling (@FelixRilling) on CodePen.

See the Pen CSS Pattern Examples by Octavector (@Octavector) on CodePen.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)