Nwlapcug.com


Come fare uno sfondo a strisce con i CSS

Utilizzando il codice di foglio di stile CSS, è possibile generare uno sfondo a strisce per un'intera pagina Web senza utilizzare qualsiasi grafica. Questo effetto utilizza gradienti livelli CSS con più color-stop e la proprietà "background-size" per rendere il gradiente ripetersi attraverso lo schermo. Il modo migliore per farlo è quello di iniziare con un colore di sfondo a tinta unita e fare uno dei tuoi gradi trasparente così il colore mostra attraverso. Quando i visitatori vedere Visualizza la tua pagina Web in browser meno recenti, vedranno la tinta unita.

Istruzioni

1

Aprire il file di foglio di stile CSS nel blocco note o un programma di modifica del codice. Aggiungere questa regola nella parte inferiore del file:

HTML () {

Altezza: 100%;

}

Questa regola rende possibile per riempire l'intero sfondo di una pagina Web con il gradiente di striscia che si creerà.

2

Impostare un colore di sfondo per la tua pagina Web all'interno di "{} html" per fornire un colore di base per il vostro strisce e un fallback per i browser meno recenti:

HTML () {

Altezza: 100%;

background-color: black;

}

3

Aggiungere questo codice alla regola "{} html" per creare un effetto di striscia orizzontale:

immagine di sfondo: lineare-gradient(transparent 50%, white 50%);

Questo codice crea due interruzioni di colore nella sfumatura, il primo trasparente e il bianco secondo. Ogni interruzione di colore prende il 50% dello spazio della sfumatura sullo schermo. Regolare la larghezza delle strisce uno rispetto a altro modificando i valori di percentuale.

4

Aggiungere un valore pari a zero di fronte alla prima fermata di colore e separarla dalle fermate con una virgola:

Immagine di sfondo: lineare-gradient(0, transparent 50%, black 50%);

Questa modifica renderà il vostro strisce verticale anziché orizzontale.

5

Duplicare la proprietà "background-image" e i suoi valori su una nuova riga. Farlo due volte, quindi vi ritroverete con tre linee dello stesso codice. Aggiungere il "-moz" prefisso per la sfumatura lineare in una delle linee di codice duplicate. Aggiungere il "-webkit" prefisso ad un altro duplicato linea:

immagine di sfondo: lineare-gradient(0, transparent 50%, white 50%);

immagine di sfondo: - moz-lineare-gradient(0, transparent 50%, white 50%);

immagine di sfondo: - webkit-lineare-gradient(0, transparent 50%, white 50%);

6

Vincolare il gradiente di una certa quantità di pixel impostando il "sfondo-dimensioni" nella riga successiva del codice CSS:

sfondo-dimensioni: 20px;

Modificare il numero di pixel in "sfondo-size" per modificare la dimensione della sfumatura. Perché la sfumatura sarà continuare a ripetere per la larghezza della pagina, ogni ripetizione della sfumatura diventa un set di righe sullo schermo.

Consigli & Avvertenze

  • Alcuni browser più vecchi non supportano gradienti CSS3. Quando si desidera visualizzare uno sfondo a strisce per ogni browser, è possibile utilizzare commenti condizionali per includere un foglio di stile con una grafica ripetuta.