Penjana Gradien CSS
Gradien CSS ialah imej latar belakang. Gradien merah ke biru dari kiri ke kanan ditulis background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); dan yang bulat putih ke hitam ditulis background: radial-gradient(circle at center, #ffffff 0%, #000000 100%);.
Cara guna
- Pilih pratetap atau mulakan dengan lalai, kemudian pilih Linear atau Radial.
- Untuk gradien linear, tetapkan sudut dengan peluncur atau kotak nombor. 0 darjah menghala ke atas, 90 ke kanan, 180 ke bawah dan 270 ke kiri. Untuk radial, pilih circle atau ellipse dan letak pusatnya.
- Sunting hentian warna: tukar warna dengan kotak warna atau kod HEX, dan tetapkan kedudukannya dari 0 hingga 100 peratus. Tambah sehingga 6 hentian, buang hentian, atau tekan Jarak sekata untuk menjarakkannya sama rata.
- Tekan Salin CSS. Baris pertama ialah warna biasa untuk pelayar lama, dan baris kedua ialah gradiennya.
Cara kiraan
Gradien linear menyebatikan warna sepanjang satu garisan. Sudut menetapkan arah garisan itu dalam darjah, ikut arah jam dari atas: 0deg bergerak dari bawah ke atas, 90deg dari kiri ke kanan. Setiap hentian warna memasangkan warna dengan kedudukan di sepanjang garisan, dan pelayar menyebatikan secara lancar antara hentian yang bersebelahan.
Gradien radial menyebatikan warna ke luar dari titik pusat. Bentuknya ialah bulatan atau elips yang meregang mengikut kotak, dan kata kunci seperti "at top left" menggerakkan pusat. Kedudukan 0 peratus ialah pusat dan 100 peratus ialah tepi terjauh.
Alat ini menyusun hentian mengikut kedudukan sebelum menulis CSS, jadi susunan anda menyuntingnya tidak penting. Dua hentian pada kedudukan yang sama menghasilkan tepi keras dan bukan adunan. Kedudukan dibundarkan kepada dua tempat perpuluhan.
Warna menerima HEX 3, 6 atau 8 digit. Bentuk 8 digit berakhir dengan sepasang alfa, jadi #11182700 lut sinar sepenuhnya. Pudar kepada lut sinar ditunjukkan di atas corak papan dam dalam pratonton.
Helaian ringkas sudut
| Sudut | Arah | Bentuk kata kunci |
|---|---|---|
| 0deg | Bawah ke atas | to top |
| 90deg | Kiri ke kanan | to right |
| 180deg | Atas ke bawah | to bottom |
| 270deg | Kanan ke kiri | to left |
| 135deg | Kiri atas ke kanan bawah | to bottom right (lebih kurang) |
Soalan lazim
Mengapa baris pertama ialah warna biasa?
Ia sandaran untuk persekitaran yang tidak menyokong gradien. Pelayar yang memahami baris kedua menggunakannya sebagai ganti, jadi anda boleh memadam baris pertama jika tidak memerlukan sandaran.
Apakah maksud 135deg?
Garisan gradien menghala ke kanan bawah: ia bermula di sudut kiri atas dan berakhir di sudut kanan bawah. 90deg ialah kiri ke kanan dan 180deg ialah atas ke bawah.
Bagaimana membuat jalur keras dan bukan adunan lancar?
Beri dua hentian kedudukan yang sama. Contohnya merah pada 50 peratus dan biru pada 50 peratus mencipta tepi tajam di tengah.
Bagaimana membuat pudar kepada lut sinar?
Gunakan HEX 8 digit untuk hentian terakhir, seperti #11182700. Pudar kepada kata kunci transparent boleh kelihatan kelabu dalam pelayar lama seperti Safari lama, jadi warna yang sama dengan alfa sifar ialah pilihan yang lebih selamat.
Adakah ia menyokong gradien kon?
Belum lagi. Alat ini merangkumi gradien linear dan radial.
Adakah apa-apa dimuat naik?
Tidak. Pratonton dan CSS dihasilkan dalam pelayar anda.