CSS3 linearni gradijenti [CSS3 savjeti]
Gradijent je izvrstan dodatak bojama u CSS3. Umjesto dodavanja samo jedne boje, sada možemo dodati više kombinacija boja u jedan blok deklaracije, a da se ne oslanjamo na slike, što bi moglo smanjiti HTTP zahtjev na našoj web-lokaciji omogućujući brže učitavanje web-lokacije.
Ako ste se igrali s gradijentima u CSS3 vjerojatno ste upoznati s dvije metode: radijalnim i linearnim gradijentom. Današnji post će biti o potonjem.
Stvaranje gradijenta
Budući da specifikacija kaže da gradijenti u CSS3 predstavljaju sliku, ona nema posebnu osobinu kao što je dodavanje nove značajke, pa je deklarirana pomoću pozadinska slika umjesto toga.
Ako pogledamo potpunu sintaksu gradijenta, izgleda malo overstuffed, što bi za neke ljude moglo dovesti do zabune.
div background-image: -webkit-linearni gradijent (vrh, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linearni gradijent (gore, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linearni gradijent (gore, # FF5A00 0%, # FFAE00 100%); background-image: -o-linearni gradijent (gore, # FF5A00 0%, # FFAE00 100%); background-image: linearni gradijent (gore, # FF5A00 0%, # FFAE00 100%);
Tako ćemo proučiti svaki dio sintakse jednu po jednu kako bi stvari bile jasnije.
Prije svega, linearni gradijent je deklariran sa linearni gradijent-() funkcija. Funkcija ima tri primarne vrijednosti. Prva vrijednost određuje početnu poziciju gradijenta. Možete koristiti opisnu ključnu riječ, npr vrh za početak gradijenta koji teče iz vrh;
div background-image: linearni gradijent (gore, # FF5A00, # FFAE00);
Gornji isječak je službena verzija W3C za stvaranje preliva. To je zapravo jednostavnije i razumljivije i također će stvoriti sljedeći gradijent.
Također možete koristiti dno učiniti suprotno, inače pravo i lijevo.
Također možemo stvoriti dijagonalni gradijent koristeći kutni stupanj kao početni položaj gradijenta. Evo primjera:
div background-image: linearno-gradijent (45deg, # FF5A00, # FFAE00);
Gornji isječak stvorit će sljedeći gradijent boje:
Druga vrijednost funkcije će reći prva boja informacije i njezine zaustaviti koja je navedena u postocima. Položaj zaustavljanja zapravo je opcionalan; preglednik je dovoljno pametan da odredi ispravnu poziciju, tako da kada ne odredimo zaustavljanje prve boje, preglednik će to učiniti 0% kao zadani.
I sljedeća vrijednost je druga boja kombinacija. Djeluje kao prethodna vrijednost, samo ako je zadnja primijenjena boja, a mi ne specificiramo zaustaviti, vrijednost 100% bit će zadana. Sada, pogledajmo primjer u nastavku:
div background-image: linearno-gradijent (vrh, # FF5A00 0%, # FFAE00 100%);
Gornji dio isječka stvorit će gradijent poput onoga što smo vidjeli ranije (nema razlike), ali sada određujemo poziciju za zaustavljanje boje;
Sada ćemo promijeniti zaustavljanje boje, i ovaj put ćemo odrediti 50% za prvu boju i 51% za drugu boju i da vidimo kako se ispostavlja;
div background-image: linearno-gradijent (vrh, # FF5A00 50%, # FFAE00 51%);
prozirnost
stvaranje prozirnost u gradijentu je također moguće. Za stvaranje efekta potrebno je prevesti boju hex u RGBA i smanjite alfa kanal.
div background-image: linearno-gradijent (vrh, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Gornji isječak će smanjiti intenzitet boje za 20%, i nagib će ispasti ovako:
Više boja
Ako želite dodati više boja, samo dodajte boje uz drugu s razdjelnikom zarezom i neka preglednik odredi svaku poziciju zaustavljanja boja.
div background-image: linearni gradijent (vrh, crvena, narančasta, žuta, zelena, plava, indigo, ljubičasta);
Gornji isječak će stvoriti sljedeću dugu.
Kompatibilnost preglednika
Nažalost, u vrijeme pisanja ovog teksta, svi trenutni preglednici još nisu podržali standardnu sintaksu. Potreban im je prefiks dobavljača (-WebKit-, -moz-, -ms- i -o-). Stoga se čini da je cijela sintaksa ovako:
div background-image: -webkit-linearni gradijent (vrh, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linearni gradijent (gore, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linearni gradijent (gore, # FF5A00 0%, # FFAE00 100%); background-image: -o-linearni gradijent (gore, # FF5A00 0%, # FFAE00 100%); background-image: linearni gradijent (gore, # FF5A00 0%, # FFAE00 100%);
S druge strane, Internet Explorer, posebno verzija 9 i niža, daleko je od standarda. Gradijent u IE9 i ispod je deklarirano sa filtar, pa ako želimo dodati gradijent na te preglednike, moramo napisati nešto poput ovoga;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
filtar ima svoja ograničenja: prvo, ne dopušta dodavanje više od tri boje, a stvaranje efekta transparentnosti također je malo zeznuto - ne dopušta RGBA, ali IE filtar namjene #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Ovdje je alat koji će vam pomoći pretvoriti RGBA do #ARGB.
- Demo
- Preuzimanje izvora
Pisanje sintakse Brže
Kao što možete vidjeti gore, kako bismo održali kompatibilnost gradijenta među preglednicima, moramo dodati još pet redaka kodova koji su neučinkoviti.
Postoji mnogo načina na koje možemo pojednostaviti zadatak; kao što je korištenje Prefix-free, Prefixr, LESS ili Sass kako bi se kompajlirali kodovi, ali prije svega, preporučujemo korištenje ovog alata, ColorZilla Gradient. Ovaj alat će jednostavno generirati sve potrebne kodove za gradijente u svim preglednicima.
Završne riječi
Danas smo dosta raspravljali o stvaranju gradijenata, u svakom smo dijelu sintakse, stvarali transparentne efekte i održavali kompatibilnost preglednika. Dakle, u ovom trenutku, nadamo se da već imate bolje razumijevanje o toj temi.
Postoji još mnogo stvari na kojima planiramo istražiti CSS3 gradijenti u našim budućim postovima, stoga ostanite na Hongkiat.com. Na kraju, hvala što ste pročitali ovaj post, nadamo se da ste uživali.
Daljnje čitanje
- Bullet Proof Cross Browser RGBA Pozadine - Lea Verou
- CSS3 slika - W3.org
- Kada mogu koristiti CSS3 gradijente - CanIUse.com
