01 saka 04
Nggawe Linear Gradien Cross-Browser karo CSS3
Linear Gradients
Jenis gradièn sing paling umum sing bakal katon yaiku jurang gradièn saka rong werna. Iki tegese gradien bakal dipindhah ing garis lurus ganti kanthi alon saka warna kapisan nganti kaping pindho ing garis kasebut. Gambar ing kaca iki nampilake gradient left-to-right sederhana # 999 (werna abu-abu abu-abu) kanggo #fff (putih).
Gradien linier sing paling gampang kanggo didéfinisi, lan duwe dhukungan paling dhuwur ing browser. CSS3 garis lurus didhukung ing Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, lan Safari 4+. Internet Explorer bisa nambah gradien kanthi nggunakake filter lan ndhukung bali menyang IE 5.5. Iki ora CSS3, nanging iku pilihan kanggo kompatibilitas lintas-browser.
Nalika nemtokake gradien sampeyan kudu nemtokake sawetara perkara sing beda:
- Jenis gradien kasebut yaiku - linear utawa radial
- Pundi gradien kedah dipun wiwiti
- Ing ngendi gradien kudu mandheg
- Warna apa sing ana ing gradien lan ing ngendi dheweke kudu miwiti lan mandheg
Kanggo nemtokake gradien linear kanthi nggunakake CSS3, sampeyan nulis:
linear-gradient ( sudhut utawa sisih utawa sudhut , titik werna, stop werna )
- Kaping pisanan sampeyan nemtokake jinis jurang kanthi jeneng linear- gradien.
- Banjur, sampeyan nemtokake wiwitan lan titik-titik pojok gradien ing salah siji saka rong cara: sudhut garis ing derajat saka 0 kanggo 359, kanthi 0 derajat ngarahake lurus munggah. Utawa kanthi fungsi "sisih utawa pojok", kayata kiwa, tengen, ngisor, lan ndhuwur. Iki bakal diterangake kanthi luwih rinci ing kaca sabanjure. Yen ninggalake kasebut, gradien bakal mili saka ndhuwur menyang ngisor unsur kasebut.
- Banjur sampeyan nemtokake titik werna. Sampeyan nemtokake titik werna kanthi kode werna lan persentasi opsional. Persentasi ngandhani browser ngendi ing baris kanggo miwiti utawa mungkasi karo werna kasebut. Default iki kanggo nyetel werna-werna ing saben baris. Sampeyan bakal sinau babagan werna ing kaca 3.
Dadi, kanggo nemtokake jurang pemisah ndhuwur kanthi CSS3, sampeyan nulis:
linear-gradient (left, # 999999 0%, #ffffff 100%);
Lan nyetel minangka latar mburi DIV sampeyan nulis:
div {
background-image: linear-gradient (left, # 999999 0%, #ffffff 100%;
}
Ekstensi Browser kanggo Grid Sisi CSS3
Kanggo nggragedi kanggo nglakoni cross-browser, sampeyan kudu nggunakake ekstensi browser kanggo paling browser lan filter kanggo Internet Explorer 9 lan ngisor (bener 2 filter). Kabeh iki njupuk unsur sing padha kanggo nemtokake gradien (kajaba sampeyan mung bisa nemtokake gradien 2 warna ing IE).
Filter-filter Microsoft lan Ekstensi -Internet Explorer paling tantangan kanggo ndhukung, amarga sampeyan butuh telung baris sing beda kanggo ndhukung versi browser sing beda. Kanggo njaluk greih ndhuwur nganti putih, sampeyan 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-linear-gradient (left, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- extension bisa kaya properti CSS3, mung karo -moz- extension. Kanggo njaluk gradien ing ndhuwur kanggo Firefox, tulis:
-moz-linear-gradient (left, # 999999 0%, #ffffff 100%);
Opera Extension -The -o nambah gradien menyang Opera 11.1+. Kanggo ndeleng gradien ing ndhuwur, tulis:
-o-linear-gradient (left, # 999999 0%, #ffffff 100%);
Ekstensi Webkit -The -webkit- ekstensi gumantung banget karo sifat CSS3. Kanggo nemtokake jurang pemisah ing ndhuwur kanggo Safari 5.1+ utawa Chrome 10+ sampeyan nulis:
-webkit-linear-gradient (left, # 999999 0%, #ffffff 100%);
Ana uga versi sing luwih lawas saka ekstensi Webkit sing dianggo karo Chrome 2+ lan Safari 4+. Ing kono sampeyan nemtokake jinis jurang minangka nilai, tinimbang jeneng properti. Kanggo nyetir jurang kanthi werna abu-abu kanthi ekstensi iki, tulis:
-webkit-gradient (linear, kiwa ndhuwur, tengen ndhuwur, werna-mandeg (0%, # 999999), werna-mandeg (100%, # ffffff));
CSS3 Linear Gradient CSS Full
Kanggo support lintas-browser sing lengkap kanggo nyolok curian werna abu-abu lan werna abu-abu ndhuwur sampeyan kudu nyakup werna sing padet kanggo browser sing ora ndhukung robahan, lan item pungkasan kudu dadi gaya CSS3 kanggo browser sing kompatibel banget. Dadi, sampeyan nulis:
latar mburi: # 999999;
latar mburi: -moz-linear-gradient (left, # 999999 0%, #ffffff 100%);
latar mburi: -webkit-gradient (linear, kiwa ndhuwur, tengen ndhuwur, werna-mandeg (0%, # 999999), werna-mandeg (100%, # ffffff));
latar mburi: -webkit-linear-gradient (kiwa, # 999999 0%, #ffffff 100%);
latar mburi: -o-linear-gradient (kiwa, # 999999 0%, #ffffff 100%);
latar mburi: -ms-linear-gradient (kiwa, # 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 mburi: linear-gradient (kiwa, # 999999 0%, #ffffff 100%);
Kaca-kaca sabanjuré ing tutorial iki nerangake bagean-bagean gradient kanthi luwih rinci, lan kaca pungkasan nuduhake sampeyan alat sing cara sing paling apik kanggo nggawe cetha CSS3 kanthi otomatis.
Deleng greget linear ing tumindak kanthi nggunakake CSS wae.
02 saka 04
Nggawe Gagasan Diagonal-Sudut Gradien
Titik wiwitan lan mungkasi nemtokake sudut curian. Paling gedhé linier saka ndhuwur tekan ngisor utawa ngiwa. Nanging bisa mbentuk gradien sing bergerak ing garis diagonal. Gambar ing kaca iki ngatonake kacepetan prasaja sing bergerak ing sudut 45 darurat ngliwati gambar saka sisih tengen ngiwa.
Sudut Ngatur Line Gradient
Sudut minangka garis ing bunder imajinasi ing tengah unsur. 0deg poin munggah, 90deg nilai ing sisih tengen, 180deg poin mudhun, lan 270deg nilai ing sisih kiwa. Sampeyan bisa nemtokake sudut apa wae saka 0 kanggo 359 derajat.
Sampeyan kudu ngelingake yen ing alun-alun, sudhut 45 derajat gerakan saka pojok kiwa ndhuwur menyang sisih ngisor, nanging ing persegi panjang titik wiwitan lan pungkasan rada metu ing wangun, sing bisa dideleng ing gambar.
Cara sing luwih umum kanggo nemtokake jurang diagonal yaiku kanggo nemtokake sawijining sudut, kayata sisih ndhuwur lan gradient bakal pindhah saka pojok kasebut menyang pojok. Sampeyan bisa netepake postion wiwitan kanthi tembung kunci ing ngisor iki:
- ndhuwur
- tengen
- ngisor
- kiwa
- tengah
Lan bisa digabung dadi luwih spesifik, kayata:
- tengen ndhuwur
- kiwa ndhuwur
- ndhuwur tengah
- tengen ngisor
- sisih kiwa
- tengah ngisor
- tengen tengah
- kiwa tengah
Punika CSS kanggo gradien sing padha karo gambar sing digambarke, werna abang putih sing obah saka pojok tengen ndhuwur ing sisih kiwa ngisor:
latar mburi: ## 901A1C;
background-image: -moz-linear-gradient (right top, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (linear, tengen ndhuwur, kiwa ngisor, werna-mandeg (0, # 901A1C), werna-mandeg (1, #FFFFFF));
latar mburi: -webkit-linear-gradient (tengen ndhuwur, # 901A1C 0%, #ffffff 100%);
latar mburi: -o-linear-gradient (tengen ndhuwur, # 901A1C 0%, #ffffff 100%);
latar mburi: -ms-linear-gradient (tengen ndhuwur, # 901A1C 0%, #ffffff 100%);
latar mburi: linear-gradient (tengen ndhuwur, # 901A1C 0%, #ffffff 100%);
Sampeyan bisa uga wis ngelingake yen ora ana filter IE ing conto iki. Iku amarga IE mung ngidini rong jinis saringan: ndhuwur kanggo ngisor (standar) lan ngiwa menyang tengen (karo saklar GradientType = 1).
Waca gradien linear diagonal iki kanthi nggunakake CSS wae.
03 saka 04
Werna werna
Kanthi jurang linier CSS3, sampeyan bisa nambah warna kanggo gradient kanggo nggawe efek sing luwih apik. Kanggo nambah warna kasebut, sampeyan nambah werna tambahan ing pungkasan properti sampeyan, dipisah karo koma. Sampeyan kudu nyakup ngendi ing baris werna kudu miwiti utawa mungkasi uga.
Filter-filter Internet Explorer mung ndhukung titik loro werna, supaya nalika mbangun gradien iki, sampeyan mung kudu nyakup werna pisanan lan kaloro sing pengin ditampilake.
Punika CSS kanggo gradien 3 werna ing ndhuwur:
latar mburi: #ffffff;
latar mburi: -moz-linear-gradient (left, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
latar mburi: -webkit-gradient (linear, kiwa ndhuwur, tengen ndhuwur, werna-mandeg (0%, # ffffff), werna-mandeg (51%, # 901A1C), werna-stop (100%, # ffffff));
latar mburi: -webkit-linear-gradient (kiwa, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
latar mburi: -o-linear-gradient (kiwa, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
latar mburi: -ms-linear-gradient (kiwa, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
latar mburi: linear-gradient (kiwa, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Deleng greget linear iki kanthi telung werna ing tumindak nggunakake mung CSS.
04 saka 04
Nggawe Gradien Bangunan luwih gampang
Ana rong situs sing aku rekomendakake kanggo mbantu sampeyan mbangun gradien, saben padha duwe manfaat lan kelemahane, aku ora nemokake panyipta gradien sing durung rampung.
Ultimate CSS Gradient Generator
Generator iki jembar banget amarga diolah kanthi cara sing padha kanggo para pembangun gradien ing program-program kaya Photoshop. Aku uga seneng amarga menehi kabeh ekstensi CSS, ora mung Webkit lan Mozilla. Masalah karo generator iki mung ndhukung robahan horizontal lan vertikal. Yen sampeyan pengin nggawe gradien diagonal, sampeyan kudu pindhah menyang generator liyane sing aku nyaranake.
CSS3 Gradient Generator
Penggerak iki njupuk luwih suwe kanggo mangerteni tinimbang sing pertama, nanging ora ndhukung ngowahi arah menyang diagonal.
Yen sampeyan ngerti CSS Generator Generator liyane sing luwih apik tinimbang iki, sumangga kandhani .