CSS3 linijiniai gradientai [CSS3 patarimai]
Gradientas yra puikus spalvų funkcijos papildymas CSS3. Užuot tik pridėję vieną spalvą, dabar galime pridėti kelis spalvų derinius vienoje deklaracijos bloke, nesiremdami vaizdais, kurie gali sumažinti HTTP užklausą mūsų svetainėje, leidžiantį sparčiau įkelti svetainę.
Jei žaidėte aplink su CSS3 gradientais, tikriausiai esate susipažinę su dviem būdais: radialiniu ir linijiniu gradientu. Šiandienos pranešimas bus apie pastarąjį.
Gradientų kūrimas
Kadangi „CSS3“ specifikacijoje esantis gradientas yra atvaizdas, jis neturi specialių savybių, kaip ir kitas naujas funkcijų papildymas, todėl jis yra paskelbtas naudojant fono vaizdas vietoj to.
Jei pažvelgsime į visą gradiento sintaksę, tai atrodo šiek tiek perteklius, kuris gali sukelti painiavą kai kuriems žmonėms.
div background-image: -webkit-linijinis gradientas (viršuje, # FF5A00 0%, # FFAE00 100%); fono vaizdas: -moz-linijinis gradientas (viršuje, # FF5A00 0%, # FFAE00 100%); fono vaizdas: -ms-linijinis gradientas (viršuje, # FF5A00 0%, # FFAE00 100%); fono vaizdas: -o-linijinis gradientas (viršuje, # FF5A00 0%, # FFAE00 100%); fono paveikslėlis: tiesinis gradientas (viršuje, # FF5A00 0%, # FFAE00 100%);
Taigi kaskart į kiekvieną sintaksės dalį iškirpime, kad būtų aiškiau.
Pirmiausia, linijinis gradientas yra deklaruojamas su tiesinis gradientas () funkcija. Funkcija turi tris pagrindines vertes. Pirmoji vertė nustato gradiento pradinę padėtį. Galite naudoti aprašomąjį raktinį žodį, pvz viršuje pradėti gradientą, tekantį iš viršuje;
div background-image: linijinis gradientas (viršuje, # FF5A00, # FFAE00);
Pirmiau pateiktas fragmentas yra oficiali W3C versija norint sukurti gradientus. Tai iš tikrųjų yra paprastesnė ir gana savaime suprantama ir taip pat sukurs tokį gradientą.
Taip pat galite naudoti apačioje daryti priešingai, ar kitaip teisė ir kairėje.
Naudodami kampo laipsnis kaip gradiento pradinę padėtį. Štai pavyzdys:
div background-image: linijinis gradientas (45deg, # FF5A00, # FFAE00);
Pirmiau minėtas fragmentas sukurs šiuos spalvų gradientus:
Antroji funkcijos reikšmė pasakys pirmoji spalva informacija ir jos informacija sustabdymo padėtis nurodyta procentais. Stabdymo padėtis iš tikrųjų yra neprivaloma; naršyklė yra pakankamai protinga, kad nustatytų tinkamą padėtį, todėl, kai nenurodome pirmosios spalvos sustabdymo, naršyklė imsis 0% kaip numatytąjį.
Ir kita vertė yra antroji spalva derinys. Jis veikia kaip ir ankstesnė vertė, tik jei ji yra paskutinė taikoma spalva, o mes nenurodome sustabdymo padėtis, vertė yra 100% bus laikomas numatytuoju. Dabar pažiūrėkime į žemiau pateiktą pavyzdį:
div background-image: linijinis gradientas (viršuje, # FF5A00 0%, # FFAE00 100%);
Pirmiau minėtas fragmentas sukurs gradientą, panašų į tai, ką matėme anksčiau (be skirtumo), bet dabar nurodome spalvų sustabdymo padėtį;
Dabar pakeiskime spalvos sustojimas, ir šį kartą mes nurodysime 50% pirmą spalvą ir 51% už antrą spalvą ir pažiūrėkime, kaip paaiškėja;
div background-image: linijinis gradientas (viršutinis, # FF5A00 50%, # FFAE00 51%);
Skaidrumas
Kurti skaidrumą gradientu taip pat galima. Norint sukurti efektą, turime išversti spalvą hex į rgba režimą ir nuleiskite alfa kanalą.
div background-image: tiesinis gradientas (viršuje, rgba (255,90,0,0,2), rgb (255,174,0,0.2));
Pirmiau minėtas fragmentas sumažins spalvų intensyvumą iki 20%, ir gradientas pasirodys taip:
Kelių spalvų
Jei norite pridėti daugiau spalvų, tiesiog pridėkite prie kitos esančių spalvų su kableliais ir leiskite naršyklei nustatyti kiekvienos spalvos sustabdymo padėtį.
div background-image: linijinis gradientas (viršuje, raudona, oranžinė, geltona, žalia, mėlyna, indigo, violetinė);
Pirmiau minėtas fragmentas sukurs šią vaivorykštę.
Naršyklės suderinamumas
Deja, šio rašymo metu visos dabartinės naršyklės dar turi palaikyti standartinę sintaksę. Jiems vis tiek reikalingas pardavėjo prefiksas (-žiniatinklio rinkinys-, -moz-, -ms- ir -o-). Taigi, todėl visa sintaksė atrodo tokia:
div background-image: -webkit-linijinis gradientas (viršuje, # FF5A00 0%, # FFAE00 100%); fono vaizdas: -moz-linijinis gradientas (viršuje, # FF5A00 0%, # FFAE00 100%); fono vaizdas: -ms-linijinis gradientas (viršuje, # FF5A00 0%, # FFAE00 100%); fono vaizdas: -o-linijinis gradientas (viršuje, # FF5A00 0%, # FFAE00 100%); fono paveikslėlis: tiesinis gradientas (viršuje, # FF5A00 0%, # FFAE00 100%);
Kita vertus, „Internet Explorer“, ypač 9 versija ir mažesnė, yra toli nuo standarto. Gradientas IE9 ir žemiau yra deklaruojami filtras, taigi, jei norime pridėti gradientą šiose naršyklėse, turime parašyti kažką panašaus;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
The filtras turi savo apribojimų: pirma, ji neleidžia pridėti daugiau nei trijų spalvų, o skaidrumo efekto sukūrimas taip pat yra šiek tiek sudėtingas - tai neleidžia rgba, bet IE filtras naudoja #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Čia yra įrankis, padedantis konvertuoti rgba į #ARGB.
- Demo
- Atsisiųsti šaltinį
Sintaksės spartesnis rašymas
Kaip matote aukščiau, norint išlaikyti gradientų suderinamumą visose naršyklėse, turime pridėti dar penkias neveiksmingas kodų eilutes..
Yra daug būdų, kaip mes galime supaprastinti užduotį; pvz., naudojant „Prefix-free“, „Prefixr“, „LESS“ arba „Sass“, kad padėtų surinkti kodus, bet visų pirma, rekomenduojame naudoti šį įrankį „ColorZilla Gradient“. Šis įrankis paprasčiausiai sukurs visus reikiamus gradientų kodus visoms naršyklėms.
Galutiniai žodžiai
Šiandien mes daug diskutavome apie gradientų kūrimą, pažvelgėme į kiekvieną sintaksės dalį, kurdami skaidrius efektus ir palaikydami naršyklės suderinamumą. Taigi, šiuo metu tikimės, kad jau turite geresnį supratimą šiuo klausimu.
Dar yra daug dalykų, kuriuos planuojame ištirti CSS3 gradientai mūsų būsimuose pranešimuose, todėl likite suderinti su „Hongkiat.com“. Galiausiai, ačiū, kad perskaitėte šį pranešimą, tikimės, kad jums tai patiko.
Papildoma literatūra
- Bullet Proof Cross Browser RGBA fonas - Lea Verou
- CSS3 vaizdas - W3.org
- Kada galiu naudoti CSS3 gradientus - CanIUse.com
