CSS3 linearni gradienti [Nasveti CSS3]
Gradient je odličen dodatek barvnih funkcij v CSS3. Namesto da dodamo samo eno barvo, lahko zdaj dodamo več barvnih kombinacij v eni enoti deklaracije, ne da bi se zanašali na slike, kar bi lahko zmanjšalo zahtevo HTTP na naši spletni strani in omogočilo hitrejše nalaganje spletne strani..
Če ste se igrali z gradienti v CSS3, ste verjetno seznanjeni z dvema metodama: radialnim in linearnim gradientom. Današnja objava bo namenjena slednjemu.
Ustvarjanje prelivov
Ker specifikacija pravi, da gradienti v CSS3 predstavljajo sliko, nima posebnih lastnosti, kot je druga dodajanje novih funkcij, zato je deklarirana z uporabo slika ozadja namesto tega.
Če pogledamo celotno skladnjo za gradient, je videti malo pretirano, kar bi lahko privedlo do zmede pri nekaterih ljudeh.
div background-image: -webkit-linearni gradient (vrh, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linearni gradient (zgoraj, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linearni gradient (zgoraj, # FF5A00 0%, # FFAE00 100%); background-image: -o-linearni gradient (top, # FF5A00 0%, # FFAE00 100%); background-image: linearni gradient (top, # FF5A00 0%, # FFAE00 100%);
Zato se poglobimo v vsak del skladnje enega za drugim, da bi stvari postale jasnejše.
Prvič, linearni gradient je deklariran z linearni gradient () funkcijo. Funkcija ima tri primarne vrednosti. Prva vrednost določa začetni položaj gradienta. Lahko uporabite opisno ključno besedo, kot je na vrh za začetek preliva, ki teče iz. \ t na vrh;
div background-image: linearni gradient (zgoraj, # FF5A00, # FFAE00);
Zgornji odrezek je uradna različica W3C za ustvarjanje prelivov. Pravzaprav je preprostejša in precej samoumevna, prav tako pa bo ustvarila naslednji gradient.
Uporabite lahko tudi spodaj drugače prav in levo.
Lahko uporabimo tudi diagonalni gradient kota kot gradientni začetni položaj. Tukaj je primer:
div background-image: linearni gradient (45deg, # FF5A00, # FFAE00);
Zgornji odrezek bo ustvaril naslednji barvni preliv:
Druga vrednost funkcije bo povedala prva barva informacije ustavite ki je navedena v odstotkih. Stop položaj dejansko ni obvezen; brskalnik je dovolj pameten, da določi pravilen položaj, tako da, ko ne določimo zaustavitve prve barve, bo brskalnik sprejel 0% privzeto.
In naslednja vrednost je drugo barvo kombinacijo. Deluje kot prejšnja vrednost, samo če je zadnja uporabljena barva, in ne podamo ustavite, vrednost 100% bo privzeta. Zdaj pa si poglejmo spodnji primer:
div background-image: linearni gradient (vrh, # FF5A00 0%, # FFAE00 100%);
Zgornji odrezek bo ustvaril preliv, kot smo videli prej (brez razlike), zdaj pa podajamo položaj barvnega postanka;
Zdaj pa zamenjajmo barvna stop, in tokrat bomo določili 50% za prvo barvo in 51% za drugo barvo in poglejmo, kako se izkaže;
div background-image: linearni gradient (vrh, # FF5A00 50%, # FFAE00 51%);
Preglednost
Ustvarjanje preglednosti možen je tudi gradient. Za ustvarjanje učinka moramo prevesti barvo hex v rgba in spustite kanal alfa.
div background-image: linearni gradient (top, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Zgornji odrezek bo zmanjšal intenzivnost barve za 20%, in preliv bo tako:
Več barv
Če želite dodati več barv, dodajte barve poleg drugega z ločilom za vejico in pustite, da brskalnik določi vsako pozicijo barvnega postanka..
div background-image: linearni gradient (top, rdeča, oranžna, rumena, zelena, modra, indigo, vijolična);
Zgornji odrezek bo ustvaril naslednjo mavrico.
Združljivost brskalnika
Na žalost v času tega pisanja vsi trenutni brskalniki še niso podprli standardne sintakse. Še vedno potrebujejo predpono dobavitelja (-webkit-, -moz-, -gospa- in -o-). Zato je celotna sintaksa videti takole:
div background-image: -webkit-linearni gradient (vrh, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linearni gradient (zgoraj, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linearni gradient (zgoraj, # FF5A00 0%, # FFAE00 100%); background-image: -o-linearni gradient (top, # FF5A00 0%, # FFAE00 100%); background-image: linearni gradient (top, # FF5A00 0%, # FFAE00 100%);
Po drugi strani pa je Internet Explorer, še posebej različica 9 in nižja, daleč od standarda. Gradient v IE9 in spodaj je označen z filter, zato, če želimo na te brskalnike dodati preliv, moramo napisati nekaj takega;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
The filter ima svoje omejitve: prvič, ne dovoljuje več kot treh dodanih barv, ustvarjanje učinka preglednosti pa je tudi nekoliko zapleteno - ne omogoča rgba, ampak IE filter uporabe #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Tukaj je orodje, ki vam pomaga pretvoriti rgba do #ARGB.
- Demo
- Prenesi vir
Pisanje sintakse Hitreje
Kot lahko vidite zgoraj, moramo za ohranitev kompatibilnosti prelivov med brskalniki dodati še pet vrstic kod, ki so neučinkovite..
Obstaja veliko načinov, kako lahko poenostavimo nalogo; kot je uporaba brez predpone, Prefixr, LESS ali Sass za pomoč pri pripravi kod, predvsem pa priporočamo uporabo tega orodja, ColorZilla Gradient. To orodje bo preprosto ustvarilo vse potrebne kode za gradiente v vseh brskalnikih.
Končne besede
Danes smo veliko razpravljali o ustvarjanju prelivov, preučili smo vsak del sintakse, ustvarili pregledne učinke in ohranili združljivost brskalnikov. Torej, na tej točki, upamo, da že imate boljše razumevanje o tej temi.
Še vedno je veliko stvari, ki jih nameravamo raziskati CSS3 gradienti v naših prihodnjih objavah, zato ostanite na Hongkiat.com. Nazadnje, hvala, ker ste prebrali to objavo, upamo, da ste jo uživali.
Nadaljnje branje
- Bullet Proof Cross Browser RGBA ozadja - Lea Verou
- Slika CSS3 - W3.org
- Kdaj lahko uporabim CSS3 Gradients - CanIUse.com
