Penjana Gradien CSS
Cipta gradien CSS menakjubkan secara visual. Jana gradien linear, radial dan konikal dengan pelbagai henti warna, sudut dan kedudukan tersuai. Salin kod CSS sedia pengeluaran serta-merta.
Apakah gradien CSS?
Gradien CSS ialah nilai imej CSS yang memaparkan peralihan lancar antara dua warna atau lebih tanpa menggunakan fail imej. Gradien diberikan oleh pelayar, menjadikannya bebas resolusi dan berprestasi tinggi.
Jenis gradien CSS apakah yang disokong?
Penjana ini menyokong tiga jenis: linear-gradient (warna sepanjang garis lurus), radial-gradient (warna memancar dari pusat), dan conic-gradient (warna berputar di sekitar pusat seperti muka jam).
Apakah perbezaan gradien linear dan radial?
Gradien linear meralihkan warna sepanjang garis lurus ditakrifkan oleh sudut atau kata kunci arah. Gradien radial meralihkan warna ke luar dari pusat dalam bentuk bulatan atau elips.
Berapa banyak henti warna boleh digunakan?
Anda boleh menggunakan sebanyak mana henti warna yang diperlukan. Setiap henti mentakrifkan warna dan pilihan kedudukan (0% hingga 100%) sepanjang garis gradien. Berbilang henti mencipta peralihan pelbagai warna yang kompleks.
Bagaimana menggunakan kod CSS yang dijana?
Salin kod CSS yang dijana dan tampal sebagai nilai sifat background atau background-image dalam helaian gaya CSS anda. Kod berfungsi dalam semua pelayar moden.
Apakah henti warna dalam gradien?
Henti warna mentakrifkan warna khusus pada kedudukan tertentu sepanjang garis gradien. Contohnya "red 0%, blue 50%, green 100%" mencipta gradien bermula merah, bertukar biru di tengah dan berakhir hijau.
Bolehkah mencipta gradien bersudut?
Ya, gradien linear menyokong nilai sudut dari 0deg hingga 360deg. Anda juga boleh menggunakan kata kunci arah seperti "to right", "to bottom", "to top left".
Adakah gradien CSS responsif?
Ya, gradien CSS secara semulajadi responsif kerana berasaskan vektor dan diberikan oleh pelayar. Ia berskala sempurna kepada sebarang saiz bekas tanpa kehilangan kualiti atau peningkatan saiz fail.
Adakah gradien CSS mempengaruhi prestasi halaman?
Gradien CSS umumnya sangat berprestasi. Ia menghapuskan permintaan HTTP untuk fail imej dan dipercepat perkakasan. Namun, gradien sangat kompleks dengan banyak henti boleh memberi kesan rendering pada peranti kelas rendah.
Bolehkah menggunakan gradien untuk latar belakang dan sempadan?
Ya, gradien boleh digunakan untuk background-image, border-image, mask-image dan sebarang sifat yang menerima nilai imej CSS.
Pelayar apakah yang menyokong gradien CSS?
Semua pelayar moden menyokong gradien CSS termasuk Chrome, Firefox, Safari, Edge dan Opera. Sokongan cemerlang sejak IE10. Awalan vendor tidak lagi diperlukan.
Bagaimana mencipta gradien berulang?
Gunakan repeating-linear-gradient atau repeating-radial-gradient dan bukannya versi standard. Ini mengulangi corak gradien untuk mengisi seluruh elemen, mencipta kesan berjalur atau bercorak.
Bolehkah menganimasikan gradien CSS?
Gradien CSS tidak boleh dianimasikan secara langsung dengan peralihan CSS. Namun, anda boleh menganimasikan background-position, background-size atau menggunakan sifat CSS tersuai dengan @property.
Adakah penjana gradien ini percuma?
Ya, penjana gradien CSS ini sepenuhnya percuma. Tiada pendaftaran diperlukan, tiada had penggunaan dan semua kod yang dijana ialah milik anda untuk digunakan dalam mana-mana projek.