CSS3 Linear Gradients [Tips CSS3]
Gradien adalah tambahan fitur warna yang bagus di CSS3. Daripada hanya menambahkan satu warna, kami sekarang dapat menambahkan beberapa kombinasi warna dalam satu blok deklarasi tanpa bergantung pada gambar, yang dapat mengurangi permintaan HTTP di situs web kami memungkinkan situs web memuat lebih cepat.
Jika Anda telah bermain-main dengan gradien di CSS3 Anda mungkin akrab dengan dua metode: radial dan gradien linier. Posting hari ini adalah tentang yang terakhir.
Menciptakan Gradien
Karena spec mengatakan gradien dalam CSS3 adalah sebuah gambar, ia tidak memiliki properti khusus seperti penambahan fitur baru lainnya, sehingga dinyatakan menggunakan gambar latar belakang properti sebagai gantinya.
Jika kita melihat sintaks lengkap untuk gradien, itu terlihat sedikit empuk, yang dapat menimbulkan kebingungan bagi sebagian orang.
div background-image: -webkit-linear-gradient (atas, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linear-gradient (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%); background-image: linear-gradient (atas, # FF5A00 0%, # FFAE00 100%);
Jadi mari kita gali setiap bagian dari sintaksis satu per satu untuk memperjelasnya.
Pertama-tama, gradien linier dideklarasikan dengan linear-gradient () fungsi. Fungsi ini memiliki tiga nilai primer. Nilai pertama menentukan posisi awal gradien. Anda dapat menggunakan kata kunci deskriptif, seperti teratas untuk memulai gradien yang mengalir dari teratas;
div background-image: linear-gradient (atas, # FF5A00, # FFAE00);
Cuplikan di atas adalah versi resmi dari W3C untuk membuat gradien. Ini sebenarnya lebih sederhana dan cukup jelas dan juga akan membuat gradien berikut.
Anda juga bisa menggunakan bawah untuk melakukan yang sebaliknya, atau yang lain kanan dan kiri.
Kami juga dapat membuat gradien diagonal menggunakan tingkat sudut sebagai posisi awal gradien. Berikut ini sebuah contoh:
div background-image: linear-gradient (45deg, # FF5A00, # FFAE00);
Cuplikan di atas akan membuat gradien warna berikut:
Nilai kedua dari fungsi akan memberi tahu warna pertama informasi dan posisi berhenti yang dinyatakan dalam persentase. Posisi stop sebenarnya adalah opsional; browser cukup pintar untuk menentukan posisi yang tepat, jadi ketika kita tidak menentukan warna pertama, browser akan mengambil 0% sebagai standar.
Dan, nilai selanjutnya adalah warna kedua kombinasi. Ini berfungsi seperti nilai sebelumnya, hanya jika itu adalah warna terakhir yang diterapkan, dan kami tidak menentukan posisi berhenti, nilai 100% akan dianggap sebagai default. Sekarang, mari kita lihat contoh di bawah ini:
div background-image: linear-gradient (atas, # FF5A00 0%, # FFAE00 100%);
Cuplikan di atas akan membuat gradien seperti yang kita lihat sebelumnya (tidak ada perbedaan) tetapi sekarang kita tentukan posisi penghentian warna;
Sekarang mari kita ubah berhenti warna, dan kali ini kami akan tentukan 50% untuk warna pertama dan 51% untuk warna kedua, dan mari kita lihat bagaimana hasilnya;
div background-image: linear-gradient (atas, # FF5A00 50%, # FFAE00 51%);
Transparansi
Menciptakan transparansi dalam gradien juga dimungkinkan. Untuk membuat efek, kita perlu menerjemahkan warnanya hex ke rgba mode dan turunkan saluran alpha.
div background-image: linear-gradient (atas, rgba (255,90,0,0.2), rgb (255,174,0,0.2));
Cuplikan di atas akan menurunkan intensitas warna sebesar 20%, dan gradien akan berubah seperti ini:
Beberapa warna
Jika Anda ingin lebih banyak warna ditambahkan, cukup tambahkan warna di sebelah yang lain dengan pembatas koma dan biarkan browser menentukan setiap posisi berhenti warna.
div background-image: linear-gradient (atas, merah, oranye, kuning, hijau, biru, nila, ungu);
Cuplikan di atas akan membuat pelangi berikut.
Kompatibilitas Browser
Sayangnya, pada saat penulisan ini, semua browser saat ini belum mendukung sintaks standar. Mereka masih membutuhkan awalan vendor (-webkit-, -moz-, -Nona- dan -Hai-). Jadi, itulah sebabnya sintaks lengkap muncul seperti ini:
div background-image: -webkit-linear-gradient (atas, # FF5A00 0%, # FFAE00 100%); background-image: -moz-linear-gradient (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%); background-image: linear-gradient (atas, # FF5A00 0%, # FFAE00 100%);
Di sisi lain, Internet Explorer, khususnya versi 9 dan lebih rendah, masih jauh dari standar. Gradien dalam IE9 dan di bawah ini dinyatakan dengan filter, jadi jika kita ingin menambahkan gradien pada browser-browser itu, kita harus menulis sesuatu seperti ini;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
Itu filter memiliki keterbatasan: pertama, tidak memungkinkan lebih dari tiga warna ditambahkan, dan menciptakan efek transparansi juga agak rumit - tidak memungkinkan rgba, tapi IE filter menggunakan #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Berikut adalah alat untuk membantu Anda mengonversi rgba untuk #ARGB.
- Demo
- Sumber Unduhan
Menulis Sintaks Lebih Cepat
Seperti yang Anda lihat di atas, untuk menjaga kompatibilitas gradien antar browser, kita perlu menambahkan lima baris kode yang tidak efisien.
Ada banyak cara yang bisa kita lakukan untuk menyederhanakan tugas; seperti menggunakan Prefix-free, Prefixr, KURANG atau Sass untuk membantu mengkompilasi kode, tetapi di atas semua, kami sarankan menggunakan alat ini, ColorZilla Gradient. Alat ini hanya akan menghasilkan semua kode yang diperlukan agar gradien berfungsi di semua browser.
Kata-kata terakhir
Hari ini kita telah banyak membahas tentang membuat gradien, kita telah melihat ke setiap bagian dari sintaks, menciptakan efek transparan dan menjaga kompatibilitas browser. Jadi, pada titik ini, kami berharap Anda sudah memiliki pemahaman yang lebih baik tentang masalah ini.
Masih banyak hal yang kami rencanakan untuk dieksplorasi CSS3 Gradien dalam posting kami di masa depan, jadi tetap terhubung dengan Hongkiat.com. Terakhir, terima kasih telah membaca posting ini, kami harap Anda menikmatinya.
Bacaan lebih lanjut
- Bullet Proof Cross Browser Latar Belakang RGBA - Lea Verou
- Gambar CSS3 - W3.org
- Kapan saya bisa menggunakan Gradien CSS3 - CanIUse.com
