online - ¿Puedes agregar ruido a un gradiente de CSS3?

gradientes css

Question

¿Es posible agregar ruido a un degradado en CSS?

Aquí está mi código para un degradado radial:

body {
    color: #575757;
    font: 14px/21px Arial, Helvetica, sans-serif;
    background-color: #2f3b4b;
    background: -moz-radial-gradient(center 45deg, circle closest-corner, #2f3b4b 0%, #3e4f63 100%);
    background: -webkit-gradient(radial, center center, 10, center center, 900, from(#2f3b4b), to(#3e4f63));
}

¿Qué agregaría a eso para tener ruido encima, para darle textura?

Answer 1

Creación de texturas (ruido) Uso de filtros SVG y gradientes 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 <feTurbulence> , que implementa la función Perlin. Permite la síntesis de texturas artificiales como las nubes o el mármol: el ruido que deseas.

Paso 1: defina un gráfico SVG

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

<svg
  xmlns=''http://www.w3.org/2000/svg''
  xmlns:xlink=''http://www.w3.org/1999/xlink''
  width=''300'' height=''300''>

    <filter id=''n'' x=''0'' y=''0''>
            <feTurbulence
              type=''fractalNoise''
              baseFrequency=''0.75''
              stitchTiles=''stitch''/>
    </filter>

    <rect width=''300'' height=''300'' fill=''#fff''/>
    <rect width=''300'' height=''300'' filter="url(#n)" opacity=''0.80''/>
</svg>

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

Opciones de SVG

1. Puño y más obvio es que puedes cambiar las dimensiones del gráfico. Sin embargo, la propiedad CSS background-repeat se puede usar para completar un elemento, por lo tanto 300 × 300 debería ser suficiente.

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

3. El atributo de baseFrequency del filtro puede variar de 0.5-0.9 para proporcionar un rumbo a una textura fina, respectivamente. Este rango es visualmente óptimo para cualquiera de los filtros en mi opinión.

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

5. La opacity del segundo rectángulo puede variar de 0.2-0.9 para establecer la intensidad del filtro, donde un número más alto aumenta la intensidad.

En este punto, podría ajustar las opciones mencionadas anteriormente, establecer este gráfico de ruido como una imagen de fondo a través de CSS y llamarlo un día. Pero si quiere un degradado, como el OP, vaya al Paso 2.

Paso 2: aplicar un gradiente de CSS

Usando la propiedad background-image , puede establecer el gráfico de ruido SVG como fondo en cualquier elemento y superponer un gradient . En este ejemplo, aplicaré el gráfico de ruido a todo el cuerpo y superponeré 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'');
}

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

Opciones de CSS

1. Primero, y lo 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 de punto final sean iguales. El beneficio es que puede usar el mismo gráfico de ruido con o sin un degradado en un sitio o entre proyectos.

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

3. La opacidad de los parámetros de gradiente, 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 simplemente definir 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 <feGaussianBlur> y <feColorMatrix> , que pueden proporcionar resultados adicionales.

Answer 2

En aras de la novedad, aquí hay un poco de ruido de CSS puro sin usar un URI de datos (aunque parece que solo funciona en webkit):

#box {
  width:250px;
  height:250px;
  position:relative;
  background-size:55px 10px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(1% 21%, closest-corner, rgba(255,0,255,.5), rgba(0,255,255,.5), rgba(0,0,0,1) 1.7%), -webkit-repeating-radial-gradient(51% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,255,0,1) 10%); 
}
#box::before {
  content:'''';
  width:100%;
  height:100%;
  position:absolute;
  mix-blend-mode:exclusion;
  background-size:12px 22px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(61% 21%, closest-corner, rgba(255,255,255,1), rgba(0,255,0,.5), rgba(3,0,255,1) 20%),  -webkit-repeating-radial-gradient(91% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,1,.5), rgba(055,255,255,1) 20%);
  left:0;
  z-index:998;
}
#box::after {
  content:'''';
  width:100%;
  height:100%;
  position:absolute;
  mix-blend-mode:exclusion;
  background-size:15px 13px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(21% 21%, closest-corner, rgba(255,255,255,1), rgba(0,0,255,.5), rgba(3,0,255,1) 20%);
  left:0;
  top:0;
  z-index:999;
}

<div id="box"></div>

Answer 3

Esta es, de lejos, la mejor manera de implementar esto sin problemas. Es puramente CSS y muy simple de hacer, sin archivos adicionales, nada. Bueno, no es la mejor manera posible, pero funciona muy bien, es muy confiable (nunca falló cuando se prueba en navegadores muy antiguos) y muy rápido de cargar.

Lo encontré hace unos meses y lo usaste desde entonces, simplemente copia y pega este código en tu CSS.

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);

Luego agrega tu color de fondo

background-color:#0094d0;

Demostración: JSFiddle

Fuente: https://coderwall.com/p/m-uwvg

Answer 4

No es posible (incluso si lo fuera, tomaría una buena cantidad de trucos de código hacerlo) para generar texturas de ruido usando solo CSS. No hay nuevas propiedades de CSS3 que brinden ese tipo de efecto de la caja. Una solución mucho más rápida es usar un editor gráfico como Photoshop para hacer eso.

Answer 5

No hay forma actual en css para agregar ''ruido'' a un fondo.

Una solución alternativa sería crear un ruido png transparente en su editor gráfico. A continuación, aplique ese gráfico como fondo a un <div> . Debería colocar ese <div> sobre toda el área del <body> que debería dar la apariencia de un degradado con ruido.

Answer 6

Puede usar un URI de datos dentro de su CSS para generar ruido de forma programática sin necesidad de un enlace a un archivo de imagen externo.

Ejemplo here , vea la fuente para ver cómo se ha hecho.

Publicación de blog con código descargable aquí

Answer 7

Sí, actualmente no existe un enfoque basado en CSS para las texturas de ruido. Sin embargo, si está empeñado en un enfoque programático (en lugar de basado en imágenes), podría intentar usar el lienzo HTML5. Aquí hay un tutorial sobre cómo generar ruido usando JavaScript -> Crear ruido en el lienzo de HTML5

Sin embargo, hacer el enfoque Canvas resultará en una experiencia mucho más lenta para sus visitantes, porque A) JavaScript es un lenguaje interpretado, y B) escribir gráficos usando JS es más lento.

Por lo tanto, a menos que intentes establecer un punto usando HTML5, me quedaré con una imagen. Será más rápido (para que lo haga y para que los usuarios carguen), y tendrá un grado de control más fino sobre la apariencia.

Answer 8

Si bien esto no califica como ruido verdadero, un enfoque de CSS3 puro usaría múltiples selectores de fondo de repetición lineal, que a menudo se utilizan en generadores de patrones.

Aquí están algunos ejemplos:

• http://jsfiddle.net/andrewodri/eMB6E/
• http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
• http://lea.verou.me/css3patterns/

Con una combinación correcta de fondos, ángulos, paradas de color y transparencia, se puede lograr un efecto similar al ruido razonable :)

Espero que te ponga en la dirección correcta de todos modos ...