Contenuto
Usando il codice CSS, puoi generare uno sfondo a strisce per una pagina web senza utilizzare la grafica. Questo effetto utilizza i livelli di gradiente CSS con più interruzioni di colore, oltre alla proprietà di sfondo per rendere ripetibile il vettore del gradiente sullo schermo. Il modo migliore per farlo è iniziare con un colore di sfondo solido e creare una delle strisce trasparenti per il colore da evidenziare. Gli utenti che visitano la tua pagina utilizzando i vecchi browser Internet vedranno i colori a tinta unita.
indicazioni
-
Aprire il file del foglio di stile CSS nel Blocco note o in un programma di modifica del codice. Aggiungi questa regola alla fine del file:
html {height: 100%; }
Questa regola consente di riempire l'intero sfondo di una pagina Web con la striscia di gradiente che creerà.
-
Imposta un colore di sfondo per la tua pagina in "html {}" per fornire il colore di base per le tue strisce e un predefinito per i vecchi browser:
html {height: 100%; colore di sfondo: nero; }
-
Aggiungi il seguente codice al tuo "html {}" predefinito per creare un effetto striscia orizzontale:
background-image: linear-gradient (trasparente 50%, bianco 50%);
Creerà due interruzioni di colore, la prima trasparente e la seconda bianca. Ogni interruzione di colore occupa il 50% dello spazio sfumato sullo schermo. Regola la larghezza delle strisce modificando i valori percentuali.
-
Aggiungi un valore pari a zero alla prima interruzione di colore e separalo con una virgola:
Immagine di sfondo: gradiente lineare (0, trasparente 50%, nero 50%);
Questo posizionerà le strisce verticalmente, piuttosto che posizionarle orizzontalmente.
-
Duplica la proprietà background-image e i suoi valori in una nuova riga. Fatelo due volte, creando tre linee con lo stesso codice. Aggiungi il prefisso "-moz" al gradiente lineare in una delle linee di codice duplicate. Aggiungi il prefisso "-webkit" all'altra linea duplicata:
background-image: linear-gradient (0, trasparente 50%, bianco 50%); background-image: -moz-linear-gradient (0, trasparente 50%, bianco 50%); background-image: -webkit-linear-gradient (0, trasparente 50%, bianco 50%);
-
Limita il gradiente a una certa quantità di pixel impostando la dimensione dello sfondo nella riga successiva nel codice CSS:
dimensione di sfondo: 20px;
Modificare il numero di pixel della dimensione dello sfondo per modificare la dimensione della sfumatura. A causa della costante ripetizione del gradiente di larghezza della pagina, ogni ripetizione corrisponderà a una serie di strisce sullo schermo.
indicazioni
avvertimento
- Alcuni browser meno recenti non supportano i gradienti CSS3. Quando si desidera visualizzare le strisce per tutti i tipi di browser, utilizzare i commenti condizionali per includere un foglio di stile con un grafico ripetuto.