01 of 04
Nyieun Palang-Browser linier Gradients kalawan CSS3
Gradients linier
tipe nu paling umum dina gradién anjeun bakal nempo mangrupakeun gradién linier dua kelir. Ieu ngandung harti yén gradién bakal mindahkeun dina garis lempeng ngarobah laun ti warna pangheulana kadua sapanjang garis éta. Gambar na kaca ieu nunjukeun hiji gradién kénca-ka-katuhu basajan tina # 999 (abu poék) kana #fff (bodas).
gradients linier nu panggampangna pikeun nangtukeun, sarta boga rojongan paling di panyungsi. CSS3 linier gradients anu dirojong di Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, sarta Safari 4+. Internet Explorer bisa nambahkeun gradients maké filter sarta ngarojong éta deui IE 5,5. Ieu teu CSS3 tapi mangrupa pilihan pikeun kasaluyuan cross-browser.
Lamun anjeun nangtukeun gradién a nu peryogi nangtukeun sababaraha hal béda:
- Naon jenis gradién eta is- linear atawa radial
- Dimana gradién nu kudu ngamimitian
- Dimana gradién nu kudu eureun
- kelir naon di gradién jeung dimana maranéhna kudu ngamimitian jeung ngeureunkeun
Pikeun nangtukeun gradients linier make CSS3, Anjeun nulis:
liniér-gradién (sudut atawa samping atawa sudut, warna eureun, warna eureun)
- Mimiti anjeun nangtukeun jinis gradién jeung -gradient ngaran linier.
- Lajeng, anjeun nangtukeun mimiti jeung ngeureunkeun titik tina gradién dina salah sahiji dua cara: sudut garis dina derajat ti 0 nepi ka 359, kalawan 0 derajat ngarah lempeng nepi. Atawa ku "samping atawa sudut" fungsi, kayaning ditinggalkeun, katuhu, handap, jeung luhur. Ieu bakal dipedar di leuwih jéntré dina kaca salajengna. Lamun ninggalkeun ieu kaluar, gradién bakal ngalir ti luhur ka handap unsur.
- Satuluyna anjeun ngartikeun titik warna. Anjeun nangtukeun warna eureun jeung kode warna na hiji persentase pilihan. perséntase nu ngabejaan browser mana on jalur pikeun ngamimitian atawa mungkas kalawan warna éta. standar nya éta nempatkeun kelir merata di sepanjang garis. Anjeun bakal leuwih jéntré ngeunaan warna eureun dina kaca 3.
Ku kituna, pikeun nangtukeun gradién luhur kalawan CSS3, Anjeun nulis:
liniér-gradién (ditinggalkeun, # 999999 0%, #ffffff 100%);
Sarta pikeun ngeset salaku kasang tukang hiji DIV anjeun nulis:
div {
tukang-gambar: linier-gradién (ditinggalkeun, # 999999 0%, #ffffff 100%;
}
Ekstensi browser pikeun CSS3 linier Gradients
Pikeun meunang gradién anjeun dianggo cross-panyungsi, anjeun kudu make ekstensi browser pikeun kalolobaan panyungsi na filter pikeun Internet Explorer 9 jeung handap (sabenerna 2 saringan). Sakabéh ieu nyandak unsur anu sarua keur ngartikeun gradién anjeun (iwal nu ukur bisa nangtukeun gradients 2-warna dina IE).
Microsoft Saringan sarta penyuluh -Internet Explorer anu paling nangtang ka rojongan, sabab kudu tilu garis béda pikeun ngarojong versi browser béda. Pikeun meunangkeun abu luhur ka gradién bodas anjeun bakal nulis:
/ * 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-linier-gradién (ditinggalkeun, # 999999 0%, #ffffff 100%);
Extension Mozilla penyuluh -The -moz- berpungsi jiga harta CSS3, ngan jeung extension -moz-. Pikeun meunangkeun gradién luhur pikeun Firefox, nyerat:
-moz-linier-gradién (ditinggalkeun, # 999999 0%, #ffffff 100%);
Extension opera penyuluh -The -o- nambihan gradients kana opera 11.1+. Pikeun meunangkeun gradién luhur, nulis:
-o-linier-gradién (ditinggalkeun, # 999999 0%, #ffffff 100%);
Extension Webkit penyuluh -The -webkit- jalan loba kawas harta CSS3. Pikeun nangtukeun dina gradién luhur pikeun Safari 5.1+ atanapi Chrome 10+ anjeun nulis:
-webkit-linier-gradién (kénca, # 999999 0%, #ffffff 100%);
Aya ogé vérsi nu leuwih heubeul ti extension Webkit anu hade jeung Chrome 2+ jeung Safari 4+. Dina eta anjeun nangtukeun jinis gradién sakumaha nilai a, tinimbang dina ngaran harta. Pikeun meunangkeun abu mun gradién bodas kalayan extension ieu, nulis:
-webkit-gradién (linear, luhur kénca, luhureun katuhu, warna-eureun (0%, # 999999), warna-eureun (100% # ffffff));
Pinuh CSS3 linier gradién CSS Code
Pikeun pinuh rojongan cross-browser pikeun meunangkeun abu mun gradién bodas luhureun anjeun mimiti kedah ngawengku hiji fallback warna solid keur panyungsi anu teu ngarojong gradients, jeung item panungtungan kudu gaya CSS3 pikeun panyungsi anu pinuh patuh. Ku kituna, anjeun nulis:
latar: # 999999;
latar: -moz-linier-gradién (ditinggalkeun, # 999999 0%, #ffffff 100%);
latar: -webkit-gradién (linear, luhur kénca, luhureun katuhu, warna-eureun (0%, # 999999), warna-eureun (100% # ffffff));
latar: -webkit-linier-gradién (kénca, # 999999 0%, #ffffff 100%);
latar: -o-linier-gradién (ditinggalkeun, # 999999 0%, #ffffff 100%);
latar: -ms-linier-gradién (ditinggalkeun, # 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);
latar: linier-gradién (ditinggalkeun, # 999999 0%, #ffffff 100%);
Kaca salajengna dina tutorial ieu ngajelaskeun bagéan gradién di leuwih jéntré, sarta kaca panungtungan nunjuk anjeun alat anu mangrupa jalan alus teuing pikeun nyieun gradients CSS3 otomatis.
Tempo gradién liniér ieu aksi maké ngan CSS.
02 of 04
Nyieun diagonal Gradients-The Angle tina gradién
Mimiti na eureun titik nangtukeun sudut gradién nu. Paling linier gradients anu ti luhur ka handap atawa ka kenca ka katuhu. Tapi kasebut nyaéta dimungkinkeun pikeun ngawangun hiji gradién nu ngalir dina garis diagonal. Gambar na kaca ieu nunjukeun hiji gradién basajan nu ngalir dina sudut 45degree sakuliah gambar ti katuhu ka kenca.
Sudut ka Ngartikeun Jalur gradién
Manglé téh garis dina hiji bunderan imajinér di puseur unsur. 0deg nunjuk up, 90deg titik ka katuhu, 180deg nunjuk ka handap, sarta 270deg titik ka kénca. Anjeun tiasa nangtukeun sudut mana wae ti 0 nepi ka 359 derajat.
Anjeun kudu dicatet yén di alun a, sudut 45 gelar ngalir ti belah kénca juru luhur ka katuhu handap, tapi sagi opat anu mimiti na tungtung titik anu rada luar bentuk, anjeun tiasa ningali dina gambar.
Cara leuwih umum pikeun nangtukeun hiji gradién diagonal téh keur ngartikeun sudut a, kayaning katuhu luhur jeung gradién baris mindahkeun tina sudut nu ka pojok sabalikna. Anjeun tiasa ngartikeun postion awal jeung konci handap:
- puncak
- bener
- dasar
- ditinggalkeun
- pusat
Jeung maranéhna bisa digabungkeun janten langkung husus, kayaning:
- luhur ka katuhu
- luhur kenca
- puseur luhur
- katuhu handap
- kénca handap
- puseur handap
- puseur katuhu
- puseur kénca
Di handap ieu CSS pikeun gradién a sarupa hiji gambar, beureum jeung bodas pindah ti pojok katuhu luhur ka handap kénca:
latar: ## 901A1C;
tukang-gambar: -moz-linier-gradién (luhur katuhu, # 901A1C 0%, # FFFFFF 100%);
tukang-gambar: -webkit-gradién (linear, luhur katuhu, handap kénca, warna-eureun (0, # 901A1C), warna-eureun (1, #FFFFFF));
latar: -webkit-linier-gradién (luhur katuhu, # 901A1C 0%, #ffffff 100%);
latar: -o-linier-gradién (luhur katuhu, # 901A1C 0%, #ffffff 100%);
latar: -ms-linier-gradién (luhur katuhu, # 901A1C 0%, #ffffff 100%);
latar: linier-gradién (luhur katuhu, # 901A1C 0%, #ffffff 100%);
Anjeun bisa geus noticed nu aya euweuh saringan IE dina conto ieu. Yén sabab IE ukur ngamungkinkeun dua jenis saringan: luhur ka handap (nu standar) jeung kénca ka katuhu (ku GradientType = 1 switch).
Tempo gradién liniér ieu diagonal dina peta maké ngan CSS.
03 of 04
eureun warna
Kalawan gradients linier CSS3, Anjeun bisa nambah sababaraha kelir pikeun gradién anjeun pikeun nyieun épék malah fancier. Nambahkeun kelir ieu, Anjeun nambahkeun kelir tambahan dina ka ahir milik anjeun, dipisahkeun ku koma. Anjeun kudu ngawengku mana on jalur warna kudu ngamimitian atawa mungkas ogé.
Internet Explorer nyaring ngan ngarojong dua titik warna, jadi mun anjeun ngawangun gradién ieu, anjeun ngan kedah ngawengku jajaran kahiji jeung kadua kelir rék nembongkeun.
Di handap ieu CSS keur gradién 3-warna luhur:
latar: #ffffff;
latar: -moz-linier-gradién (ditinggalkeun, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
latar: -webkit-gradién (linear, luhur kénca, luhureun katuhu, warna-eureun (0%, # ffffff), warna-eureun (51%, # 901A1C), warna-eureun (100% # ffffff));
latar: -webkit-linier-gradién (kénca, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
latar: -o-linier-gradién (ditinggalkeun, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
latar: -ms-linier-gradién (ditinggalkeun, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
latar: linier-gradién (ditinggalkeun, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Tempo gradién liniér ieu kalawan tilu titik warna dina peta maké ngan CSS.
04 of 04
Jieun Gradients Gedong gampang
Aya dua situs I nyarankeun pikeun nulungan anjeun ngawangun gradients, aranjeunna masing-masing mibanda kauntungan jeung drawbacks ka aranjeunna, abdi teu kapanggih hiji pembina gradién yén manten sagalana acan.
Pamungkas CSS gradién generator
generator gradién Ieu kawentar alatan ngalaksanakeun cara di luhur sarupa gradién tukang dina program kawas Photoshop. Kuring ogé resep eta sabab méré Anjeun sakabéh ekstensi CSS, teu ngan Webkit na Mozilla. Masalah jeung generator téh nya éta ngan ngarojong gradients horizontal sarta nangtung. Mun rék ngalakukeun gradients diagonal, anjeun kudu indit ka generator séjén Kuring nyarankeun.
CSS3 gradién generator
generator Ieu ngajak kuring anu saeutik deui ngartos ti heula salah, tapi hancana rojongan ngarobah arah ka diagonal.
Lamun nyaho tina CSS gradién generator sejen yen anjeun resep hadé ti ieu, mangga hayu urang nyaho .