Cara Kerja Generator Gradien
Generator Gradien minangka piranti lunak adhedhasar browser sing digunakake kanggo ngrancang kode CSS gradien kanthi visual. Piranti iki mbantu pangguna milih jinis gradien, ngatur arah utawa wujud, lan nambahake nganti wolung titik warna (color stops). Nalika pangguna ngowahi setelan kasebut, pratinjau visual saka gradien bakal langsung katon ing layar. Sawise entuk tampilan sing dikarepake, kode CSS sing diasilake bisa disalin kanthi siji klik.
Saben gradien dipunproses langsung wonten ing browser panjenengan. Boten wonten data ingkang dipununggah dhateng BroBroGo. Proses iki lumaku kanthi lokal ing piranti pangguna tanpa mbutuhake pangiriman data menyang server njaba.
Jinis Gradien CSS lan Pangaturane
Ing desain web, gradien digunakake kanggo nggawe latar mburi (background) sing luwih dinamis tinimbang warna tunggal. Piranti iki nyedhiyakake telung jinis gradien utama sing bisa dipilih liwat bagean Tipe gradien:
1. Gradien Linear (Linear)
Gradien linear nyampurake warna ing sadawane garis lurus. Arah campuran warna iki ditemtokake dening nilai Sudut sing diatur nganggo slider. Nilai sudut kasebut diukur ing satuan derajat (°), ing ngendi:
- 0° nuduhake arah munggah (madhep minggil).
- 90° nuduhake arah nengen (madhep nengen).
2. Gradien Radial (Radial)
Gradien radial nyebarake warna metu saka titik tengah. Jinis iki ora nggunakake sudut kanggo ngatur arahe. Minangka gantine, pangguna bisa milih wujud geometris ing bagean Wujud, yaiku:
- Elips.
- Bunderan.
3. Gradien Conic (Conic)
Gradien conic muterake warna ngubengi titik tengah, saengga katon kaya rodha warna utawa kerucut yen dideleng saka ndhuwur. Padha kaya gradien linear, gradien conic uga nggunakake setelan Sudut kanggo nemtokake titik wiwitan rotasi warna kasebut.
Ngatur Color Stops
Color stops minangka titik warna tartamtu sing dipasang ing posisi tartamtu ing sadawane garis gradien. Saben color stop nduweni rong komponen utama:
- Warni stop: Nilai warna sing dipilih.
- Posisi: Panggonan warna kasebut ing skala 0% (ing wiwitan gradien) nganti 100% (ing pungkasan gradien).
Nalika piranti iki dibukak kaping pisanan, gradien awal wis disetel nganggo rong color stops standar, yaiku #6366f1 ing posisi 0% lan #ec4899 ing posisi 100%.
Pangguna bisa nambahake variasi warna kanthi ngeklik tombol Tambah stop. Saben color stop anyar sing ditambahake bakal kanthi otomatis manggon ing posisi standar 50%. Piranti iki mbatesi gunggungé color stops nganti maksimal wolung titik. Nalika gunggung color stops wis tekan wolung, tombol Tambah stop bakal dadi ora aktif (disabled). Yen ana warna sing pengin dibusak, pangguna bisa nggunakake tombol Busak stop.
Alur Input lan Output Generator
Kanggo nggunakake generator iki kanthi efektif, pangguna mung perlu ngetutake alur input lan output sing wis disedhiyakake ing antarmuka:
| Komponen Antarmuka | Jinis Input / Output | Katrangan |
|---|---|---|
| Tipe gradien | Input (Pilihan) | Milih antarane Linear, Radial, utawa Conic. |
| Sudut | Input (Slider) | Ngatur arah derajat (0° - 360°) kanggo linear lan conic. |
| Wujud | Input (Pilihan) | Milih Elips utawa Bunderan kanggo radial. |
| Color stops | Input (Warna & Angka) | Ngatur Warni stop lan Posisi (0% - 100%) nganti 8 warna. |
| Pratinjau | Output (Visual) | Tampilan langsung saka asil konfigurasi gradien. |
| CSS | Output (Teks Kode) | Kode CSS sing siyap disalin menyang berkas stylesheet. |
Sawise kabeh setelan wis trep, pangguna bisa ngeklik tombol Salin CSS. Nalika tombol kasebut diklik, kahanan tombol bakal langsung owah dadi Copied kanggo nuduhake yen kode CSS wis kasalin menyang clipboard piranti.
Pitakonan sing Sering Ditakokake (FAQ)
Menapa bedanipun gradien linear, radial, lan conic?
Gradien linear nyampuraken warni ing sadawane garis lurus kanthi sudut tartamtu. Gradien radial nyebaraken warni medal saking titik tengah awujud bunderan utawi elips. Gradien conic muteraken warni ngubengi titik tengah kados rodha warni.
Menapa ingkang dipunwastani color stops?
Saben color stop minangka warni ingkang dipunpasang wonten ing posisi tartamtu ing sadawane gradien — 0% ing wiwitan, 100% ing pungkasan. Pindhahaken stop kangge nggeser warni, utawi tambahaken stop sanesipun kangge campuran warni ingkang langkung sugih. Panjenengan saged ngginakaken ngantos wolung stop.
Kadospundi caranipun ngatur arah gradien?
Kangge gradien linear utawi conic, slider sudut ngatur arah — 0° madhep minggil, 90° madhep nengen. Gradien radial boten gadhah sudut; pilih wujud bunderan utawi elips minangka gantinipun.
Pinten gunggung maksimal warna sing bisa ditambahake ing kene?
Panjenengan bisa nambahake nganti wolung color stops. Nalika jumlah kasebut wis tekan wolung, tombol kanggo nambah stop bakal dadi mati lan ora bisa diklik maneh.