CSS3-lineaariset gradientit [CSS3-vinkit]
Kaltevuus on hieno väriominaisuus CSS3: ssa. Sen sijaan, että vain lisätään yhden värin, voimme nyt lisätä useita värien yhdistelmiä yhteen ilmoituslohkoon ilman, että luotamme kuviin, jotka saattavat vähentää HTTP-pyyntöä sivustossamme, jolloin verkkosivusto latautuu nopeammin.
Jos olet soittanut CSS3: n gradienttien kanssa, olet todennäköisesti perehtynyt kahteen menetelmään: säteittäiseen ja lineaariseen gradienttiin. Tämän päivän viesti on jälkimmäinen.
Gradienttien luominen
Koska CSS3: n spesifikaatit ovat kuva, sillä ei ole erityistä ominaisuutta, kuten muita uusia ominaisuuksia, joten se on ilmoitettu käyttämällä taustakuva sijasta.
Jos tarkastelemme gradientin koko syntaksia, se näyttää hieman pehmustettu, jotka saattavat aiheuttaa sekaannusta joillekin ihmisille.
div tausta-kuva: -webkit-lineaarinen gradientti (alkuun, # FF5A00 0%, # FFAE00 100%); taustakuva: -moz-linear-gradient (alkuun, # FF5A00 0%, # FFAE00 100%); taustakuva: -ms-lineaarinen kaltevuus (alkuun, # FF5A00 0%, # FFAE00 100%); taustakuva: -o-lineaarinen gradientti (alkuun, # FF5A00 0%, # FFAE00 100%); taustakuva: lineaarinen kaltevuus (alkuun, # FF5A00 0%, # FFAE00 100%);
Joten kaivaa jokainen osa syntaksia yksitellen, jotta asiat olisivat selkeämpiä.
Ensinnäkin lineaarinen gradientti ilmoitetaan lineaarinen-gradientti () toimia. Toiminnolla on kolme ensisijaista arvoa. Ensimmäinen arvo määrittää gradientin aloitusaseman. Voit käyttää kuvailevaa avainsanaa, kuten ylin käynnistää ylin;
div taustakuva: lineaarinen kaltevuus (alkuun, # FF5A00, # FFAE00);
Yllä oleva katkaisu on W3C: n virallinen versio gradienttien luomiseksi. Se on itse asiassa yksinkertaisempi ja itsestään selvä, ja se luo myös seuraavan kaltevuuden.
Voit myös käyttää pohja tehdä päinvastoin tai muuten oikea ja vasen.
Voimme myös luoda diagonaalisen gradientin käyttämällä kulma-aste gradientin lähtöasentona. Tässä on esimerkki:
div taustakuva: lineaarinen gradientti (45deg, # FF5A00, # FFAE00);
Yllä oleva fragmentti luo seuraavan värivaiheen:
Toiminnon toinen arvo kertoo ensimmäinen väri ja sen tiedot pysäytysasento joka ilmoitetaan prosentteina. Pysäytysasento on itse asiassa valinnainen; selain on riittävän älykäs määrittämään oikea sijainti, joten kun emme määritä ensimmäisen värin pysäytystä, selain ottaa sen 0% oletuksena.
Ja seuraava arvo on toinen väri yhdistelmä. Se toimii kuten edellinen arvo, vain, jos se on viimeinen väri, jota emme ole määrittäneet pysäytysasento, arvo on 100% oletuksena. Katsokaamme nyt seuraavaa esimerkkiä:
div taustakuva: lineaarinen kaltevuus (alkuun, # FF5A00 0%, # FFAE00 100%);
Yllä oleva katkaisu luo kaltevuuden kuin mitä aiemmin näimme (ei eroa), mutta nyt määritetään värin pysäytysasento;
Muutetaan nyt väri pysähtyy, ja tällä kertaa määrittelemme 50% ensimmäisen värin ja 51% toiselle värille, ja katsotaanpa, miten se käy ilmi;
div taustakuva: lineaarinen kaltevuus (alkuun, # FF5A00 50%, # FFAE00 51%);
läpinäkyvyys
luominen läpinäkyvyys gradientissa on myös mahdollista. Voit luoda vaikutuksen kääntämällä värin hex osaksi RGBA tila ja alenna alfa-kanava.
div taustakuva: lineaarinen gradientti (alkuun, rgba (255,90,0,0,2), rgb (255,174,0,0.2));
Yllä oleva katkaisu alentaa värin voimakkuutta 20%, ja kaltevuus muuttuu näin:
Useita värejä
Jos haluat lisätä värejä, lisää värit vierekkäin pilkulla, ja anna selaimelle määrittää jokainen värin pysäytysasento.
div taustakuva: lineaarinen gradientti (alkuun, punainen, oranssi, keltainen, vihreä, sininen, indigo, violetti);
Yllä oleva katkaisu luo seuraavan sateenkaaren.
Selaimen yhteensopivuus
Valitettavasti tämän kirjoituksen aikana kaikki nykyiset selaimet eivät ole vielä tukeneet standardin syntaksia. He tarvitsevat edelleen myyjän etuliitteen (-webKit-, -MOZ-, -neiti- ja -O-). Siksi täydellinen syntaksi näyttää näin:
div tausta-kuva: -webkit-lineaarinen gradientti (alkuun, # FF5A00 0%, # FFAE00 100%); taustakuva: -moz-linear-gradient (alkuun, # FF5A00 0%, # FFAE00 100%); taustakuva: -ms-lineaarinen kaltevuus (alkuun, # FF5A00 0%, # FFAE00 100%); taustakuva: -o-lineaarinen gradientti (alkuun, # FF5A00 0%, # FFAE00 100%); taustakuva: lineaarinen kaltevuus (alkuun, # FF5A00 0%, # FFAE00 100%);
Toisaalta Internet Explorer, erityisesti versio 9 ja alempi, on kaukana standardista. Kaltevuus vuonna IE9 ja alla on ilmoitettu suodattaa, joten jos haluamme lisätä gradienttia näille selaimille, meidän on kirjoitettava jotain tällaista;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
suodattaa sillä on rajoitukset: ensinnäkin se ei salli useamman kuin kolmen värin lisäämistä, ja läpinäkyvyysvaikutuksen luominen on myös hieman hankalaa - se ei salli RGBA, mutta IE suodattaa käyttötarkoitukset #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Tässä on työkalu, jonka avulla voit muuntaa RGBA että #ARGB.
- esittely
- Lataa lähde
Syntaksin nopeammin kirjoittaminen
Kuten yllä on nähtävissä, jotta selaimien yhteensopivuus voidaan säilyttää, meidän on lisättävä vielä viisi riviä koodeja, jotka ovat tehottomia.
On monia tapoja, joilla voimme yksinkertaistaa tehtävää; esim. Prefix-vapaana, Prefixrin, LESS: n tai Sassin avulla koodien kääntämiseksi, mutta ennen kaikkea suosittelemme tätä työkalua, ColorZilla Gradientia. Tämä työkalu luo yksinkertaisesti kaikki tarvittavat koodit gradienttien toimimiseksi kaikissa selaimissa.
Lopulliset sanat
Tänään olemme keskustelleet melko paljon gradienttien luomisesta, olemme tutkineet jokaisen syntaksin osan, luomalla läpinäkyviä tehosteita ja ylläpitämällä selaimen yhteensopivuutta. Joten tässä vaiheessa toivomme, että sinulla on jo parempi käsitys aiheesta.
On vielä monia asioita, joita aiomme tutkia CSS3-gradientit tulevissa virkoissamme, joten pysy vireissä Hongkiat.com-sivustossa. Lopuksi kiitos, että luet tämän viestin, toivomme, että nautit siitä.
Lue lisää
- Bullet Proof Cross Browser RGBA-tausta - Lea Verou
- CSS3 Kuva - W3.org
- Milloin voin käyttää CSS3-gradientteja - CanIUse.com
