Share
In questo suggerimento rapido ti mostrerò come creare uno sfondo gradiente dall'aspetto gradevole, utilizzando qualsiasi immagine e un paio di linee di CSS. Inoltre, parlerò delle prestazioni e spiegherò le proprietà degli allegati in background man mano che procediamo.
Viviamo in un mondo in cui il Web (comprensibilmente) favorisce i CSS e le immagini generate dal browser sulle immagini. Le immagini hanno una risoluzione limitata, il che le rende piuttosto inflessibili. Possono anche influire sulle prestazioni di un sito Web, costando più richieste del server e larghezza di banda.
A volte però, possiamo appoggiarci alle immagini per darci delle belle immagini. Non devono essere enormi in termini di dimensione del file o risoluzione e l'effetto non sarà molto compromesso anche su schermi ad alta risoluzione e retina. Diamo un'occhiata all'utilizzo di un'immagine (anziché CSS) per uno sfondo sfumato.
Se si desidera utilizzare, modificare o condividere immagini, senza sborsare denaro guadagnato duramente, è sempre possibile fare affidamento su Ricerca avanzata immagini Google. Nella parte inferiore della pagina, è possibile selezionare il tipo di diritti di utilizzo che si desidera cercare. In questo caso userò l'immagine che può essere condivisa, modificata ed è libera di usare.
Apri Photoshop e crea un nuovo file. Impostare la larghezza su 300 px, l'altezza su 300 px e la risoluzione su 72 PPI.
Ora importa l'immagine che desideri modificare come sfondo sfumato e ridimensionala in modo proporzionale per adattarla alle dimensioni della tela.
Per ottenere un gradiente di aspetto gradevole, fai clic su Filtro> Sfocatura> Controllo sfocatura e impostalo su 40 (nel tuo caso, puoi aumentare o diminuire il numero in base all'immagine). Questo è tutto.
Se ti senti pigro, puoi dare un'occhiata a 100 Free Blurry Textures su pepsized.com.
Dopo aver completato questi primi passi, è tempo di salvare il nostro sfondo sfumato e di ridurre le dimensioni il più possibile, pur mantenendo una qualità ragionevole. Fare clic su File> Salva per Web e impostare il formato dell'immagine su JPEG.
Ora per la compressione. Quando altera la qualità (Massimo, Molto alto ecc.) Vedrai un'anteprima del risultato finale. Vai più in basso che puoi, esegui la messa a punto digitando il valore reale nel campo qualità (80 in questo caso) e imposta Sfocatura su 2. Aumentando la sfocatura si raderà un po 'di più dalla dimensione del file e ulteriormente attenuerai i pixel che hai.
Seleziona "Progressivo". Ciò influenza il modo in cui l'immagine viene caricata nel browser. Il caricamento progressivo significa che sarà caricato in più passaggi; dapprima carica completamente in bassa qualità, quindi un po 'più in alto, poi un po' più in alto, invece di caricare riga per riga.
Fai clic su "Salva" per salvare l'immagine del gradiente. Nella parte in basso a sinistra della finestra, vedrai quanto sei riuscito a ottenere le dimensioni dell'immagine.
Una volta che hai scelto le impostazioni che ritieni opportune, perché non salvare queste impostazioni per un rapido accesso in futuro? Prima di premere "Salva", fai clic sulla piccola icona del menu in alto a destra della finestra di dialogo Salva per Web e fai clic su "Salva impostazioni".
Anche se abbiamo creato una piccola immagine, a causa della sua natura sfocata può essere efficacemente allungata su risoluzioni molto più grandi senza ridurre visibilmente la qualità. Per caricare questa immagine sullo sfondo del tuo sito web usa questo piccolo snippet CSS:
Accentsconagua
body margin: 0; background: url ('img / bg.jpg'); formato di sfondo: 100% 100%; background-attachment: fixed; margine: 0 - Questo potrebbe non essere necessario se hai ripristinato correttamente il tuo CSS per cominciare. Rimuove gli spazi bianchi attorno all'immagine o ai bordi nel punto di vista del browser.background: url ('bg.jpg') - Percorso della tua immagine di sfondo. Imposta il percorso all'interno del url ( ").formato di sfondo: 100% 100%; - Questo regola la larghezza e l'altezza dell'immagine di sfondo. Il primo valore è larghezza, il secondo è altezza. Il motivo per cui ho scelto il sistema percentuale è perché rimane la stessa dimensione relativa al viewport su ogni dispositivo, a seconda del valore impostato. 100% riempirà la vista di qualunque browser.background-attachment: fixed - Usando questa proprietà possiamo specificare se lo sfondo sarà scorrevole o fisso. Nel nostro caso, vogliamo che il nostro background sia corretto; non scorrerà con il contenuto. Parlerò di questa proprietà in modo più approfondito qui sotto.Uno svantaggio nell'uso delle immagini è che l'estrazione di ciascuna nel browser aggiunge una richiesta server aggiuntiva. La quantità di richieste parallele che si possono fare è limitata, quindi è possibile che si verifichi un blocco delle bottiglie nei casi in cui si scaricano molte risorse. Per aggirare questo, è possibile convertire la tua immagine in Base-64 e inserirla direttamente nel tuo file CSS usando un Data-URI.
Ci sono molti servizi che svolgono questo compito per te, ma l'autoproclamato "strumento super semplice dataURI" duri.me è morto facile da usare.
Per ulteriori informazioni su come funziona, dai un'occhiata agli URI dei dati introduttivi di Chris Brown.
Dai un'occhiata alla nostra piccola immagine da 300 px, che si estende su tutta la vista. Puoi anche dare un'occhiata alla demo dal vivo.
background-attachment La proprietà background-attachment è utilizzata principalmente per specificare se le immagini di sfondo devono scorrere o essere corrette rispetto all'elemento padre.
L'abbiamo usato nella sua forma più semplice:
body background-image: url ("img / imgname.png"); background-attachment: fixed; Supporta inoltre più immagini di sfondo, accettando più valori separati da virgola stessa. In questo esempio, la prima immagine di sfondo ("image1.png") scorrerà, la seconda ("image2.png") verrà corretta:
body background-image: url ("image1.png"), url ("image2.png"); background-attachment: scroll, fixed; Dai un'occhiata alla demo.
Questo è un modo semplice per ottenere gradienti dall'aspetto fresco come sfondo di un sito fresco, in pochi minuti. Non dimenticare di valutare se pensi che valga la pena utilizzare i gradienti CSS, ma spero che questo tutorial ti sia piaciuto, grazie per la lettura!
