CSS3 Gradien Linear [Tips CSS3]
Kecerunan adalah tambahan ciri warna yang hebat dalam CSS3. Daripada menambah warna tunggal, kami kini boleh menambah kombinasi warna berganda dalam satu blok pengisytiharan tanpa bergantung kepada imej, yang dapat mengurangkan permintaan HTTP di laman web kami yang membolehkan laman web memuat lebih cepat.
Jika anda bermain dengan kecerunan dalam CSS3, anda mungkin biasa dengan dua kaedah: kecerunan jejarian dan linear. Siaran hari ini akan menjadi perkara terakhir.
Mewujudkan Kecerunan
Memandangkan spesifikasi mengatakan kecerunan dalam CSS3 adalah imej, ia tidak mempunyai ciri khas seperti penambahan ciri baru yang lain, maka dinyatakan dengan menggunakan imej latar belakang sebaliknya.
Jika kita melihat sintaks lengkap untuk kecerunan, ia kelihatan sedikit tersesat, yang boleh menyebabkan kekeliruan bagi sesetengah orang.
div background-image: -webkit-linear-gradient (top, # FF5A00 0%, # FFAE00 100%); latar belakang-imej: -moz-linear-kecerunan (atas, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linear-gradient (atas, # FF5A00 0%, # FFAE00 100%); background-image: -o-linear-gradient (atas, # FF5A00 0%, # FFAE00 100%); latar belakang-imej: linear-gradient (atas, # FF5A00 0%, # FFAE00 100%);
Oleh itu, mari kita menggali setiap bahagian sintaks satu demi satu untuk membuat perkara lebih jelas.
Pertama sekali, kecerunan linear diisytiharkan dengan gradien linear () fungsi. Fungsi ini mempunyai tiga nilai utama. Nilai pertama mentakrifkan kedudukan permulaan kecerunan. Anda boleh menggunakan kata kunci deskriptif, seperti atas untuk memulakan kecerunan yang mengalir dari atas;
div background-image: linear-gradient (top, # FF5A00, # FFAE00);
Coretan di atas ialah versi rasmi dari W3C untuk mencipta kecerunan. Ia sebenarnya lebih mudah dan cukup jelas dan ia juga akan mencipta kecerunan berikut.
Anda juga boleh menggunakannya bawah untuk melakukan sebaliknya, atau sebaliknya betul dan ditinggalkan.
Kita juga boleh mencipta kecerunan pepenjuru menggunakan sudut sudut sebagai kedudukan permulaan kecerunan. Inilah contohnya:
div background-image: linear-gradient (45deg, # FF5A00, # FFAE00);
Coretan di atas akan mencipta kecerunan warna berikut:
Nilai kedua fungsi akan memberitahu warna pertama maklumat dan maklumatnya berhenti kedudukan yang dinyatakan dalam peratusan. Kedudukan berhenti sebenarnya adalah pilihan; pelayar cukup bijak untuk menentukan kedudukan yang betul, jadi apabila kita tidak menentukan warna pertama, penyemak imbas akan diambil 0% sebagai lalai.
Dan, nilai seterusnya ialah warna kedua gabungan. Ia berfungsi seperti nilai sebelumnya, hanya jika warna terakhir digunakan, dan kami tidak menyatakannya berhenti kedudukan, nilai 100% akan diambil sebagai lalai. Sekarang mari lihat contoh di bawah ini:
div background-image: linear-gradient (top, # FF5A00 0%, # FFAE00 100%);
Potongan di atas akan mencipta kecerunan seperti apa yang kita lihat sebelum ini (tidak ada perbezaan) tetapi sekarang kita menentukan kedudukan berhenti warna;
Sekarang mari kita tukar berhenti warna, dan kali ini kita akan tentukan 50% untuk warna pertama dan 51% untuk warna kedua, dan mari kita lihat bagaimana ternyata;
div background-image: linear-gradient (top, # FF5A00 50%, # FFAE00 51%);
Ketelusan
Mencipta ketelusan dalam kecerunan juga mungkin. Untuk membuat kesan yang kami perlukan untuk menterjemahkan warna hex ke dalam rgba mod dan menurunkan saluran alfa.
div background-image: linear-gradient (top, rgba (255,90,0,0.2), rgb (255,174,0,0.2));
Coretan di atas akan mengurangkan keamatan warna oleh 20%, dan kecerunan akan berubah seperti ini:
Pelbagai warna
Sekiranya anda ingin lebih banyak warna ditambahkan, tambahkan warna di sebelah yang lain dengan pemisah koma dan biarkan pelayar menentukan setiap posisi berhenti warna.
div background-image: linear-gradient (atas, merah, oren, kuning, hijau, biru, indigo, ungu);
Potongan di atas akan membuat pelangi berikut.
Keserasian Penyemak Imbas
Malangnya, pada masa penulisan ini, semua penyemak imbas semasa masih belum menyokong sintaks standard. Mereka masih memerlukan awalan vendor (-webkit-, -moz-, -Cik- dan -o-). Jadi, itulah sebabnya sintaks lengkap seperti ini:
div background-image: -webkit-linear-gradient (top, # FF5A00 0%, # FFAE00 100%); latar belakang-imej: -moz-linear-kecerunan (atas, # FF5A00 0%, # FFAE00 100%); background-image: -ms-linear-gradient (atas, # FF5A00 0%, # FFAE00 100%); background-image: -o-linear-gradient (atas, # FF5A00 0%, # FFAE00 100%); latar belakang-imej: linear-gradient (atas, # FF5A00 0%, # FFAE00 100%);
Sebaliknya, Internet Explorer, khususnya versi 9 dan yang lebih rendah, jauh dari standard. Kecerunan dalam IE9 dan di bawah diisytiharkan dengan penapis, jadi jika kita mahu menambah kecerunan pada penyemak imbas, kita perlu menulis sesuatu seperti ini;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
The penapis mempunyai batasannya: pertama, ia tidak membenarkan lebih daripada tiga warna ditambah, dan mewujudkan kesan ketelusan juga sedikit rumit - ia tidak membenarkan rgba, tetapi IE penapis kegunaan #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Berikut adalah alat untuk membantu anda menukar rgba kepada #ARGB.
- Demo
- Muat turun Sumber
Menulis Syntax lebih cepat
Seperti yang anda lihat di atas, untuk mengekalkan keserasian kecerunan merentas pelayar, kita perlu menambah lima baris kod yang tidak cekap.
Terdapat banyak cara yang boleh kita lakukan untuk mempermudahkan tugas; seperti menggunakan Awalan-Awalan, Prefixr, KURANG atau Sass untuk membantu menyusun kod, tetapi di atas semua, kami cadangkan menggunakan alat ini, ColorZilla Gradient. Alat ini hanya akan menghasilkan semua kod yang diperlukan untuk kecerunan untuk berfungsi di semua pelayar.
Perkataan Akhir
Hari ini kita telah banyak membincangkan tentang mewujudkan kecerunan, kita telah melihat ke dalam setiap bahagian sintaks, mewujudkan kesan telus dan mengekalkan keserasian penyemak imbas. Jadi, pada ketika ini, kami berharap anda sudah mempunyai pemahaman yang lebih baik mengenai subjek ini.
Masih terdapat banyak perkara yang kami merancang untuk meneroka Kecerunan CSS3 dalam jawatan masa depan kami, jadi muat turun ke Hongkiat.com. Terakhir, terima kasih kerana membaca siaran ini, kami harap anda menikmatinya.
Bacaan lanjut
- Bullet Proof Cross Browser RGB Latar Belakang - Lea Verou
- Imej CSS3 - W3.org
- Bilakah saya boleh menggunakan Gradien CSS3 - CanIUse.com
