01 04
Mewujudkan Gradien Linear Penyemak Imbas Penyelaras dengan CSS3
Gradien Linear
Jenis gradien yang paling biasa yang anda akan nampak adalah kecerunan linear dua warna. Ini bermakna kecerunan akan bergerak dalam garis lurus yang berubah secara beransur-ansur dari warna pertama ke kedua di sepanjang garis itu. Imej di halaman ini menunjukkan kecerunan kiri-ke-kanan sederhana # 999 (kelabu gelap) kepada #fff (putih).
Gradien garis lurus adalah yang paling mudah untuk menentukan, dan mempunyai sokongan yang paling dalam pelayar. Gradien linier CSS3 disokong dalam Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, dan Safari 4+. Internet Explorer boleh menambah kecerunan menggunakan penapis dan menyokongnya kembali ke IE 5.5. Ini bukan CSS3, tetapi ia adalah pilihan untuk keserasian silang pelayar.
Apabila anda menentukan kecerunan, anda perlu menentukan beberapa perkara yang berbeza:
- Apakah jenis kecerunan itu linier atau radial
- Di mana kecerunan perlu bermula
- Di mana kecerunan perlu dihentikan
- Apa warna dalam kecerunan dan di mana mereka harus bermula dan berhenti
Untuk menentukan gradien linear menggunakan CSS3, anda menulis:
gradien linear ( sudut atau sisi atau sudut , berhenti warna , berhenti warna )
- Pertama anda mentakrifkan jenis kecerunan dengan nama lajur linear .
- Kemudian, anda menentukan permulaan dan titik berhenti kecerunan dalam satu daripada dua cara: sudut garisan dalam darjah dari 0 hingga 359, dengan 0 darjah menunjukkan lurus ke atas. Atau dengan fungsi "sisi atau sudut", seperti kiri, kanan, bawah, dan atas. Ini akan diterangkan lebih terperinci pada halaman seterusnya. Sekiranya anda keluar, kecerunan akan mengalir dari bahagian atas ke bahagian bawah elemen.
- Kemudian anda menentukan warna berhenti. Anda menentukan warna berhenti dengan kod warna dan peratusan pilihan. Peratusan memberitahu penyemak imbas di mana pada baris untuk memulakan atau menamatkan warna itu. Lalai adalah untuk meletakkan warna sama rata sepanjang garis. Anda akan mengetahui lebih lanjut mengenai halangan warna pada halaman 3.
Jadi, untuk menentukan kecerunan di atas dengan CSS3, anda menulis:
gradien linear (kiri, # 999999 0%, #ffffff 100%);
Dan untuk menetapkannya sebagai latar belakang DIV anda menulis:
div {
latar belakang-imej: linear-gradient (kiri, # 999999 0%, #ffffff 100%;
}
Sambungan Penyemak Imbas untuk Kecerunan Linear CSS3
Untuk mendapatkan kecerunan anda untuk berfungsi merentas pelayar, anda perlu menggunakan sambungan penyemak imbas untuk kebanyakan penyemak imbas dan penapis untuk Internet Explorer 9 dan lebih rendah (sebenarnya 2 penapis). Semua ini mengambil elemen yang sama untuk menentukan kecerunan anda (kecuali bahawa anda hanya boleh menentukan gradien 2 warna di IE).
Penapis dan Sambungan Microsoft -Internet Explorer adalah yang paling mencabar untuk menyokong, kerana anda memerlukan tiga baris yang berbeza untuk menyokong versi pelayar yang berbeza. Untuk mendapatkan gradien kelabu ke atas, anda akan menulis:
/ * IE 5.5-7 * /
penapis: 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 (kiri, # 999999 0%, #ffffff 100%);
Sambungan Mozilla -The -moz- berfungsi seperti sifat CSS3, hanya dengan sambungan -moz-. Untuk mendapatkan kecerunan di atas untuk Firefox, tulis:
-moz-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
Sambungan Opera -The -o menambah kecerunan ke Opera 11.1+. Untuk mendapatkan kecerunan di atas, tulis:
-o-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
Pelanjutan Webkit -The -webkit- berfungsi banyak seperti harta CSS3. Untuk menentukan kecerunan di atas untuk Safari 5.1+ atau Chrome 10+ anda menulis:
-webkit-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
Terdapat juga versi lama pelanjutan Webkit yang berfungsi dengan Chrome 2+ dan Safari 4+. Di dalamnya anda menentukan jenis kecerunan sebagai nilai, bukannya pada nama harta tanah. Untuk mendapatkan kecerunan kelabu hingga putih dengan sambungan ini, tulis:
-webkit-gradien (linear, kiri atas, kanan atas, warna berhenti (0%, # 999999), warna-stop (100%, # ffffff));
Kod CSS Kecerunan Linear Penuh CSS3 Penuh
Untuk sokongan silang pelayar penuh untuk mendapatkan kecerunan kelabu hingga putih di atas, anda harus terlebih dahulu memasukkan warna pepejal balik untuk pelayar yang tidak menyokong kecerunan, dan item terakhir harus menjadi gaya CSS3 untuk pelayar yang mematuhi sepenuhnya. Oleh itu, anda menulis:
latar belakang: # 999999;
latar belakang: -moz-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
latar belakang: -webkit-gradien (linear, kiri atas, kanan atas, warna-stop (0%, # 999999), warna-stop (100%, # ffffff));
latar belakang: -webkit-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
latar belakang: -o-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
latar belakang: -ms-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
latar belakang: linear-gradient (kiri, # 999999 0%, #ffffff 100%);
Halaman seterusnya dalam tutorial ini menerangkan bahagian kecerunan dengan lebih terperinci, dan halaman terakhir menunjuk kepada alat yang merupakan cara terbaik untuk mencipta kecerunan CSS3 secara automatik.
Lihat gradien linear ini dalam tindakan menggunakan hanya CSS.
02 04
Mewujudkan Kecerunan Diagonal-Sudut Gradien
Titik permulaan dan hentian menentukan sudut kecerunan. Gradien linier adalah dari atas ke bawah atau kiri ke kanan. Tetapi adalah mungkin untuk membina kecerunan yang bergerak pada garis pepenjuru. Imej di halaman ini menunjukkan kecerunan mudah yang bergerak dalam sudut 45 darjah merentasi imej dari kanan ke kiri.
Sudut untuk Menentukan Barisan Gradien
Sudut adalah garis pada bulatan khayalan di tengah elemen. 0deg poin, 90deg poin ke kanan, 180deg poin ke bawah, dan 270deg poin ke kiri. Anda boleh menentukan mana-mana sudut dari 0 hingga 359 darjah.
Anda perlu ambil perhatian bahawa dalam segi empat, sudut 45 darjah bergerak dari sudut kiri atas ke kanan bawah, tetapi dalam segiempat tepat titik permulaan dan akhir adalah sedikit di luar bentuk, seperti yang anda lihat dalam imej.
Cara yang lebih umum untuk menentukan kecerunan pepenjuru adalah untuk menentukan sudut, seperti hak atas dan kecerunan akan bergerak dari sudut itu ke sudut bertentangan. Anda boleh menentukan kedudukan awal dengan kata kunci berikut:
- atas
- betul
- bawah
- dibiarkan
- pusat
Dan mereka boleh digabungkan menjadi lebih spesifik, seperti:
- kanan atas
- kiri atas
- pusat teratas
- kanan bawah
- dibahagian bawah kiri
- pusat bawah
- pusat kanan
- kiri pusat
Berikut adalah CSS untuk kecerunan yang serupa dengan gambar yang digambarkan, merah ke putih bergerak dari sudut kanan atas ke kiri bawah:
latar belakang: ## 901A1C;
latar belakang-imej: -moz-linear-kecerunan (kanan atas, # 901A1C 0%, #FFFFFF 100%);
imej latar belakang: -webkit-gradien (linear, atas kanan, bahagian bawah kiri, warna berhenti (0, # 901A1C), warna-stop (1, #FFFFFF));
latar belakang: -webkit-linear-gradient (kanan atas, # 901A1C 0%, #ffffff 100%);
latar belakang: -o-linear-gradient (kanan atas, # 901A1C 0%, #ffffff 100%);
latar belakang: -ms-linear-gradient (kanan atas, # 901A1C 0%, #ffffff 100%);
latar belakang: linear-gradient (kanan atas, # 901A1C 0%, #ffffff 100%);
Anda mungkin perasan bahawa tiada penapis IE dalam contoh ini. Itu kerana IE hanya membenarkan dua jenis penapis: atas ke bawah (lalai) dan kiri ke kanan (dengan suis GradientType = 1).
Lihat kecerunan linear pepenjuru ini dalam tindakan menggunakan hanya CSS.
03 dari 04
Hentikan Warna
Dengan kecerunan linier CSS3, anda boleh menambah pelbagai warna pada kecerunan anda untuk mencipta kesan yang lebih menarik. Untuk menambah warna ini, anda menambah warna tambahan ke hujung harta anda, dipisahkan dengan koma. Anda harus memasukkan di mana pada baris warna harus bermula atau berakhir juga.
Penapis Internet Explorer hanya menyokong dua hentaman warna, jadi apabila anda membina kecerunan ini, anda hanya perlu memasukkan warna pertama dan kedua yang anda mahu paparkan.
Berikut ialah CSS untuk kecerunan 3 warna di atas:
latar belakang: #ffffff;
latar belakang: -moz-linear-gradient (kiri, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
latar belakang: -webkit-gradien (linear, kiri atas, kanan atas, warna berhenti (0%, # ffffff), hentakan warna (51%, # 901A1C), warna-stop (100%, # ffffff));
latar belakang: -webkit-linear-gradient (kiri, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
latar belakang: -o-linear-gradient (kiri, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
latar belakang: -ms-linear-gradient (kiri, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
latar belakang: linear-gradient (kiri, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Lihat gradien linear ini dengan tiga langkah warna dalam tindakan menggunakan hanya CSS.
04 04
Buat Gradien Bangunan Lebih Mudah
Terdapat dua tapak yang saya cadangkan untuk membantu anda membina kecerunan, masing-masing mempunyai faedah dan kekurangan kepada mereka, saya tidak menemui pembina kecerunan yang melakukan semuanya.
Generator Kecerunan CSS Ultimate
Penjana kecerunan ini sangat popular kerana ia melakukan dengan cara yang sama dengan pembina gradien dalam program seperti Photoshop. Saya juga menyukainya kerana ia memberikan anda semua sambungan CSS, bukan hanya Webkit dan Mozilla. Masalah dengan penjana ini adalah bahawa ia hanya menyokong kecerunan mendatar dan menegak. Sekiranya anda mahu melakukan kecerunan pepenjuru, anda perlu pergi ke penjana lain yang saya cadangkan.
Generator Kecerunan CSS3
Penjana ini membawa saya sedikit lebih lama untuk difahami daripada yang pertama, tetapi ia menyokong perubahan arah ke pepenjuru.
Sekiranya anda tahu Generator Kecerunan CSS lain yang anda sukai lebih baik daripada ini, sila beritahu kami .