¿Puedes agregar ruido a un degradado CSS3?

sobre toda el área del que luego debería dar la apariencia de un degradado con ruido.

Creación de texturas (ruido) mediante filtros SVG y degradados CSS

¿Quieres ruido en tu gradiente? ¡Estás de suerte!

El ruido de Perlin es un tipo de ruido de gradiente. El estándar SVG especifica una primitiva de filtro llamada , que implementa la función Perlin. Permite la síntesis de texturas artificiales como nubes o mármol: el ruido que desee.

Paso 1: definir un gráfico SVG

Crea un pequeño archivo SVG llamado noise.svg.

Este gráfico define dos rectángulos. El primero está relleno de un color sólido. El segundo es translúcido con el filtro de ruido aplicado. El segundo rectángulo se superpone al primero para proporcionar un efecto de ruido.

Opciones SVG

1. Lo primero y más obvio es que puedes cambiar las dimensiones del gráfico. Sin embargo, el CSS background-repeat La propiedad se puede utilizar para rellenar un elemento, por lo que 300 × 300 debería ser suficiente.

2. El filtro type attribute puede ser fractalNoise o turbulence, que especifica la función de filtro. Ambos proporcionan una imagen diferente, pero en mi opinión, el filtro de ruido es un poco más sutil.

3. El filtro baseFrequency attribute puede oscilar entre 0,5 y 0,9 para proporcionar un curso a una textura fina, respectivamente. Este rango es visualmente óptimo para cualquier filtro en mi opinión.

4. El primer rectángulo fill se puede cambiar para proporcionar un color base diferente. Más tarde, sin embargo, esencialmente combinamos este color con un degradado CSS translúcido, que también define un color o colores. Así que el blanco es un buen punto de partida aquí.

5. El segundo rectángulo opacity puede oscilar entre 0,2 y 0,9 para establecer la intensidad del filtro, donde un número más alto aumenta la intensidad.

En este punto, puede modificar las opciones mencionadas anteriormente, configurar este gráfico de ruido como una imagen de fondo a través de CSS y terminarlo. Pero si desea un gradiente, como el OP, vaya al Paso 2.

Paso 2: aplicar un degradado CSS

Utilizando el background-image , puede establecer el gráfico de ruido SVG como fondo en cualquier elemento y superponer un degradado. En este ejemplo, aplicaré el gráfico de ruido a todo el cuerpo y superpondré un degradado lineal.

body 
    /* white to black linear noise gradient spanning from top to bottom */
    background:
      linear-gradient(rgba(255,255,255,.5), rgba(0,0,0,.5)),
      url('noise.svg');

los gradiente lineal() La función crea una pseudoimagen, que se apila sobre noise.svg. El resultado es un degradado translúcido con nuestro ruido a través de él.

Opciones CSS

1. Primero, y más obvio, es que los colores degradados definidos se pueden cambiar. Sin embargo, si desea un color sólido sin degradado, haga que los dos colores finales sean iguales. El beneficio es que puede utilizar el mismo gráfico de ruido con o sin degradado en todo un sitio o entre proyectos.

2. Varias imágenes, creadas con el *-gradient() funciones, se pueden superponer en el gráfico de ruido y se pueden especificar más de dos parámetros de color y ángulos en una sola función de degradado para proporcionar todo tipo de imágenes geniales.

3. La opacidad de los parámetros de degradado, es decir, rgba () y hsla (), se puede aumentar para intensificar el color definido y reducir el nivel de ruido. Nuevamente, 0.2-0.9 es un rango ideal.

Conclusión

Esta es una solución altamente personalizable y muy liviana (~ 400 bytes) que le permite definir simplemente el ruido de cualquier color o degradado. Aunque hay varias perillas para girar aquí, esto es solo el comienzo. Hay otras primitivas de filtro SVG, como y , que puede proporcionar resultados adicionales.

Sección de Reseñas y Valoraciones

Si guardas alguna sospecha o disposición de progresar nuestro crónica eres capaz de realizar una ilustración y con mucho gusto lo analizaremos.

---

---

Utiliza Nuestro Buscador