Patrones de fondo creativos que utilizan degradados, formas CSS e incluso emojis

Puedes crear rayas en CSS. Eso es todo en lo que pensé en términos de patrones de fondo CSS durante mucho tiempo. Las rayas no tienen nada de malo; Las rayas son geniales. Se pueden personalizar en bandas anchas y estrechas, entrecruzarlas en un patrón de cuadros y jugar con ellas de otras maneras usando la idea de paradas duras. Pero las rayas también pueden resultar aburridas. Demasiado convencional, pasado de moda y, a veces, incluso desagradable.

Afortunadamente, podemos evocar muchos más patrones de fondo de los que puedas imaginar con CSS, con un código similar en espíritu a las rayas.

Los patrones de fondo son imágenes repetidas sobre un fondo. Se pueden hacer referencia a una imagen externa, como un archivo PNG, o se pueden dibujar con CSS, lo que tradicionalmente se hace usando CSS degradados.

Los degradados lineales (y los degradados lineales repetidos), por ejemplo, se utilizan normalmente para las rayas. Pero hay otras formas de crear patrones de fondo interesantes. Veamos cómo podemos usar degradados de otras maneras y agregar otras cosas, como formas CSS y emoji, para darle vida a las cosas.

Patrones de degradado

Hay tres tipos de degradados CSS.

1. linear-gradient(): Los colores fluyen de izquierda a derecha, de arriba a abajo o en cualquier ángulo que elija en una sola dirección.
2. radial-gradient(): Los colores comienzan en un solo punto y emanan hacia afuera
3. conic-gradient(): Similar en concepto a los degradados radiales, pero las paradas de color se colocan alrededor del círculo en lugar de emanar del punto central.

Recomiendo revisar la sintaxis de todos los degradados para comprender a fondo cómo comenzar y finalizar un color en un degradado.

Patrones de gradiente radial

Veamos primero los gradientes radiales porque nos brindan cosas muy útiles: círculos y elipses . ¡Ambos se pueden usar para patrones que son muy interesantes y podrían desbloquear algunas ideas para ti!

background: radial-gradient(gradient values)

Aquí hay un patrón para repetir sandías usando esta técnica:

background: radial-gradient(circle at 25px 9px, black 2px, transparent 2px), radial-gradient(circle at 49px 28px, black 2px, transparent 2px), radial-gradient(circle at 38px 1px, black 2px, transparent 2px), radial-gradient(circle at 20px 4px, black 2px, transparent 2px), radial-gradient(circle at 80px 4px, black 2px, transparent 2px), radial-gradient(circle at 50px 10px, black 2px, transparent 2px), radial-gradient(circle at 60px 16px, black 2px, transparent 2px), radial-gradient(circle at 70px 16px, black 2px, transparent 2px), radial-gradient(ellipse at 50px 0, red 33px, lime 33px, lime 38px, transparent 38px) white;background-size: 100px 50px;

Comenzamos proporcionando un tamaño de fondo al elemento y luego apilamos los degradados dentro de él. Una elipse forma las partes verde y roja. Hay círculos negros esparcidos para representar las semillas de sandía.

Los primeros dos parámetros de una función de gradiente radial determinante si la forma del gradiente es un círculo o una elipse y la posición inicial del gradiente. A esto le siguen los valores de color del degradado junto con las posiciones inicial y final dentro del degradado.

Patrones de gradiente cónicos

Los degradados cónicos crean formas parecidas a rayos. Al igual que los degradados lineales y radiales, los degradados cónicos se pueden utilizar para crear patrones geométricos.

background: conic-gradient(gradient values)

background:   conic-gradient(yellow 40deg, blue 40deg, blue 45deg, transparent 45deg),   conic-gradient(transparent 135deg, blue 135deg, blue 140deg, transparent 140deg) ;background-size: 60px 60px;background-color: white;

El problema con el gradiente cónico es que no es compatible con Firefox, al menos en el momento de escribir este artículo. Siempre vale la pena estar atento a un apoyo más profundo.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

cromo	Firefox	ES DECIR	Borde	Safari
69	83	No	79	12.1

Móvil/Tableta

androidcromo	Android Firefox	androide	Safari en iOS
125	126	125	12.2-12.5

Patrones de iconos emoji

Aquí es donde las cosas empiezan a ponerse interesantes. En lugar de utilizar simplemente patrones geométricos (como en los degradados), ahora utilizamos las formas orgánicas de los emojis para crear patrones de fondo.

Comienza con íconos emoji.

Patrones de emoji de color sólido

Podemos crear íconos emoji dándoles a los emojis un color transparente y una sombra de texto.

color: transparent;text-shadow: 0 0 black;

Luego, esos íconos se pueden convertir en una imagen que se puede usar como fondo, usando SVG.

svg  foreignObject    !-- The HTML code with emoji --  /foreignObject/svg

Luego, la propiedad de fondo puede hacer referencia al SVG mediante la URL de datos.

background: url("data:image/svg+xml,svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22!-- SVG code --/svg");

¡Y voilá! Obtenemos algo como esto:

background:     url("data:image/svg+xml,svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22foreignObject width=%22100px%22 height=%22100px%22div xmlns=%22http://www.w3.org/1999/xhtml%22 style=%22color:transparent;text-shadow: 0 0 %23e42100, -2px 2px 0 black;font-size:70px%22 ‍♀️/div/foreignObject/svg"),     white; background-size: 60px 60px; 

Además de emojis, también es posible dibujar formas CSS y usarlas como patrones. Sin embargo, los emojis requieren menos trabajo. Solo digo.

Patrones de emoji de colores degradados

En lugar de usar íconos emoji simples, podemos usar íconos emoji degradados. Para hacer eso, omita la sombra del texto en los emojis. Agregue un fondo degradado detrás de ellos y utilícelo background-clippara recortar el fondo degradado a la forma de los emojis.

color: transparent;background: linear-gradient(45deg, blue 20%, fuchsia);background-clip: text; /* Safari requires -webkit prefix */

Luego, como antes, utilice la combinación de SVG y URL de datos para crear el patrón de fondo.

Patrones de emoji de colores translúcidos

Esto es lo mismo que usar iconos emoji de colores en bloque. Esta vez, sin embargo, eliminamos la opacidad de los colores usando valores rgba()o hsla()para la sombra del texto.

color: transparent;text-shadow: 20px 10px rgba(0, 255, 0, .3),              0 0 red;

Patrones de emoji de texto SVG

Ya hemos visto todos los métodos de trabajo que se me ocurren para crear patrones de fondo, pero siento que también debo mencionar esta otra técnica que probé, que no tiene tanto apoyo como esperaba.

Intenté colocar el emoji en un elemento de texto SVG en lugar del HTML agregado usando foreignObject. Pero no pude crear una sombra sólida detrás de todos los navegadores.

background:   url("data:image/svg+xml,svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22text y=%221em%22 font-size=%2270%22 fill=%22transparent%22 style=%22text-shadow: 0 0 %23e42100, -2px 2px 5px black, 0 0 6px white; ;%22 ‍♀️/text/svg")

Por si acaso, también intenté usar filtros CSS y SVG para la sombra, pensando que podría funcionar. No fue así. También intenté usar el atributo de trazo, para al menos crear un contorno para el emoji, pero tampoco funcionó.

element()patrones CSS

No pensé en SVG cuando pensé por primera vez en convertir íconos emoji o formas CSS en imágenes de fondo. Probé CSS element(). Es una función que convierte directamente un elemento HTML en una imagen a la que se puede hacer referencia y utilizar. Realmente me gusta este enfoque, pero la compatibilidad con el navegador es una gran advertencia, por eso lo menciono aquí al final.

Básicamente, podemos colocar un elemento en HTML como este:

div id=snake  /div

…luego pásalo a la element()función para usarlo como una imagen en otros elementos, así:

background:   -moz-element(#snake), /* Firefox only */  linear-gradient(45deg, transparent 20px, blue 20px, blue 30px, transparent 30px)   white;background-size: 60px 60px;background-color: white; 

Ahora bien, ese emoji de serpiente es técnicamente una imagen que podemos incluir en el patrón.

Nuevamente, la compatibilidad del navegador es irregular, lo que hace que este enfoque sea súper experimental.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Cromo	Firefox	ES DECIR	Borde	Safari
No	4*	No	No	No

Móvil/Tableta

androidcromo	Android Firefox	Androide	Safari en iOS
No	126*	No	No

En este método, el emoji original (o cualquier forma CSS) utilizado para el patrón de fondo debe representarse en la pantalla para que aparezca también en el patrón de fondo. Para ocultar ese emoji original, utilicé el modo de mezcla: enmascara el emoji original en el HTML para que no aparezca en la página.

---

Espero que los métodos de esta publicación te resulten útiles de una forma u otra y que hayas aprendido algo nuevo en el proceso. Pruébalos. Experimente con diferentes emojis y formas CSS porque los degradados, si bien son geniales y todo eso, no son la única forma de crear patrones. La backgroundpropiedad toma múltiples valores, lo que nos permite pensar en formas creativas de apilar cosas.