Stvaranje linearnih gradijenta križnog preglednika s CSS3

01 od 04

Stvaranje linearnih gradijenta križnog preglednika s CSS3

Linearni gradijenti

Najčešći tip gradijenta vidjet ćete linearni gradijent dviju boja. To znači da se gradijent kreće ravnom linijom koja se postupno mijenja od prve boje do druge duž točke. Slika na ovoj stranici prikazuje jednostavan gradijent lijevo-desno od # 999 (tamno sivo) do #fff (bijelo).

Linearni gradijenti su najlakše definirati i imati najviše podrške u preglednicima. CSS3 linearni gradijenti podržani su za Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ i Safari 4+. Internet Explorer može dodati gradijente pomoću a filtar i podržava ih natrag u IE 5.5. Ovo nije CSS3, ali je opcija za kompatibilnost unakrsnog preglednika.

Kada definirate gradijent, potrebno je definirati nekoliko različitih stvari:

Koju vrstu gradijenta to jest-linearan ili radijalan
Gdje bi gradijent trebao početi
Gdje se gradijent trebao zaustaviti
Koje su boje u gradijentu i gdje treba početi i zaustaviti

Da biste definirali linearne gradijente pomoću CSS3, upisujete:

linearni gradijent-(kut ili stranu ili kutu, boja zaustavljanja, boja zaustavljanja)

Prvo definirate vrstu gradijenta s imenom linearan -gradijent.

Zatim definirate početne i zaustavne točke gradijenta na jedan od dva načina: kut linije u stupnjevima od 0 do 359, s 0 stupnjeva ravno prema gore. Ili s funkcijom "bočna ili kutna", kao što je lijevo, pravo, dno, i vrh, To će biti detaljnije objašnjeno na sljedećoj stranici. Ako ih ostavite van, gradijent će proći od vrha do dna elementa.

Zatim definirate zaustavljanje boja. Definirate zaustavljanje boja pomoću koda boje i dodatnog postotka. Postotak govori pregledniku gdje će se na liniji započeti ili završiti s tom bojom. Zadano je postaviti boje ravnomjerno uz liniju. Na stranici 3 saznat ćete više o zaustavljanju boja.

Dakle, da biste definirali gornji gradijent sa CSS3, pišete:
linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);
I postaviti ga kao pozadinu a DIV pišete:
div {pozadinska slika: linearni gradijent (lijevo, # 999999 0%, #ffffff 100%;}
Proširenja preglednika za CSS3 linearne gradijente

Kako bi vaš gradijent funkcionirao s unakrsnim preglednikom, trebate koristiti proširenja preglednika za većinu preglednika i a filtar za Internet Explorer 9 i niže (zapravo 2 filtra). Svi ovi sadrže iste elemente kako biste definirali svoj gradijent (osim što možete definirati samo gradijente u 2 boje u IE).

Microsoftovi filtri i proširenje-Internet Explorer je najzahtjevniji za podršku, jer trebate tri različite linije za podršku različitim verzijama preglednika. Da biste dobili gore sivi do bijelog gradijenta pisali biste:
/ * IE 5.5-7 * /filtar: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8-9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);
Mozilla proširenje-U -moz- proširenje funkcionira poput CSS3 svojstva, samo s -moz- proširenje. Da biste dobili gore navedeni gradijent za Firefox, upišite:
-moz linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);
Opera Extension-U -o- proširenje dodaje gradijente Opera 11.1+. Da biste dobili gore navedeni gradijent, upišite:
o-linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);
Webkit ekstenzija-U -webkit- proširenje funkcionira puno kao svojstvo CSS3. Da biste definirali gornji gradijent za Safari 5.1+ ili Chrome 10+, upišete:
-webkit-linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);
Tu je i starija verzija proširenja Webkit koja funkcionira s Chromeom 2+ i Safari 4+. U njemu se definira vrsta gradijenta kao vrijednost, a ne naziv imovine. Da biste dobili sivi do bijelog gradijenta s ovim proširenjem, napišite:
-webkit-gradijent (linearni, lijevi gornji, desni vrh, zaustavljanje boje (0%, # 999999), zaustavljanje boje (100%, # ffffff));
CSS3 linearni gradijentni CSS kôd

Za punu podršku za cross-preglednik da biste dobili sivi do bijelog gradijenta iznad, prvo biste trebali uključiti rezervnu čvrstu boju za preglednike koji ne podržavaju gradijente, a posljednja bi stavka trebala biti stil CSS3 za preglednike koji su u potpunosti usklađeni. Dakle, pišete:
pozadina: # 999999;pozadina: -moz linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);pozadina: -webkit-gradient (linearni, lijevi gornji, desni vrh, zaustavljanje boje (0%, # 999999), zaustavljanje boje (100%, # ffffff));pozadina: -webkit-linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);pozadina: -o-linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);pozadina: -ms-linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);filtar: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progID: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);pozadina: linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);
Sljedeće stranice u ovom vodiču detaljnije objašnjavaju dijelove gradijenta, a posljednja stranica upućuje na alat koji je izvrstan način stvaranja CSS3 gradijenata automatski.

Pogledajte ovaj linearni gradijent u akciji pomoću samo CSS-a.
02 od 04
Izrada dijagonalnih gradijenta - kut gradijenta

Točke početka i zaustavljanja određuju kut gradijenta. Većina linearnih gradijenta su od vrha do dna ili lijevu udesno. No, moguće je graditi gradijent koji se kreće na dijagonalnoj liniji. Slika na ovoj stranici prikazuje jednostavan gradijent koji se kretao u kutu od 45 stupnjeva prema slici s desna na lijevo.

Kutovi za određivanje linije gradijenta

Kut je linija na zamišljenom krugu u središtu elementa. 0deg ukazuje na, 90deg pokazuje desno, 180deg ukazuje na, i 270deg pokazuje lijevo. Možete odrediti bilo koji kut od 0 do 359 stupnjeva.

Trebali biste primijetiti da se u kvadratu od 45 stupnjeva pomiče od gornjeg lijevog kuta do donje desne strane, ali u pravokutniku početne i završne točke su blago izvan oblika, kao što možete vidjeti na slici.

Najčešći način definiranja dijagonalnog gradijenta je definiranje kuta, kao što je Gore desno i gradijent će se pomaknuti od tog kuta do suprotnog kuta. Možete odrediti početnu postavu sa sljedećim ključnim riječima:

vrh

pravo

dno

lijevo

centar

I oni se mogu kombinirati kako bi bili specifičniji, kao što su:

Gore desno

gore lijevo

vrh centru

dolje desno

dno lijevo

središte dna

desno središte

lijevo središte

Ovdje je CSS za gradijent sličan onoj na slici, od crvene do bijele koja se kreće od gornjeg desnog kuta do donje strane:
pozadina: 901A1C;Pozadinska slika: -moz-linearni gradijent (desni vrh, # 901A1C 0%, # FFFFFF 100%);background-image: -webkit-gradient (linearni, desni gornji, lijevi dolje, boja-stop (0, # 901A1C), zaustavljanje boje (1, #FFFFFF));pozadina: -webkit-linearni gradijent (desni vrh, # 901A1C 0%, #ffffff 100%);pozadina: -o-linearni gradijent (desni vrh, # 901A1C 0%, #ffffff 100%);pozadina: -ms-linearni gradijent (desni vrh, # 901A1C 0%, #ffffff 100%);pozadina: linearni gradijent (desni vrh, # 901A1C 0%, #ffffff 100%);
Možda ste primijetili da nema IE filtara u ovom primjeru. To je zato što IE dopušta samo dvije vrste filtara: od vrha do dna (zadano) i s lijeva na desno (s opcijom GradientType = 1 prekidač).

Pogledajte ovaj dijagonalni linearni gradijent u akciji pomoću samo CSS-a.
03 od 04
Boja se zaustavlja

S CSS3 linearnim gradijentima, možete dodati više boja na svoj gradijent kako biste stvorili čak i ljubaznije efekte. Da biste dodali te boje, dodajte dodatne boje na kraj svog entiteta, odvojene zarezima. Trebali biste uključiti gdje na liniji boja treba započeti ili završiti.

Filteri u programu Internet Explorer podržavaju samo dva zaustavljanja boja, pa kad gradite ovaj gradijent, trebali biste uključiti samo prvu i drugu boju koju želite prikazati.

Ovdje je CSS za gornji gradijent 3 boje:
pozadina: #ffffff;pozadina: -moz-linearni gradijent (lijevo, #ffffff 0%, # 901A1C 51%, #ffffff 100%);pozadina: -webkit-gradient (linearni, lijevi gornji, desni vrh, boja-zaustavljanje (0%, # ffffff), zaustavljanje boje (51%, # 901A1C), zaustavljanje boje (100%, # ffffff));pozadina: -webkit-linearni gradijent (lijevo, #ffffff 0%, # 901A1C 51%, # ffffff 100%);pozadina: -o-linearni gradijent (lijevo, #ffffff 0%, # 901A1C 51%, # ffffff 100%);pozadina: -ms-linearni gradijent (lijevo, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filtar: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);pozadina: linearni gradijent (lijevo, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Pogledajte ovaj linearni gradijent s tri boje zaustavljanja u akciji pomoću samo CSS-a.
04 od 04
Ugradite gradijente gradnje lakše

Postoje dvije web stranice koje preporučujem da vam pomognu graditi gradijente, svatko ima prednosti i nedostatke za njih, nisam našao gradijent graditelja koji sve radi još.

Krajnji CSS gradijentni generatorOvaj generator gradijenta je vrlo popularan jer radi na sličan način graditeljima gradijenta u programima kao što je Photoshop. Također mi se sviđa jer vam daje sve CSS ekstenzije, a ne samo Webkit i Mozilla. Problem s ovim generatorom je da podržava samo horizontalne i vertikalne gradijente. Ako želite napraviti dijagonalne gradijente, morate otići do drugog generatora koji preporučujem.
CSS3 gradijentni generatorOvaj generator mi je malo dulji da razumije od prvog, ali podržava promjenu smjera dijagonale.
Ako znate još jedan CSS gradijentni generator koji vam se sviđa bolje od ovih, javite nam.