<gradient> dalam CSS adalah <image> yang terbuat dari dua atau lebih warna yang dengan mudah memudar dari satu warna ke warna lainnya. Ini biasanya digunakan untuk bayangan halus pada gambar latar belakang, tombol, dan banyak hal lainnya.
Gradient CSS bukan warna, mis. Tidak dapat digunakan sebagai nilai <color> untuk properti.
Seperti jenis <image> lain yang didefinisikan dalam CSS, Gradient dapat digunakan di properti apa pun yang menerima gambar (nilai <image>), seperti, misalnya, properti gambar latar.
Gradient CSS tidak memiliki ukuran atau rasio intrinsik seperti jenis gambar lainnya. Ukurannya tergantung pada elemen yang digunakan. Misalnya, jika Anda menggunakan Gradient sebagai latar belakang, secara default Gradient akan menarik ke dalam kotak Gradient ukuran kotak padding elemen. Jika ukuran latar belakang secara eksplisit diatur ke nilai seperti 100px 200px, maka kotak Gradient akan menjadi lebar 100px dan tinggi 200px. Demikian pula, untuk Gradient yang digunakan sebagai gambar gaya daftar, kotak akan menjadi persegi 1em, yang merupakan ukuran objek default untuk properti itu.
Gradient dalam CSS dapat berupa Gradient linier, Gradient radial, atau Gradient berulang yang terdiri dari salah satu dari dua tipe Gradient ini:
|
1 2 3 |
<gradient> = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ] |
Gradient linier dibuat menggunakan fungsi linear-Gradient (), di mana warna ditempatkan di sepanjang garis Gradient imajiner. Garis dapat horisontal, vertikal, atau diagonal dengan mengambil nilai sudut apa pun. Arah garis dan warna yang ditentukan semuanya ditentukan dalam fungsi.
Gradient radial dibuat menggunakan fungsi radial-Gradient (). Dalam Gradient radial, alih-alih warna memudar dengan lancar dari satu sisi kotak Gradient ke sisi lainnya seperti dengan Gradient linier, warna-warna tersebut muncul dari satu titik dan menyebar ke arah luar dalam bentuk melingkar atau elips.
Gradient linear atau radial berulang dibuat menggunakan fungsi repeating-linear-Gradientt () atau fungsi Gradient radial berulang (), tergantung pada tipe Gradient mana yang ingin Anda ulangi. Gradient yang diulang memiliki ukuran yang tetap dan diulang sebanyak yang diperlukan untuk mengisi kotak seluruh wadah.
Anda dapat membaca lebih lanjut tentang membuat Gradient yang berbeda dan contoh yang lebih kompleks dan praktis dalam entri yang berkaitan dengan masing-masing fungsi Gradient yang disebutkan di atas.
Gradient CSS tidak dapat ditransisikan dalam CSS kecuali di IE10 +. Biasanya, ilusi transisi warna Gradient dibuat dengan mentransisikan posisi gambar Gradient pada suatu elemen. Anda dapat membaca lebih lanjut tentang ini di artikel Animating CSS3 Gradientts oleh Louis Lazaris.
Gradient berulang dapat digunakan untuk membuat pola latar belakang yang sangat indah dan menarik. Lea Verou telah membuat galeri pola CSS3 yang bagus yang menampilkan banyak pola yang dibuat menggunakan Gradient, jadi pastikan Anda memeriksanya, dan baca lebih lanjut tentang Gradient untuk mempelajari bagaimana Anda dapat membuat pola Anda sendiri
Contohnya
Contoh ini menunjukkan penggunaan gradient linier CSS sebagai gambar latar belakang untuk suatu elemen, menggunakan fungsi linear-gradient ().
|
1 2 3 |
.kotak { background-image: linear-gradient(white, gray); } |