01 od 04
Kreiranje Cross-Browser linijskih nagiba sa CSS3
Linearni nagibi
Najčešći tip gradijenta koji ćete videti je linearni gradijent dve boje. To znači da će gradijent kretati ravnom linijom postepeno od prve boje do druge duž te linije. Slika na ovoj stranici pokazuje jednostavan gradjent od # 999 (tamno siva) do #fff (belo).
Linearni gradijenti najlakše se definišu i imaju najveću podršku u pretraživačima. Linijski gradienti CSS3 podržani su u Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ i Safari 4+. Internet Explorer može dodati gradijente koristeći filter i podržava ih na IE 5.5. Ovo nije CSS3, ali to je opcija za kompatibilnost između pretraživača.
Kada definišete gradijent, potrebno je definisati nekoliko različitih stvari:
- Kakva vrsta gradijenta je linearna ili radijalna
- Gde bi trebalo da počne gradijent
- Tamo gde bi gradijent trebao prestati
- Koje boje su u gradijentu i gde bi trebalo da započnu i zaustave
Za definisanje linearnih gradijenata koristeći CSS3, pišete:
linearni gradijent ( ugao ili bočni ili ugao , zaustavljanje boje, zaustavljanje boje )
- Prvo definišete vrstu gradijenta sa nazivom linearno- gradient.
- Zatim, tačku početka i zaustave gradijenta definišete na jedan od dva načina: ugao linije u stupnjevima od 0 do 359, sa 0 stepeni koji pokazuju pravo nagore. Ili sa funkcijom "bočne ili uglove", kao što su levo, desno, donje i gornje. Ovo će biti detaljnije objašnjeno na sledećoj stranici. Ako ovo napustite, gradijent će proći od vrha do dna elementa.
- Tada definišete prekid boje. Definišete prekid boje s kodom boje i opcionim procentom. Procenat govori pregledaču gde se na liniji pojavi ili završava sa tom bojom. Podrazumevano je da se boje postavljaju jednako duž linije. Više ćete saznati o zaustavljanju na boji na stranici 3.
Dakle, da biste definisali gornji gradijent sa CSS3, pišete:
linearni gradijent (lijevo, # 999999 0%, #ffffff 100%);
I da ga postavite kao pozadinu DIV-a pišete:
div {
background-image: linearni gradijent (lijevo, # 999999 0%, #ffffff 100%;
}
Browser Extensions za CSS3 Linearne nagibe
Da bi vaš gradijent funkcionisao u unakrsnom pretraživaču, potrebno je da koristite proširenja pretraživača za većinu pregledača i filter za Internet Explorer 9 i nižu (zapravo 2 filtera). Sve to uzima iste elemente da definišu svoj gradijent (osim što možete definisati samo gradove sa 2 boje u IE-u).
Microsoft Filters i Extension- Internet Explorer su najizazovniji za podršku, jer su vam potrebne tri različite linije koje podržavaju različite verzije pretraživača. Da biste dobili gornji sivi do bijeli gradijent, pisali biste:
/ * IE 5.5-7 * /
filter: 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%);
Proširenje Mozilla -The -moz- produžetak funkcioniše kao svojstvo CSS3, samo sa -moz-produžetkom. Da biste dobili gornji gradijent za Firefox, napišite:
-moz-linearni-gradijent (lijevo, # 999999 0%, #ffffff 100%);
Opera Extension -The -o- ekstenzija dodaje gradijente u Opera 11.1+. Da biste dobili gornji gradijent, napišite:
-o-linearni-gradijent (lijevo, # 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit-extensions funkcioniše mnogo slično kao CSS3 svojstvo. Da biste definisali gornji gradijent za Safari 5.1+ ili Chrome 10+, upišite:
-webkit-linearni-gradijent (lijevo, # 999999 0%, #ffffff 100%);
Postoji i starija verzija Webkit ekstenzije koja radi sa Chrome 2+ i Safari 4+. U njemu definišete vrstu gradijenta kao vrijednost, a ne u imenu svojstva. Da biste dobili sivu do bijelu gradijentu sa ovim ekstenzijom, napišite:
-webkit-gradijent (linearni, levi gornji, desni vrh, boja-stop (0%, # 999999), boja-stop (100%, # ffffff));
Puni CSS kod CSS3 Linear Gradient
Za potpunu podršku preko unakrsnog pretraživača da biste dobili sivu do bijele gradijent iznad, prvo biste trebali uključiti solidnu boju za pregledače koji ne podržavaju gradijente, a posljednja stavka bi trebala biti stil CSS3 za pregledače koji su u potpunosti usklađeni. Dakle, vi pišete:
pozadina: # 999999;
pozadina: -moz-linearni-gradijent (lijevo, # 999999 0%, #ffffff 100%);
pozadina: -webkit-gradijent (linearni, levi vrh, desni vrh, boja-stop (0%, # 999999), boja-stop (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%);
filter: 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%);
Naredne stranice ovog vodiča detaljnije objašnjavaju delove gradijenta, a poslednja stranica vas upućuje na alat koji je odličan način stvaranja gradijenta CSS3 automatski.
Pogledajte ovaj linearni gradijent u akciji koristeći samo CSS.
02 od 04
Stvaranje dijagonalnih gradijenta - ugao gradijenta
Tačke starta i stopa određuju ugao nagiba. Većina linearnih nagiba je odozgo prema dolje ili odozdo na desno. Ali moguće je napraviti gradijent koji se kreće na dijagonalnoj liniji. Slika na ovoj stranici pokazuje jednostavan gradijent koji se pomera u 45degree ugao preko slike s desne na levo.
Uglovi za definisanje linije gradijenta
Ugao je linija na imaginarnom krugu u centru elementa. 0deg poena, 90deg poena desno, 180deg poena i 270deg poena na levo. Možete definirati bilo koji ugao od 0 do 359 stepeni.
Treba napomenuti da se na kvadratu kut od 45 stepeni pomera od gornjeg levog ugla do donje desne strane, ali u pravougaonik početne i krajnje tačke su neznatno izvan oblika, kao što vidite na slici.
Općeniti način definisanja dijagonalnog gradijenta je definisanje ugla, kao što je gornje desno i gradijent će se pomjeriti iz tog ugla u suprotan ugao. Možete odrediti početni položaj sa sledećim ključnim riječima:
- vrh
- desno
- dno
- levo
- centar
I mogu se kombinovati da budu specifičniji, kao što su:
- gore desno
- na vrhu lijevo
- vrhunski centar
- donji desni
- donji levo
- donji centar
- desni centar
- lijevi centar
Evo CSS-a za gradijent sličan onom na slici, crveno-bela koja se kreće od gornjem desnom uglu do donje lijeve strane:
pozadina: ## 901A1C;
pozadina-slika: -moz-linearni-gradijent (desni vrh, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradijent (linearni, desni vrh, levo dno, boja-stop (0, # 901A1C), boja-stop (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 u ovom primjeru nema filtera IE. To je zato što IE dozvoljava samo dvije vrste filtera: odozdo prema dolje (podrazumevano) i odozdo prema desno (sa preklopnikom GradientType = 1).
Pogledajte ovaj dijagonalni linearni gradijent u akciji koristeći samo CSS.
03 od 04
Color Stops
Sa linearnim gradijentima CSS3, možete dodati više boja vašem gradijentu kako biste stvorili čak i radije efekte. Da biste dodali ove boje, dodate dodatne boje do kraja svoje imovine, razdvojene zažama. Trebalo bi da uključite gdje bi se na liniji trebale početi i završiti boje.
Internet Explorer filtri podržavaju samo dve boje, tako da kada napravite ovaj gradijent, trebalo bi da uključite samo prvu i drugu boju koju želite prikazati.
Evo CSS-a za gornji trodimenzionalni gradijent:
pozadina: #ffffff;
pozadina: -moz-linearni-gradijent (lijevo, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
pozadina: -webkit-gradijent (linearni, lijevo, desno, bar-stop (0%, # ffffff), boja-stop (51%, # 901A1C), boja-stop (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%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
pozadina: linearni gradijent (lijevo, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Pogledajte ovaj linearni gradijent sa tri boje zaustavljanja u radu pomoću samo CSS-a.
04 od 04
Izgradite gradijente lakše
Postoje dve stranice koje vam preporučujem za pomoć u izgradnji nagiba, svaki od njih ima koristi i nedostatke za njih, nisam našao graditelja graditelja koji sve čini sve.
Ultimate CSS Gradijent Generator
Ovaj gradijent generator je veoma popularan jer na sličan način funkcioniše graditelji gradijenta u programima kao što je Photoshop. Takođe mi se sviđa jer vam pruža sve CSS proširenja, ne samo Webkit i Mozilla. Problem sa ovim generatorom je to što podržava samo horizontalne i vertikalne gradijente. Ako želite da napravite dijagonalne nagibe, morate ići na drugi generator koji preporučujem.
CSS3 Gradijent Generator
Ovaj generator mi je trebao malo više da razumem od prvog, ali podržava promenu smera na dijagonalu.
Ako znate drugi CSS gradijent generator koji volite bolje od ovih, molimo vas da nas obavijestite .