Hasilkan CSS secara visual
Empat hal CSS yang biasa ditulis semua orang dengan coba-coba, bedanya di sini coba-cobanya dilakukan lewat slider, bukan langsung di stylesheet Anda.
- Berjalan sepenuhnya di peramban Anda
- Berfungsi tanpa koneksi
- Tanpa unggah
- Tanpa pendaftaran
- Tanpa watermark
Memuat alat…
Cara kerjanya
- Pilih panelnya: gradien, bayangan, sudut, atau ukuran fluid.
- Geser sampai pratinjaunya terlihat pas.
- Salin baris CSS-nya.
Kenapa tidak ada yang diunggah
Semua yang dikerjakan halaman ini dijalankan oleh kode di dalam tab peramban Anda, memakai mesin yang sama dengan yang menampilkan halaman web. File dibaca dari disk ke memori tab Anda, diolah di sana, lalu ditulis kembali sebagai unduhan. File itu tidak pernah dikirim ke mana pun — tidak ke kami, tidak ke pihak ketiga.
Buktikan sendiri
- Buka alat pengembang peramban Anda (F12) lalu pilih tab “Network” (Jaringan).
- Muat file Anda dan jalankan alatnya.
- Permintaan yang akan Anda lihat hanya mengambil kode alat itu sendiri — dan, pada beberapa alat berat, mesin sumber terbukanya dari CDN publik — ditambah satu ping kunjungan halaman yang kecil ke loreatec.jp (alamat dan judul halaman, tidak lebih). Tidak satu pun membawa file Anda.
Pertanyaan yang sering diajukan
Apa sebenarnya yang dihitung panel clamp()?
Kemiringan liniernya. Anda menentukan “16px pada viewport 360px, 32px pada 1280px” dan alat ini menghasilkan clamp(16px, 8.3px + 2.17vw, 32px) — nilainya berskala mulus di antara dua lebar itu dan berhenti di kedua ujungnya. Rumusnya sederhana tapi tidak ada yang hafal; itulah seluruh alasan alat ini ada.
Kenapa preset bayangannya terlihat lebih bagus daripada bayangan buatan tangan saya?
Karena bayangan yang realistis punya opasitas lebih rendah, blur lebih besar, dan spread sedikit negatif dibanding yang biasanya terasa intuitif. Preset-nya mengodekan proporsi itu; mulai dari salah satu lalu sesuaikan, alih-alih mulai dari 0 0 5px black.
Bisakah saya membuat bentuk sudut yang tidak beraturan, seperti organik?
Centang opsi per-sudut lalu atur keempat radiusnya secara terpisah — sudut berlawanan yang besar menghasilkan bentuk seperti daun/blob. Untuk blob yang benar-benar organik Anda perlu sintaks radius dua nilai, yang berada di luar cakupan panel ini; yang ada di sini mencakup bentuk-bentuk yang memang biasa dipakai orang.
Apakah ada yang dikirim ke suatu tempat?
Tidak. Pratinjaunya adalah sebuah div dengan gaya Anda diterapkan padanya — hal paling lokal yang bisa dilakukan sebuah alat.