Vini re menjëherë se këtu nuk ka imazhe, vetëm aftësi CSS3! Meqenëse krijuesi është dizajner profesionist, ai gjithashtu mori parasysh funksionin e rikthimit për versionet më të vjetra të shfletuesve. Kështu duken shiritat në Opera 11, i cili mbështet vetëm disa parametra CSS3, por jo të gjitha.
Ju ndoshta keni menduar tashmë se në shfletuesit ku nuk ka fare mbështetje CSS3, shiritat duken pothuajse të njëjta, por edhe më të thjeshtuara.
HTML bazë
Vetë shiriti është një div me një klasë. Brenda tij do të vendosim një hapësirë që do të veprojë si zona "e mbushur" e shiritit të përparimit. Kjo mund të arrihet përmes stilimit inline. Këtu na duhet shiriti për të kuptuar se sa i plotë duhet të jetë, dhe pikërisht në raste të tilla zbatohen elemente inline... Alternativa variant i CSS do të ketë klasa si "mbush-10-përqind", "mbush-një të tretën" e kështu me radhë.
Fondacioni:
Fillimi i CSS
Div i mbështjellësit është shiriti i përparimit në shiritin tonë. Nuk kemi nevojë të vendosim një parametër të gjerësisë për ta bërë atë të shtrijë gjerësinë e plotë të elementit të bllokut prind. Sidoqoftë, mund të vendosni një parametër. Parametri i lartësisë është gjithashtu arbitrar. Është vendosur në 20 piksel, por ju mund ta vendosni sipas dëshirës. Më pas, ne do të rrumbullakojmë qoshet në të gjithë shfletuesit në të cilët kjo është e mundur dhe e vendosur hije e brëndshme për të dhënë efektin e thellësisë.
njehsor (
lartësia: 20 px; / * Mund të jetë çdo gjë * /
pozicioni: i afërm;
sfond: # 555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
kufiri-radius: 25px;
mbushje: 10 px;
-webkit-box-hije: inset 0 -1px 1px rgba (255,255,255,0.3);
-moz-box-hije: inset 0 -1px 1px rgba (255,255,255,0.3);
kuti-hije: inset 0 -1px 1px rgba (255,255,255,0.3);
}
Hapësira brenda do të mbushë një pjesë të shiritit të përparimit. Ne do ta vendosim ekranin në një lloj blloku me një parametër lartësie prej 100%. Kështu, ajo do të shtrihet në tërësi zonë e aksesueshme... Më pas, ne do të përdorim disa kode CSS3 për të krijuar gradim dhe rrumbullakim të qosheve.
Metër> hapësirë (
shfaqja: bllok;
lartësia: 100%;
-kit në internet-
-kit në internet-
kufiri-lart-djathtas-rreze: 8px;
kufiri-poshtë-djathtas-rreze: 8px;
sfond-ngjyra: rgb (43,194,83);
sfond-imazh: -webkit-gradient (
lineare,
fundi i majtë,
majtas lart,
ndalesa e ngjyrave (0, rgb (43,194,83)),
ndalimi i ngjyrave (1, rgb (84,240,84))
);
sfond-imazh: -moz-linear-gradient (
fundi qendror,
rgb (43,194.83) 37%,
rgb (84,240,84) 69%
);
-webkit-box-shadow:
-moz-box-hije:
futje 0 2px 9px rgba (255,255,255,0.3),
inset 0 -2px 6px rgba (0,0,0,0.4);
pozicioni: i afërm;
vërshoj: i fshehur;
}
Ngjyra të tjera
Le të ndryshojmë ngjyrën shumë thjesht. Thjesht shtoni një klasë të quajtur "portokalli" ose "e kuqe" në div të mbështjellësit dhe ngjyra do të ndryshojë.
portokalli> hapësirë (
ngjyra e sfondit: # f1a165;
sfond-imazh: -moz-linear-gradient (lart, # f1a165, # f36d0a);
background-image: -webkit-gradient (lineare, majtas lart, majtas poshtë, color-stop (0, # f1a165), color-stop (1, # f36d0a));
background-image: -webkit-linear-gradient (# f1a165, # f36d0a);
}
E kuqe> hapësirë (
ngjyra e sfondit: # f0a3a3;
sfond-imazh: -moz-linear-gradient (lart, # f0a3a3, # f42323);
background-image: -webkit-gradient (lineare, majtas lart, majtas poshtë, color-stop (0, # f0a3a3), color-stop (1, # f42323));
background-image: -webkit-linear-gradient (# f0a3a3, # f42323);
}
Vija
Ne gjithashtu mund të shtojmë një efekt të lezetshëm "me vija" duke shtuar një element tjetër në krye të hapësirës sonë dhe duke i dhënë atij një gradim të përsëritur CSS. Për sa i përket semantikës, kjo bëhet më së miri përmes një pseudo-elementi, kështu që le ta bëjmë atë. Ne do t'i japim një pozicion absolut mbi një zonë të caktuar të hapësirës sonë (e cila tashmë ka një vlerë relative pozicioni), dhe më pas do të rrumbullakosim qoshet në mënyrë që vijat të mos duken të pakëndshme.
Metër> hapësirë: pas (
përmbajtja: "";
pozicioni: absolut;
krye: 0; majtas: 0; fund: 0; djathtas: 0;
imazh i sfondit:
-kit-ueb-gradient (lineare, 0 0, 100% 100%,
ndalimi i ngjyrave (.25, rgba (255, 255, 255, .2)),
color-stop (.25, transparent), color-stop (.5, transparent),
ndalimi i ngjyrave (.5, rgba (255, 255, 255, .2)),
color-stop (.75, rgba (255, 255, 255, .2)),
ndalesa e ngjyrave (.75, transparente), në (transparente)
);
imazh i sfondit:
-moz-linear-gradient (
-45 gradë,
rgba (255, 255, 255, .2) 25%,
transparente 25%,
transparente 50%,
rgba (255, 255, 255, .2) 50%,
rgba (255, 255, 255, .2) 75%,
transparente 75%,
transparente
);
z-indeksi: 1;
-webkit-sfondi-madhësia: 50px 50px;
-moz-sfondi-madhësia: 50px 50px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
kufiri-lart-djathtas-rreze: 8px;
kufiri-poshtë-djathtas-rreze: 8px;
-webkit-border-lart-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-lart: 20px;
-moz-border-radius-bottomleft: 20px;
kufiri-lart-majtë-rrezja: 20px;
kufiri-poshtë-majtas-rreze: 20px;
vërshoj: i fshehur;
}
Animimi i vijave
Vetëm Firefox 4 mund të animojë pseudo-elemente deri më tani, dhe vetëm shfletuesit Webkit mund ta bëjnë këtë animacion hapash... Pra, për fat të keq, ne nuk kemi shumë mundësi për të animuar këto vija. Nëse ju duhet ende të krijoni animacion, atëherë le të shtojmë edhe një hapësirë dhe kërkojmë nga shfletuesit e familjes Webkit ta animojnë atë.
Hapësira do të jetë identike me pseudoelementin, kështu që ne thjesht përdorim të njëjtat vlera ...
Meter> span: pas, .animate> span> span (
... dhe përpiquni të shmangni dyfishimin:
Animate> hapësirë: pas (
shfaqja: asnjë;
}
Më pas, ne do ta zhvendosim pozicionimin e sfondit më tej me një vlerë të barabartë me madhësinë e tij:
@ -webkit-keyframes lëviz (
0% {
sfond-pozicion: 0 0;
}
100% {
pozicioni i sfondit: 50px 50px;
}
}
Dhe le ta quajmë animacion:
Meter> span: pas, .animate> span> span (
-webkit-animacion: lëviz 2s linear infinite;
}
Mund të ia vlen ta mbani animacionin të lidhshëm me pseudoelementin që ai të funksionojë sapo shfletuesit e Webkit të fillojnë të mbështesin këtë veçori.
Animacion me gjerësi të mbushur
Fatkeqësisht, ju NUK MUND të animoni një element në gjerësi automatike ose natyrore, gjë që ndoshta bën të mundur animimin e elementeve të linjës.
@ -webkit-animation zgjerimi Gjerësia (
0% (gjerësia: 0;)
100% (gjerësia: automatik;)
}
Autori ka përshtatur elementin për gjurmuesit e gabimeve të të gjithëve shfletues të njohur por në ky moment nuk mbështetet. Në vend të kësaj, le të përdorim jQuery. Vendosni gjerësinë origjinale, detyrojeni atë në zero dhe më pas animoni:
$ (". metër> hapësirë"). secili (funksion () (
$ (kjo)
.data ("origWidth", $ (this) .width ())
.gjerësia (0)
.animate ((
gjerësia: $ (kjo) .data ("origWidth")
}, 1200);
});
Tani keni mbaruar!
Përkthim: Vlad Merzhevich
HTML5 shton një element të shiritit të progresit për të treguar përparimin detyra specifike si shkarkimi ose ngarkimi, në thelb çdo gjë që kërkon pak kohë.
Në këtë artikull, ne do të diskutojmë se si ta shtoni këtë element në dokumentin tuaj, ta stiloni atë me CSS dhe të animoni përparimin.
Le të fillojmë.
Bazat e përdorimit
Treguesi shtohet nga një etiketë; vlera e progresit përcaktohet nga atributet vlera, min dhe max si më poshtë.
Meqenëse po flasim për një tregues të integruar, pamja e tij ndryshon në varësi të platformës. Më poshtë është se si duket treguesi i integruar në Windows dhe OS X.
Tani le të provojmë ta stilojmë këtë element në mënyrë që të duket i njëjtë në të gjitha platformat.
Stilimi i shiritit të përparimit
Në fletën e stilit, ne mund të përdorim përzgjedhësin e progresit për të shtuar rregullat e stilit në element
Përparimi (ngjyra e sfondit: # f3f3f3; kufiri: 0; lartësia: 18 px; rrezja e kufirit: 9 px;)
Megjithatë, ka dallime të vogla në shfletues. V Firefox stilet aplikohen në vetë treguesin, ndërsa stili i rrëshqitësit nuk ndryshon.
V krom dhe Safari stilet origjinale janë hequr dhe zëvendësuar me, kështu që stili i mësipërm nuk zbatohet (nga të paktën, aktualisht).
Pra, ne kemi nevojë për diçka tjetër në këtë rast.
Në Chrome dhe Safari, elementi
