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 filtra 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:
- Kakav je gradijent 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 bočni ili kutni , zaustavljanje boje, zaustavljanje boje )
- Prvo definirate vrstu gradijenta s nazivom linearno- gradijent.
- Zatim definirate početne i zaustavne točke gradijenta na jedan od dva načina: kut linije u stupnjevima od 0 do 359, dok se 0 stupnjeva usmjerava ravno prema gore. Ili s funkcijom "bočni ili kutni", kao što su lijevi, desni, donji i gornji. 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 je kao pozadinu DIV-a koju 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 više preglednika, morate koristiti proširenja preglednika za većinu preglednika i 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 vam je potrebna 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 Extension -The -moz- proširenje funkcionira kao CSS3 svojstvo, samo s -moz-ekstenzijom. Da biste dobili gore navedeni gradijent za Firefox, upišite:
-moz linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);
Opera Extension -The-extension proširuje gradijente Opera 11.1+. Da biste dobili gore navedeni gradijent, upišite:
o-linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit- proširenje funkcionira puno kao CSS3 svojstvo. 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 bodova gore, 90deg bodova desno, 180deg bodova dolje i 270deg bodova 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 gornji desni, a gradijent će se premjestiti iz tog kuta u suprotni kut. 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 lijeve strane (s prekidačem GradientType = 1).
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 generator
Ovaj 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 generator
Ovaj 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 .