Nota subito che non ci sono immagini qui, solo funzionalità CSS3! Dal momento che il creatore è designer professionista, ha anche preso in considerazione la funzione di rollback per le versioni precedenti dei browser. Ecco come appaiono le strisce in Opera 11, che supporta solo alcuni parametri CSS3, ma non tutti.
Probabilmente hai già indovinato che nei browser in cui non c'è alcun supporto CSS3, le strisce sembrano più o meno le stesse, ma anche più semplificate.
HTML di base
La striscia stessa è un div con una classe. Al suo interno posizioneremo uno span che fungerà da area "riempita" della barra di avanzamento. Questo può essere ottenuto attraverso lo stile in linea. Qui abbiamo bisogno della striscia per capire quanto dovrebbe essere piena, ed è in questi casi che si applicano elementi in linea... Alternativa variante di CSS ci saranno classi come "fill-10-percent", "fill-un-terzo" e così via.
La Fondazione:
L'inizio del CSS
Il wrapper div è la barra di avanzamento nella nostra barra. Non è necessario impostare un parametro di larghezza per estenderlo all'intera larghezza dell'elemento del blocco genitore. Puoi impostare un parametro, però. Anche il parametro dell'altezza è arbitrario. È impostato a 20 pixel, ma puoi impostarlo come preferisci. Successivamente, arrotonderemo gli angoli in tutti i browser in cui ciò è possibile e imposteremo Ombra interiore per dare l'effetto di profondità.
metro (
altezza: 20px; / * Può essere qualsiasi cosa * /
posizione: relativa;
sfondo: # 555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
bordo-raggio: 25px;
imbottitura: 10px;
-webkit-box-shadow: riquadro 0 -1px 1px rgba (255,255,255,0.3);
-moz-box-shadow: riquadro 0 -1px 1px rgba (255,255,255,0.3);
box-shadow: inset 0 -1px 1px rgba (255,255,255,0.3);
}
Span all'interno riempirà parte della barra di avanzamento. Imposteremo il display su un tipo di blocco con un parametro di altezza del 100%. Così, sarà esteso al tutto area accessibile... Successivamente, utilizzeremo del codice CSS3 per creare la gradazione e l'arrotondamento degli angoli.
Metro> span (
blocco di visualizzazione;
altezza: 100%;
-webkit-
-webkit-
bordo-in alto-a destra-raggio: 8px;
bordo-basso-destra-raggio: 8px;
colore di sfondo: rgb (43,194,83);
background-image: -webkit-gradient (
lineare,
in basso a sinistra,
in alto a sinistra,
stop colore (0, rgb (43,194,83)),
stop colore (1, rgb (84,240,84))
);
immagine di sfondo: -moz-linear-gradient (
centro in basso,
RGB (43.194,83) 37%,
RGB (84.240,84) 69%
);
-webkit-box-shadow:
-moz-box-shadow:
riquadro 0 2px 9px rgba (255,255,255,0.3),
riquadro 0 -2px 6px rgba (0,0,0,0.4);
posizione: relativa;
trabocco: nascosto;
}
Altri colori
Cambiamo il colore molto semplicemente. Basta aggiungere una classe denominata "orange" o "red" al div wrapper e il colore cambierà.
Arancione> span (
colore di sfondo: # f1a165;
background-image: -moz-linear-gradient (top, # f1a165, # f36d0a);
background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0, # f1a165), color-stop (1, # f36d0a));
background-image: -webkit-linear-gradient (# f1a165, # f36d0a);
}
Rosso> span (
colore di sfondo: # f0a3a3;
background-image: -moz-linear-gradient (top, # f0a3a3, # f42323);
background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0, # f0a3a3), color-stop (1, # f42323));
background-image: -webkit-linear-gradient (# f0a3a3, # f42323);
}
strisce
Possiamo anche aggiungere un fantastico effetto "a strisce" aggiungendo un altro elemento sopra il nostro span e dandogli una gradazione CSS ripetuta. In termini di semantica, è meglio farlo attraverso uno pseudo-elemento, quindi facciamolo. Gli daremo una posizione assoluta su un'area specifica della nostra campata (che ha già un valore di posizione relativo), quindi arrotonderemo gli angoli in modo che le strisce non sembrino sgradevoli.
Meter> span: dopo (
contenuto: "";
posizione: assoluta;
in alto: 0; sinistra: 0; in basso: 0; destra: 0;
immagine di sfondo:
-webkit-gradiente (lineare, 0 0, 100% 100%,
stop colore (.25, rgba (255, 255, 255, .2)),
color-stop (.25, trasparente), color-stop (.5, trasparente),
stop colore (.5, rgba (255, 255, 255, .2)),
stop colore (.75, rgba (255, 255, 255, .2)),
color-stop (.75, trasparente), a (trasparente)
);
immagine di sfondo:
-moz-gradiente-lineare (
-45 gradi,
rgba (255, 255, 255, .2) 25%,
trasparente 25%,
trasparente 50%,
RGB (255, 255, 255, .2) 50%,
RGB (255, 255, 255, .2) 75%,
trasparente 75%,
trasparente
);
indice z: 1;
-dimensione dello sfondo del webkit: 50px 50px;
-moz-dimensione dello sfondo: 50px 50px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
bordo-in alto-a destra-raggio: 8px;
bordo-basso-destra-raggio: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
bordo-in alto-sinistra-raggio: 20px;
bordo-basso-sinistro-raggio: 20px;
trabocco: nascosto;
}
Animare le strisce
Finora solo Firefox 4 può animare pseudo-elementi e solo i browser Webkit possono farlo animazione passo... Quindi, sfortunatamente, non abbiamo molte opportunità di animare queste strisce. Se hai ancora bisogno di creare un'animazione, aggiungiamo un altro intervallo e chiediamo ai browser della famiglia Webkit di animarlo.
Lo Span sarà identico allo pseudo-elemento, quindi usiamo solo gli stessi valori...
Meter> span: after, .animate> span> span (
... e cerca di evitare duplicazioni:
Anima> span: dopo (
display: nessuno;
}
Successivamente, sposteremo ulteriormente il posizionamento dello sfondo di un valore pari alla sua dimensione:
@ -webkit-keyframes move (
0% {
posizione di sfondo: 0 0;
}
100% {
posizione di sfondo: 50px 50px;
}
}
E chiamiamola animazione:
Meter> span: after, .animate> span> span (
-webkit-animazione: sposta 2s lineare infinito;
}
Potrebbe valere la pena mantenere l'animazione associabile allo pseudo-elemento affinché funzioni non appena i browser Webkit iniziano a supportare questa funzionalità.
Animazione a larghezza piena
Sfortunatamente, NON puoi animare un elemento a larghezza automatica o naturale, il che probabilmente rende possibile animare elementi in linea.
@ -webkit-animation expandWidth (
0% (larghezza: 0;)
100% (larghezza: automatica;)
}
L'autore ha adattato l'elemento per tutti i bug tracker browser popolari ma in questo momento non è supportato. Invece, usiamo jQuery. Imposta la larghezza originale, forzala a zero e quindi anima:
$ (". metro> span"). each (funzione () (
$ (questo)
.data ("origWidth", $ (this) .width ())
.larghezza (0)
.animato ((
larghezza: $ (questo) .data ("origWidth")
}, 1200);
});
Ora hai finito!
Traduzione: Vlad Merzhevich
HTML5 aggiunge un elemento della barra di avanzamento per mostrare i progressi compiti specifici come scaricare o caricare, praticamente tutto ciò che richiede un po' di tempo.
In questo articolo, discuteremo come aggiungere questo elemento al tuo documento, modellarlo con CSS e animare i progressi.
Iniziamo.
Nozioni di base d'uso
L'indicatore è aggiunto da un tag; il valore di avanzamento è determinato dagli attributi value, min e max come segue.
Poiché stiamo parlando di un indicatore integrato, il suo aspetto varia a seconda della piattaforma. Di seguito è riportato come appare l'indicatore integrato in Windows e OS X.
Proviamo ora a modellare questo elemento in modo che appaia lo stesso su tutte le piattaforme.
Disegnare la barra di avanzamento
Nel foglio di stile, possiamo usare il selettore di avanzamento per aggiungere regole di stile all'elemento
Progresso (colore di sfondo: # f3f3f3; bordo: 0; altezza: 18 px; raggio del bordo: 9 px;)
Tuttavia, ci sono lievi differenze nei browser. V Firefox gli stili vengono applicati all'indicatore stesso, mentre lo stile del cursore non cambia.
V Cromo e Safari gli stili originali vengono rimossi e sostituiti con, quindi lo stile sopra non viene applicato (da almeno, attualmente).
Quindi abbiamo bisogno di qualcos'altro in questo caso.
In Chrome e Safari, l'elemento
