CSS3 Circular and Elliptical Gradients [Tips CSS3]
Hari ini kita akan melanjutkan diskusi kita pada CSS3 Gradien. Dalam posting sebelumnya kami telah menunjukkan kepada Anda cara membuat Gradien Linier. Kali ini kita akan membahas kerabat mereka, Gradien Edaran dan Elips.
Sintaks Gradien
Gradien dalam CSS3 dideklarasikan menggunakan gambar latar belakang milik. Ini untuk kompatibilitas yang lebih baik ketika kita juga perlu menambahkan warna latar belakang dalam satu set aturan tunggal, sehingga mereka tidak saling bertabrakan. Kemudian, untuk membuat gradien radial kita cukup menyebutnya dengan ini radial-gradient () fungsi. Ada empat nilai yang akan dimasukkan dalam fungsi untuk mengatur gradien dengan benar.
Nilai pertama mendefinisikan posisi gradien. Kita dapat menggunakan kata kunci deskriptif seperti atas, bawah, tengah dan kiri, atau kita juga bisa lebih spesifik suka, 50% 50% untuk mengatur gradien di tengah atau 0% 0% untuk mengatur gradien untuk memulai kiri atas.
Nilai kedua mendefinisikan bentuk dan ukuran gradien, ada dua argumen untuk membentuk gradien, pertama elips yang merupakan default, dan yang kedua adalah lingkaran.
Dan untuk ukuran gradien, kita dapat memilih salah satu dari enam argumen berikut.
| Nilai-nilai | Deskripsi |
|---|---|
sisi terdekat | Bentuk gradien memenuhi sisi kotak paling dekat dengan pusatnya (untuk lingkaran) atau memenuhi sisi vertikal dan horizontal paling dekat dengan pusat (untuk elips). |
sudut terdekat | Bentuk gradien berukuran sehingga tepat memenuhi sudut kotak terdekat dari pusatnya. |
sisi terjauh | Mirip dengan sisi terdekat, kecuali bentuknya berukuran memenuhi sisi kotak paling jauh dari pusatnya (atau sisi vertikal dan horizontal). |
sudut terjauh | Bentuk gradien berukuran sehingga tepat memenuhi sudut terjauh kotak dari pusatnya. |
berisi | Sinonim untuk |
penutup | Sinonim untuk |
Sumber Tabel: Jaringan Pengembang Mozilla.
Terakhir, yang ketiga dan keempat menentukan kombinasi warna. Jadi, inilah cara kita menulis sintaks untuk membuat Berbentuk bulat panjang gradien, dan kali ini kita akan gunakan penutup untuk ukuran gradien, sehingga akan menyebar luas, menutupi wadah;
body background-image: radial-gradient (pusat tengah, penutup elips, # ffeda3, # ffc800);
Untuk membuat Bundar gradien kita cukup melakukannya dengan cara ini:
body background-image: radial-gradient (pusat tengah, penutup lingkaran, # ffeda3, # ffc800);
Seperti namanya, bentuk gradien akan menjadi lingkaran.
Dukungan Browser
Catat saja, semua browser masih dalam proses memberikan dukungan penuh untuk fitur ini, sehingga mereka masih membutuhkan awalan vendor. Dengan demikian, seluruh sintaksis lengkap itu akan bekerja di semua browser modern - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ dan Opera 11+ - akan terlihat seperti ini;
body background-image: radial-gradient (tengah bawah, elips cover, # ffeda3, # ffc800); background-image: -o-radial-gradient (tengah bawah, elips cover, # ffeda3, # ffc800); background-image: -ms-radial-gradient (tengah bawah, penutup elips, # ffeda3, # ffc800); background-image: -moz-radial-gradient (tengah bawah, penutup elips, # ffeda3, # ffc800); background-image: -webkit-radial-gradient (tengah bawah, penutup elips, # ffeda3, # ffc800);
Lihat demo atau unduh sumber untuk bermain-main dengan gradien.
- Demo
- Sumber Unduhan
Kata-kata terakhir
Membuat gradien radial CSS3 tidak sesulit yang Anda pikirkan, dan terutama ketika Anda mendapatkan bantuan dari alat-alat ini untuk menghasilkan kode:
- Gradien Colorzilla
- Gradientoo
Gradien radial hanya satu jenis gadien CSS3, kami akan melanjutkan diskusi tentang subjek ini di pos mendatang, jadi tetap ikuti perkembangannya di Hongkiat.com
