Gradienti ripetuti CSS3 [Suggerimenti CSS3]
Ci sono molte funzionalità CSS3 che cambiano il modo in cui decoriamo un sito Web, uno dei quali è CSS3 Gradients. Prima di CSS3, abbiamo sicuramente bisogno di immagini per creare l'effetto sfumato; ora siamo in grado di fornire gli stessi (e migliori) effetti usando solo i CSS
Nei nostri post precedenti, abbiamo discusso due tipi di gradienti che possono essere ottenuti con CSS3:
- Radiale e
- Gradienti lineari.
Questa volta esamineremo il fratello: ripetendo gradienti.
Ripetizione di base
Ripetendo le sfumature è essenzialmente un'estensione. La sintassi è simile a come definiamo i gradienti Radiali e Lineari, solo che, come suggerisce il nome, ripeterà anche i colori in una direzione specificata. Per ripetere gradienti lineari, possiamo usare questa funzione: ripetizione lineare gradiente, mentre per ripetere gradienti radiali o ellittici usiamo questa funzione: ripetendo-radiale gradiente.
/ * Linear * / .gradient background: gradient-linear-gradient (0deg, # f9f9f9, #cccccc 20px); / * Radial * / .gradient background: repeat-radial-gradient (50% 50%, circle, # f9f9f9, #cccccc 20px);
Non c'è molta differenza per il resto del codice, tranne per il ripetizione del colore. Di seguito è riportata una semplice illustrazione per descrivere come funziona questa ripetizione di colore.
Anche se l'immagine sopra illustra solo per la ripetizione di gradienti lineari, l'idea di base si applica anche ai gradienti radiali in cui i colori si ripetono all'infinito, in questo caso, in qualsiasi direzione. Segui il link qui sotto per vedere la demo.
- Visualizza la demo
Nella prossima sezione, ti mostreremo come utilizzare le ripetizioni graduali CSS3 in esempi reali.
Esempio: creazione di modelli
L'implementazione più comune di Ripetendo le sfumature è quello di creare modelli di sfondo. In questo esempio, creeremo semplici motivi a strisce verticali.
.gradient background: repeat-linear-gradient (0 gradi, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Nota come definiamo due colori diversi - # f9f9f9 e #CCCCCC - nello stesso punto, 20px. Questo esempio accentuerà la differenza tra questi due colori ed eliminerà la sfocatura.
Per orientare l'orientamento, cambiamo semplicemente l'angolo - 90deg lo dirige orizzontalmente mentre 45 gradi lo dirigerò in diagonale e così via.
- Visualizza la demo
Esempio: creazione di Paperline
In questo secondo esempio, creeremo una paperline che potresti vedere in un taccuino. Per creare questo effetto, abbiamo solo bisogno di a div, nessuna immagine, solo CSS.
.gradient width: auto; altezza: 500px; margine: 0 50 px; background: -webkit-repeat-linear-gradient (-90deg, #f9f9f9, # f9f9f9 20px, #cccccc 21px); background: -moz-repeating-linear-gradient (-90deg, #f9f9f9, # f9f9f9 20px, #cccccc 21px); background: -o-repeat-linear-gradient (-90deg, #f9f9f9, # f9f9f9 20px, #cccccc 21px); background: repeat-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); dimensione dello sfondo: 100% 21 px;
Si noti che abbiamo aggiunto anche CSS3 background-size proprietà per specificare le dimensioni delle immagini di sfondo per 100%, 20 px. Sebbene i gradienti CSS3 mostrino i "colori", in realtà è classificato come immagine, non colore.
Successivamente, useremo :prima pseudo-elemento per aggiungere una striscia sul lato sinistro del foglio.
.gradiente: before content: ""; display: blocco in linea; altezza: 500px; larghezza: 4px; border-left: 4px double # FCA1A1; posizione: relativa; a sinistra: 30 px;
E abbiamo finito, è davvero semplice, vero? Ora possiamo vederli tutti in azione dai link sottostanti.
- Visualizza la demo
- Scarica fonte
Ulteriori risorse
- Gradienti CSS3 Webkit
- Gradienti CSS3 su Microsoft Developer Network
