Puoi aggiungere rumore a un gradiente CSS3?

È ansible aggiungere rumore a un gradiente nei CSS?

Ecco il mio codice per un gradiente radiale:

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)); } 

Cosa aggiungerei a questo per avere il rumore sopra di esso, per dargli consistenza?

Non esiste un modo corrente in CSS per aggiungere “rumore” a uno sfondo.

Una soluzione alternativa sarebbe quella di creare un png noise noise nel tuo editor grafico. Quindi applica quell’elemento grafico come sfondo a un

. Dovresti quindi posizionare quel

sull’intera area di che dovrebbe quindi dare l’aspetto di un gradiente con rumore.

Questo è di gran lunga il modo più semplice e gratuito per implementarlo. È puramente CSS e molto molto semplice da fare, nessun file extra – niente. Ok, non è il modo migliore ansible, ma funziona molto bene, molto affidabile (non è mai fallito quando si testano su browser molto vecchi) e molto veloce da caricare.

L’ho trovato qualche mese fa e da allora lo ha usato, basta copiare e incollare questo codice nel tuo CSS.

 background-image: url(data:image/png;base64,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); 

Quindi aggiungi il tuo colore di sfondo

 background-color:#0094d0; 

Demo: JSFiddle

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

Puoi utilizzare un URI di dati all’interno del tuo CSS per generare automaticamente rumore senza bisogno di un collegamento a un file immagine esterno.

Esempio qui , guarda la fonte per vedere come è stata fatta.

Post del blog con codice scaricabile qui

Sì, al momento non esiste un approccio basato su CSS per le trame del rumore. Se sei deciso a seguire un approccio programmatico (piuttosto che basato sulle immagini), puoi provare a utilizzare il canvas HTML5. C’è un tutorial qui su come generare rumore usando JavaScript -> Creazione di rumore in HTML5 Canvas

Tuttavia, l’approccio Canvas si tradurrà in un’esperienza molto più lenta per i tuoi visitatori, perché A) JavaScript è un linguaggio interpretato, e B) scrivere grafica usando JS è molto lento.

Quindi, a meno che tu non stia cercando di esprimere un punto usando HTML5, rimango con un’immagine. Sarà più veloce (da fare per te e per i tuoi utenti da caricare), e avrai un grado più alto di controllo sull’aspetto.

Per motivi di novità, qui c’è del puro rumore CSS senza usare un URI di dati (anche se sembra funzionare solo nel 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; } 
 

Anche se questo non si qualifica come vero rumore, un puro approccio CSS3 userebbe più selettori a sfondo lineare ripetuto, che sono spesso usati nei generatori di pattern.

Ecco alcuni esempi:

Con una giusta combinazione di sfondi, angoli, interruzioni di colore e trasparenza, dovrebbe essere ansible ottenere un effetto simile al rumore 🙂

Spero che ti metta nella giusta direzione comunque …

Creazione di trame (rumore) mediante filtri SVG e gradienti CSS

Vuoi il rumore nel tuo gradiente? Sei fortunato!

Il rumore di Perlin è un tipo di rumore gradiente. Lo standard SVG specifica un filtro primitivo chiamato , che implementa la funzione Perlin. Permette la sintesi di trame artificiali come nuvole o marmo: il rumore che vuoi.

Passaggio 1: definire un grafico SVG

Creare un piccolo file SVG chiamato noise.svg .

        

Questo grafico definisce due rettangoli. Il primo è riempito con un colore solido. Il secondo è trasshiny con il filtro del rumore applicato. Il secondo rettangolo è sovrapposto al primo per fornire un effetto di disturbo.

Opzioni SVG

  1. Il pugno e più ovvio è che puoi cambiare le dimensioni del grafico. Tuttavia, la proprietà di background-repeat dello background-repeat CSS può essere utilizzata per riempire un elemento, quindi 300 × 300 dovrebbe essere sufficiente.

  2. L’attributo type del filtro può essere fractalNoise , fractalNoise o turbulence , che specifica la funzione filtro. Entrambi forniscono una visuale diversa, ma a mio parere, il filtro del rumore è un po ‘più sottile.

  3. L’attributo baseFrequency del filtro può variare tra 0,5-0,9 per fornire rispettivamente una rotta a tessitura fine. Questa gamma è visivamente ottimale per entrambi i filtri secondo me.

  4. Il fill del primo rettangolo può essere modificato per fornire un colore di base diverso. Successivamente, tuttavia, combiniamo essenzialmente questo colore con un gradiente CSS trasshiny, che definisce anche un colore (i). Quindi il bianco è un buon punto di partenza qui.

  5. L’ opacity del secondo rettangolo può variare da 0,2-0,9 per impostare l’intensità del filtro, dove un numero più alto aumenta l’intensità.

A questo punto, puoi modificare le opzioni di cui sopra, impostare questo grafico del rumore come immagine di sfondo tramite CSS e chiamarlo un giorno. Ma se vuoi un gradiente, come l’OP, vai al passaggio 2.

Passaggio 2: applicare un gradiente CSS

Usando la proprietà background-image , puoi impostare la grafica del rumore SVG come sfondo su qualsiasi elemento e sovrapporre una sfumatura . In questo esempio, applicherò la grafica del rumore all’intero corpo e sovrapporrò un gradiente lineare .

 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 funzione gradient-linear () crea una pseudo immagine, che è impilata sopra noise.svg . Il risultato è una sfumatura traslucida con il nostro rumore che mostra attraverso di essa.

Opzioni CSS

  1. Primo, e più ovvio, è che i colors del gradiente definiti possono essere modificati. Tuttavia, se si desidera un colore a tinta unita senza una sfumatura, rendere uguali i due colors del punto finale. Il vantaggio è che è ansible utilizzare la stessa grafica di rumore con o senza gradiente in tutto il sito o tra i progetti.

  2. Immagini multiple, create con le *-gradient() , possono essere sovrapposte alla grafica del rumore e più di due parametri e angoli di colore possono essere specificati in una singola funzione di gradiente per fornire tutti i tipi di immagini interessanti.

  3. L’opacità dei parametri del gradiente, ad esempio rgba () e hsla (), può essere aumentata per intensificare il colore definito e ridurre il livello di rumore. Anche in questo caso, 0,2-0,9 è un intervallo ideale.

Conclusione

Questa è una soluzione altamente personalizzabile e molto leggera (~ 400 byte) che consente di definire semplicemente il rumore di qualsiasi colore o sfumatura. Sebbene ci siano diverse manopole da girare qui, questo è solo l’inizio. Esistono altri primitivi del filtro SVG, come e , che possono fornire risultati aggiuntivi.

Non è ansible (anche se lo fosse, ci vorrebbe un crapton di trucchi di codice per farlo) per generare trame sonore usando solo il CSS. Non ci sono nuove proprietà CSS3 che forniscono quel tipo di effetto fuori dalla scatola. Una soluzione molto più rapida è usare un editor grafico come Photoshop per farlo.