Odmah napominjemo da ovdje nema slika, već samo CSS3 karakteristike! Pošto kreator jeste profesionalni dizajner, takođe je uzeo u obzir funkciju vraćanja nazad za starije verzije pretraživača. Ovako izgledaju pruge u Operi 11, koja podržava samo neke CSS3 opcije, ali ne sve.
Verovatno ste već pogodili da u pretraživačima u kojima uopšte nema podrške za CSS3, trake izgledaju otprilike isto, ali još pojednostavljeno.
Osnovni HTML
Sama traka je div sa klasom. Unutar njega ćemo postaviti raspon koji će djelovati kao "popunjeno" područje trake napretka. To se može postići inline stylingom. Ovdje nam je potreban bend da shvati koliko bi trebao biti pun, a u takvim slučajevima i jeste inline elementi. Alternativa CSS varijanta postojaće klase poput "ispuni-10-posto", "ispuni-jedna trećina" i tako dalje.
temelj:
Početak CSS-a
Omotač div je traka napretka u našoj traci. Ne moramo postavljati parametar širine da bi obuhvatio punu širinu elementa roditeljskog bloka. Iako, možete postaviti parametar. Parametar visine je također proizvoljan. Postavljen je na 20px, ali ga možete podesiti po svom ukusu. Zatim ćemo zaokružiti uglove u svim pretraživačima gdje je to moguće i postaviti unutrašnja sjena da daju efekat dubine.
metar (
visina: 20px; /* Može biti bilo šta */
pozicija: relativna;
pozadina: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px
-webkit-box-shadow: umetnuti 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow: umetnuti 0 -1px 1px rgba(255,255,255,0.3);
box-shadow: umetnuti 0 -1px 1px rgba(255,255,255,0.3);
}
Interni raspon će ispuniti dio trake napretka. Postavićemo ekran na blokovni tip sa parametrom visine od 100%. Tako će biti rastegnuto do kraja pristupačno područje. Zatim ćemo koristiti neki CSS3 kod za kreiranje gradacije i zaobljenih uglova.
metar > raspon(
display:block;
visina: 100%;
-webkit-
-webkit-
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
boja pozadine: rgb(43,194,83);
background-image: -webkit-gradient(
linearni,
lijevo dolje,
lijevo gore,
boja-stop(0, rgb(43,194,83)),
boja-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
središnje dno,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
-moz-box-shadow:
umetnuti 0 2px 9px rgba(255,255,255,0.3),
umetnuti 0 -2px 6px rgba(0,0,0,0.4);
pozicija: relativna;
overflow: skriveno;
}
Druge boje
Promenimo boju vrlo jednostavno. Samo dodajte klasu pod nazivom "orange" ili "red" u omotač div i boja će se promijeniti.
Orange > span (
boja pozadine: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient (linearno, lijevo gore, lijevo dolje, boja-stop (0, #f1a165), boja-stop (1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}
Crvena > raspon (
boja pozadine: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient (linearno, lijevo gore, lijevo dolje, boja-stop (0, #f0a3a3), boja-stop (1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}
pruge
Takođe možemo dodati cool "prugasti" efekat dodavanjem drugog elementa na vrh našeg raspona i dajući mu ponavljajući CSS gradijent. Semantički gledano, ovo je najbolje uraditi sa pseudoelementom, pa hajde da uradimo to. Dat ćemo mu apsolutnu poziciju na određenom području našeg raspona (koja već ima vrijednost relativne pozicije), a zatim zaokružiti uglove tako da pruge ne izgledaju gadno.
Metar > raspon:nakon (
sadržaj: "";
pozicija: apsolutna;
vrh: 0; lijevo: 0; dno: 0; desno: 0;
pozadinska slika:
-webkit-gradient(linearno, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop (.75, transparentan), to (transparent)
);
pozadinska slika:
-moz-linearni-gradijent(
-45 stepeni,
rgba(255, 255, 255, .2) 25%,
transparentan 25%
transparentan 50%
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparentan 75%
transparentan
);
z-indeks: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: skriveno;
}
Animirane pruge
Samo Firefox 4 do sada može animirati pseudoelemente, a to mogu samo pretraživači iz porodice Webkit animacija korak po korak. Tako da nažalost nemamo puno mogućnosti za animiranje ovih pruga. Ako još uvijek trebate napraviti animaciju, dodajmo još jedan raspon i zamolimo Webkit porodicu pretraživača da je animira.
Raspon će biti identičan pseudo elementu, tako da samo koristimo iste vrijednosti...
Meter > span: after, .animate > span > span (
…i pokušajte izbjeći dupliranje:
Animiraj > span:after (
prikaz: nema;
}
Zatim ćemo pomaknuti poziciju pozadine dalje za vrijednost jednaku njenoj veličini:
@-webkit-keyframes move(
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
Nazovimo to animacijom:
Meter > span: after, .animate > span > span (
-webkit-animacija: linearno beskonačno premjestiti 2s;
}
Možda bi bilo vrijedno ostaviti vezu animacije i za pseudoelement, tako da će raditi čim Webkit pretraživači podrže ovu funkciju.
Animacija ispunjene širine
Nažalost, NE MOŽETE animirati element na automatskoj ili prirodnoj širini, što vjerovatno dozvoljava inline elementima da animiraju.
@-webkit-animation expandWidth(
0% ( širina: 0; )
100% ( širina: auto; )
}
Autor je prilagodio element za praćenje grešaka svih popularni pretraživači, ali u ovog trenutka ovo nije podržano. Umjesto toga, koristimo jQuery. Postavite originalnu širinu, natjerajte je na nulu, a zatim animirajte:
$(".metar > raspon").each(function() (
$(ovo)
.data("origWidth", $(this).width())
.width(0)
.animate((
širina: $(this).data("origWidth")
}, 1200);
});
To je to!
Prijevod: Vlad Merzhevich
HTML5 dodaje element trake napretka koji vam omogućava da pokažete napredak određene zadatke poput preuzimanja ili postavljanja, u osnovi bilo čega što traje neko vrijeme.
U ovom članku ćemo razgovarati o tome kako dodati ovaj element u dokument, stilizirati ga pomoću CSS-a i animirati napredak.
Počnimo.
Osnove upotrebe
Indikator se dodaje sa oznakom ; vrijednost napretka je definirana atributima value , min i max kako slijedi.
Budući da je ovo ugrađeni indikator, njegov izgled varira ovisno o platformi. Ispod je kako izgleda ugrađeni indikator u Windows i OS X.
Pokušajmo sada stilizirati ovaj element tako da izgleda isto na svim platformama.
Styling trake napretka
U listi stilova možemo koristiti birač napretka da bismo dodali stilska pravila elementu
Napredak (boja pozadine: #f3f3f3; granica: 0; visina: 18px; radijus granice: 9px; )
Međutim, postoje male razlike među pretraživačima. AT Firefox stilovi se primenjuju na sam indikator, dok se stil klizača ne menja.
AT Chrome i safari originalni stilovi se uklanjaju i zamjenjuju sa , tako da se gornji stil ne primjenjuje (do najmanje, trenutno).
Dakle, potrebno nam je nešto drugo u ovom slučaju.
U Chrome i Safari elementu
