Generator Properti CSS

Generator properti CSS adalah alat yang membuat kode CSS untuk efek visual dari sekumpulan penggeser dan pemilih warna, sehingga pengguna tidak perlu mengetikkan kodenya secara manual. Generator ini mencakup empat efek: gradien, bayangan kotak, radius batas, dan bayangan teks. Setiap panel menampilkan pratinjau langsung dan menghasilkan CSS yang siap disalin.

Yang dihasilkan

• Gradien: transisi warna linear atau radial antara dua warna
• Bayangan kotak: bayangan jatuh atau bayangan ke dalam di sekitar elemen, dengan kontrol untuk pergeseran, pengaburan, penyebaran, warna, dan opasitas
• Radius batas: sudut membulat, sama pada keempat sudut atau diatur secara terpisah
• Bayangan teks: bayangan di belakang teks, dengan kontrol untuk offset, buram, warna, dan opasitas

Setiap pengaturan memperbarui pratinjau dan CSS yang dihasilkan secara bersamaan, sehingga perubahan dapat diperiksa sebelum kode disalin.

Cara menghitung gradien linear CSS

Gradien linear berpindah dari satu warna ke warna lain sepanjang garis lurus. Sintaks CSS-nya adalah:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

Sudut diukur dalam derajat, dari 0 hingga 360. position1 dan position2 menentukan lokasi setiap warna mencapai intensitas penuh, sebagai persentase dari panjang gradien.

Contoh perhitungan

Nilai awal generator adalah sudut 90 derajat, #ff5f6d pada 0%, dan #ffc371 pada 100%. Hasilnya:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

Baris pertama adalah cadangan warna biasa untuk browser yang karena alasan tertentu gagal merender gradien. Baris kedua adalah gradien itu sendiri.

Rumus gradien radial

Gradien radial menyebar keluar dari titik pusat, bukan sepanjang garis:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Generator ini selalu menghasilkan gradien radial berbentuk lingkaran. Generator ini tidak menyediakan pilihan bentuk elips atau cara untuk memindahkan titik pusat; hanya kedua warna dan posisi stop-nya yang dapat diubah.

Kedua jenis gradien dalam alat ini menggunakan tepat dua warna, yang ditetapkan dengan pemilih Warna 1 dan Warna 2. Tidak ada pilihan untuk menambahkan stop warna ketiga.

Rumus bayangan kotak CSS

Bayangan kotak adalah bayangan yang digambar di sekitar tepi elemen:

1box-shadow: h-offset v-offset blur spread color;
2

h-offset dan v-offset memindahkan bayangan ke kiri/kanan dan ke atas/bawah. Nilai positif mendorongnya ke kanan atau ke bawah; nilai negatif mendorongnya ke kiri atau ke atas. blur melembutkan tepi bayangan; angka yang lebih besar menyebarkan kelembutan lebih jauh. spread memperbesar atau memperkecil ukuran bayangan sebelum efek buram diterapkan. Menambahkan kata kunci inset sebelum offset akan menggambar bayangan di dalam batas elemen, bukan di luarnya.

Contoh perhitungan

Dengan pengaturan bawaan (offset horizontal 5px, offset vertikal 5px, buram 10px, sebaran 0px, hitam dengan opasitas 20%), alat ini menghasilkan:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

Penggeser opasitas pemilih warna berjalan dari 0 hingga 100 dan dikonversi ke skala 0 hingga 1 yang digunakan rgba(), sehingga 20% menjadi 0,2.

Rumus radius batas CSS

Radius sudut membulatkan sudut-sudut elemen. Ada dua bentuk:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

Jika keempat sudut memiliki satu nilai yang sama, generator menulis bentuk singkat. Jika nilainya berbeda, generator mencantumkan keempat nilai dalam urutan yang tepat: kiri atas, kanan atas, kanan bawah, lalu kiri bawah.

Contoh perhitungan

Radius bawaan adalah 10px pada setiap sudut:

1border-radius: 10px;
2

Gambar avatar berbentuk lingkaran biasanya menggunakan border-radius: 50%, meskipun nilai tersebut berada di luar rentang yang diizinkan penggeser generator ini (0 hingga 100 piksel).

Rumus bayangan teks CSS

Bayangan teks bekerja seperti bayangan kotak, tetapi tidak memiliki nilai sebaran dan diterapkan pada huruf, bukan pada kotak elemen:

1text-shadow: h-offset v-offset blur color;
2

Contoh perhitungan

Dengan pengaturan bawaan (offset horizontal 2px, offset vertikal 2px, buram 3px, hitam dengan opasitas 50%):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Kode warna yang diterima generator

Setiap kontrol warna memiliki sampel warna dan kotak teks. Kotak teks menerima kode warna heksadesimal, yaitu bentuk # yang digunakan di seluruh CSS. Empat panjang yang valid adalah tiga digit (#f00), empat digit (#f00c), enam digit (#ff0000), dan delapan digit (#ff0000cc). Bentuk singkat memiliki arti warna yang sama dengan bentuk panjang, karena setiap digit digandakan: #123 adalah warna yang sama dengan #112233.

Digit terakhir pada bentuk empat digit dan pasangan terakhir pada bentuk delapan digit menentukan transparansi. Generator bayangan mengabaikan digit tersebut dan mengambil nilai alfa dari penggeser Opasitas, sehingga penggeser selalu menampilkan transparansi yang benar-benar diterapkan. Jika kotak teks berisi sesuatu yang bukan warna heksadesimal, seperti kode yang baru diketik sebagian, bayangan akan menggunakan warna hitam sebagai cadangan, bukan menghasilkan deklarasi yang rusak.

Cara menggunakan generator properti CSS

1. Pilih tab: Gradien, Bayangan Kotak, Radius Batas, atau Bayangan Teks.
2. Sesuaikan penggeser, pemilih warna, dan kotak centang. Setiap penggeser memiliki kotak angka di sebelahnya untuk mengetikkan nilai yang tepat. Panel pratinjau dan kode CSS langsung diperbarui.
3. Pilih tombol "Salin ke Papan Klip", lalu tempelkan kode ke lembar gaya atau atribut style.
4. Pilih "Atur Ulang" untuk mengembalikan setiap bidang di keempat tab ke nilai awalnya. Tindakan ini juga mengubah tab aktif kembali ke Gradien, meskipun tab lain sedang ditampilkan.

Pertanyaan yang sering diajukan

Untuk apa generator properti CSS digunakan? Generator ini mengubah masukan dari penggeser dan pemilih warna menjadi kode CSS yang sudah jadi untuk gradien, bayangan, dan sudut membulat, sehingga pengguna tidak perlu menulis atau menghafalkan sintaks tersebut secara manual.

Apa perbedaan antara gradien linear dan radial? Gradien linear mengubah warna sepanjang garis lurus pada sudut tertentu. Gradien radial mengubah warna ke arah luar dari titik pusat. Pilihan radial pada alat ini selalu menggunakan bentuk lingkaran.

Apakah alat ini dapat membuat gradien dengan lebih dari dua warna? Tidak. Panel gradien linear dan radial mendukung tepat dua warna, Warna 1 dan Warna 2, masing-masing dengan posisi stop sendiri.

Apa perbedaan bayangan kotak inset dari bayangan biasa? Bayangan kotak biasa berada di luar tepi elemen, seperti cahaya yang jatuh di belakangnya. Bayangan inset berada di dalam tepi, sehingga elemen tampak tertekan ke dalam, bukan terangkat.

Mengapa nilai sudut membulat muncul dalam urutan kiri atas, kanan atas, kanan bawah, kiri bawah? Urutan tersebut adalah urutan yang diharapkan properti CSS border-radius saat empat nilai terpisah ditulis, bergerak searah jarum jam mulai dari sudut kiri atas.

Apakah CSS yang dihasilkan berfungsi di setiap browser? Gradien, bayangan kotak, radius sudut, dan bayangan teks semuanya didukung dalam versi Chrome, Firefox, Safari, dan Edge saat ini. Tidak ada awalan vendor yang ditambahkan ke keluaran.

Referensi

1. MDN Web Docs: Menggunakan gradien CSS
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow