November 7
Utilizzando Cascading Style Sheet codice, è possibile generare uno sfondo a righe per un'intera pagina Web senza l'uso di grafica. Questo effetto utilizza gradienti CSS di livello con più interruzioni di colore e la proprietà "background-size" per rendere la pendenza si ripete attraverso lo schermo. Il modo migliore per farlo è quello di iniziare con un colore di sfondo solido e fare una delle tue strisce trasparenti in modo che il colore mostra attraverso. Quando i visitatori vedono visualizzare la pagina Web in browser meno recenti, vedranno il colore solido.
1 Aprire il file di foglio di stile CSS in Blocco note o un programma di editing di codice. Aggiungere questa regola alla fine del file:
html {
height: 100%;
}
Questa regola consente di riempire l'intero sfondo di una pagina Web con il gradiente strisce si creerà.
2 Impostare un colore di sfondo per la pagina Web all'interno di "html {}" per fornire un colore di base per le strisce e un ripiego per browser meno recenti:
html {
height: 100%;
background-color: black;
}
3 Aggiungere questo codice al vostro "html {}" regola per creare un effetto striscia orizzontale:
background-image: linear-gradient (trasparente 50%, bianco 50%);
Questo codice crea due interruzioni di colore nel gradiente, il primo trasparente e la seconda bianca. Ogni interruzione di colore occupa il 50 per cento dello spazio del gradiente sullo schermo. Regolare la larghezza delle strisce rispetto all'altro cambiando i valori percentuali.
4 Aggiungere un valore zero di fronte alla prima fermata colore e separarlo dalle fermate con una virgola:
Background-image: linear-gradient (0, 50% trasparente, nero 50%);
Questa modifica renderà il vostro strisce verticale anziché orizzontale.
5 Duplicare la vostra proprietà "background-image" e dei suoi valori su una nuova linea. Fate questo due volte, in modo da finire con tre linee dello stesso codice. Aggiungere il prefisso "-moz" al gradiente lineare in una delle linee duplicate di codice. Aggiungere il prefisso "-webkit" a un'altra linea duplicato:
background-image: linear-gradient (0, 50% trasparente, bianco 50%);
background-image: -moz-linear-gradient (0, 50% trasparente, bianco 50%);
background-image: -webkit-linear-gradient (0, 50% trasparente, bianco 50%);
6 Vincolare il gradiente di una certa quantità di pixel per impostare il "background-size" nella riga successiva nel codice CSS:
background-size: 20px;
Modificare il numero di pixel in "background-size" per modificare le dimensioni della sfumatura. Poiché il gradiente manterrà ripetendo per la larghezza della pagina, ogni ripetizione del gradiente diventa una serie di strisce sullo schermo.