CSS3 lineaarsed gradientid [CSS3 näpunäited]
Gradient on suurepärane värvifunktsiooni lisamine CSS3-s. Selle asemel, et lisada ainult üht värvi, saame nüüd lisada ühes deklaratsiooniplokis mitu värvikombinatsiooni ilma, et toetuksime piltidele, mis võiksid vähendada meie veebisaidi HTTP-taotlust, mis võimaldab veebisaidil kiiremini laadida.
Kui olete CSS3-ga gradiendiga mänginud, siis olete ilmselt tuttav kahe meetodiga: radiaalne ja lineaarne gradient. Tänane postitus on viimane.
Gradientide loomine
Kuna CSS3 spetsifikaadi gradient on kujutis, ei ole sellel mingit erilist omadust nagu muu uue funktsiooni lisamine, nii et see on deklareeritud kasutades taustapilt
asemel.
Kui vaatame gradienti täielikku süntaksit, tundub see veidi liialdatud, mis võib mõnede inimeste jaoks segadust tekitada.
div background-image: -webkit-lineaarne gradient (ülemine, # FF5A00 0%, # FFAE00 100%); taustapilt: -moz-linear-gradient (ülemine, # FF5A00 0%, # FFAE00 100%); taustapilt: -ms-lineaarne gradient (ülemine, # FF5A00 0%, # FFAE00 100%); taustapilt: -o-lineaarne gradient (ülemine, # FF5A00 0%, # FFAE00 100%); taustapilt: lineaarne gradient (ülemine, # FF5A00 0%, # FFAE00 100%);
Nii et laseme iga süntaksi osa ükshaaval, et asjad selgemaks teha.
Kõigepealt deklareeritakse lineaarse gradiendiga lineaarne gradient ()
funktsiooni. Funktsioonil on kolm põhiväärtust. Esimene väärtus määrab gradienti alguspunkti. Võite kasutada kirjeldavat märksõna, näiteks top
alustada gradienti, mis voolab top;
div background-image: lineaarne gradient (ülemine, # FF5A00, # FFAE00);
Eespool toodud fragment on ametlik versioon W3C-st, et luua gradiente. See on tegelikult lihtsam ja üsna iseenesestmõistetav ning loob ka järgmise gradienti.
Võite kasutada ka põhja
teha vastupidist või muidu õigus
ja vasakule
.
Võime luua ka diagonaalse gradienti kasutades nurga aste
kui gradienti lähtepositsioon. Siin on näide:
div taustapilt: lineaarne gradient (45deg, # FF5A00, # FFAE00);
Ülaltoodud väljavõte loob järgmise värvilaiendi:
Funktsiooni teine väärtus ütleb esimene värv teabe ja selle kohta peatusasend protsentides. Peatusasend on tegelikult vabatahtlik; brauser on piisavalt nutikas, et määrata õige asukoht, nii et kui me ei täpsusta esimese värvi peatust, siis brauser võtab seda 0%
vaikimisi.
Ja järgmine väärtus on teine värv kombinatsioon. See toimib nagu eelmine väärtus, ainult siis, kui see on viimane värv ja me ei täpsustanud peatusasend, väärtus 100%
võetakse vaikimisi. Vaatame nüüd alltoodud näidet:
div background-image: lineaarne gradient (ülemine, # FF5A00 0%, # FFAE00 100%);
Ülaltoodud väljavõte loob gradienti, mida me varem nägime (erinevust pole), kuid nüüd täpsustame värvipeatuse positsiooni;
Nüüd muutkem värvipeatus, ja seekord täpsustame 50%
esimese värvi ja 51%
teise värvi jaoks ja vaatame, kuidas see selgub;
div background-image: lineaarne gradient (ülemine, # FF5A00 50%, # FFAE00 51%);
Läbipaistvus
Loomine läbipaistvust
gradient on samuti võimalik. Selle efekti loomiseks peame värvi tõlkima hex
sisse rgba
režiimis ja alfa-kanalit alandada.
div taustapilt: lineaarne gradient (ülemine, rgba (255,90,0,0,2), rgb (255,174,0,0.2));
Eespool toodud fragment vähendab värvi intensiivsust 20%
, ja kaldenurk muutub selliseks:
Mitmed värvid
Kui soovite lisada rohkem värve, lisage lihtsalt värvid kõrvale koma eraldajaga ja laske brauseril määrata iga värvipeatuse asend.
div background-image: lineaarne gradient (ülemine, punane, oranž, kollane, roheline, sinine, indigo, violetne);
Eespool toodud fragment loob järgmise vikerkaare.
Brauseri ühilduvus
Kahjuks on selle kirjutamise ajal kõik praegused brauserid veel standardse süntaksit toetanud. Nad vajavad ikka müüja eesliidet (-webkit-
, -moz-
, -Prl-
ja -o-
). Niisiis näib kogu süntaks olevat selline:
div background-image: -webkit-lineaarne gradient (ülemine, # FF5A00 0%, # FFAE00 100%); taustapilt: -moz-linear-gradient (ülemine, # FF5A00 0%, # FFAE00 100%); taustapilt: -ms-lineaarne gradient (ülemine, # FF5A00 0%, # FFAE00 100%); taustapilt: -o-lineaarne gradient (ülemine, # FF5A00 0%, # FFAE00 100%); taustapilt: lineaarne gradient (ülemine, # FF5A00 0%, # FFAE00 100%);
Teisest küljest on Internet Explorer, eriti versioon 9 ja madalam, standardist kaugel. Gradient in IE9 ja allpool on deklareeritud filter
, nii et kui soovime nendele brauseritele gradienti lisada, peame kirjutama midagi sellist;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
The filter
tal on oma piirangud: esiteks ei võimalda see lisada rohkem kui kolm värvi ning läbipaistvusefekti loomine on samuti veidi keeruline - see ei võimalda rgba
, kuid IE filter
kasutab #ARGB
;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Siin on tööriist, mis aitab teil teisendada rgba
kuni #ARGB
.
- Demo
- Allalaadimise allikas
Süntaksi kiirem kirjutamine
Nagu näete ülalpool, peame sirvijate gradiendi ühilduvuse säilitamiseks lisama veel viis rea, mis on ebaefektiivne.
Ülesannete lihtsustamiseks on palju võimalusi; näiteks prefiksivaba, prefiksi, LESS või Sass abil koodide koostamiseks, kuid ennekõike soovitame kasutada seda tööriista, ColorZilla Gradient. See tööriist loob lihtsalt kõik vajalikud koodid gradientide jaoks, et töötada kõigis brauserites.
Lõplikud sõnad
Täna oleme arutelude gradientide loomise üle palju arutanud, me oleme uurinud iga süntaksi osa, luues läbipaistvaid efekte ja säilitades brauseri ühilduvuse. Seega loodame, et teil on selles küsimuses juba parem arusaam.
On veel palju asju, mida plaanime uurida CSS3 gradientid meie tulevastes postitustes, nii et jäta hääl Hongkiat.com-le. Lõpetuseks, tänan teid selle postituse lugemise eest, loodame, et teile see meeldis.
Lisalugemist
- Bullet Proof Cross Browser RGBA taustad - Lea Verou
- CSS3 pilt - W3.org
- Millal saab kasutada CSS3 gradiente - CanIUse.com