Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Jalur tugas / dari masukan ke hasil

Atur ukuran lintasan

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Switch CSS, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara mendesain sakelar CSS murni

  1. 01

    Atur ukuran lintasan

    Atur Lebar lintasan antara 44 dan 128 px dan Tinggi lintasan antara 24 dan 64 px. Lebarnya harus melebihi tinggi setidaknya 8 px agar kenop punya ruang untuk bergerak. Bawaan 64 × 34 px mencerminkan proporsi kebanyakan sakelar seluler.

  2. 02

    Pasang kenop

    Pilih Ukuran kenop dari 16 hingga 56 px. Kenop harus muat di dalam lintasan — maksimal tinggi lintasan dikurangi 4 px — atau status berubah menjadi PERIKSA NILAI dengan aturan persis yang gagal.

  3. 03

    Warnai kedua status

    Pilih Lintasan nonaktif untuk posisi mati dan Lintasan aktif untuk posisi hidup. Kenopnya sendiri tetap putih dengan bayangan lembut kecil, jadi kedua warna lintasan hanya perlu kontras dengan putih.

  4. 04

    Pratinjau transisinya

    Alihkan Tampilkan status aktif untuk melihat kenop meluncur dan lintasan berubah warna dengan timing ease 180 ms yang nyata. Padding di sekitar kenop dihitung sebagai setengah sisa tinggi lintasan, sehingga kepasannya tetap rata di ukuran berapa pun yang Anda pilih.

  5. 05

    Salin atau unduh CSS

    Tekan Salin CSS atau Unduh .css untuk menyimpan toolars-switch.css. Kenop putih meluncur sejauh jarak yang dihitung di antara kedua status, dan ekspornya menyertakan penanganan fokus dan reduced-motion sejak awal. Panel keluaran menampilkan jumlah byte langsung, sehingga Anda bisa melihat betapa ringkas komponennya.

  6. 06

    Rakit markupnya

    Letakkan input kotak centang yang diikuti elemen .switch-track di dalam pembungkus .switch, persis dalam urutan itu — selektor sibling bergantung padanya. Input menyusut menjadi kotak tak terlihat 1 px tetapi tetap bisa difokuskan, dan fokus menggambar garis luar 3 px dalam warna Lintasan aktif Anda.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Switch CSS menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Apa yang sebenarnya dilakukan Generator Switch CSS

Toggle mode gelap, sakelar notifikasi, flag fitur di panel pengaturan — komponen yang sama muncul di mana-mana, dan mengutak-atik geometrinya di inspektur browser itu lambat. Di sini lintasan, kenop, dan jarak gerak ditetapkan secara visual dalam satu kali jalan; ekspornya mempertahankan input asli untuk dukungan keyboard dan teknologi bantu; dan eksperimen tidak pernah meninggalkan tab. Hasilnya langsung masuk ke sistem desain tanpa satu baris JavaScript pun. Kedua status bisa ditinjau berdampingan sebelum apa pun disalin.

Pertanyaan umum

Markup apa yang diharapkan oleh ekspor ini?
Sebuah pembungkus .switch berisi input kotak centang yang diikuti elemen .switch-track. Input disembunyikan secara visual tetapi tetap bisa difokuskan dan dioperasikan, sehingga sakelar jadinya berperilaku seperti kontrol native yang dibungkusnya.
Aturan geometri apa saja yang ditegakkan?
Dua: lebar lintasan harus setidaknya 8 px lebih besar daripada tingginya, dan kenop harus muat di dalam lintasan — maksimal tinggi dikurangi 4 px. Melanggar salah satunya menampilkan PERIKSA NILAI, dan salin serta unduh tetap nonaktif sampai nilainya lolos.
Seberapa jauh kenop bergerak?
Stylesheet menghitungnya dari angka Anda: lebar lintasan dikurangi ukuran kenop dikurangi padding di kedua ujung, sehingga kenop mendarat rapat di tepi lintasan pada posisi mati maupun hidup.
Apakah ekspornya menangani pengurangan gerakan?
Ya. Blok prefers-reduced-motion menghapus kedua transisi 180 ms — perubahan warna lintasan dan luncuran kenop — sehingga perubahan status tetap terjadi tetapi langsung tiba, tanpa gerakan sama sekali.
Detail visual apa yang sudah bawaan?
Lintasan selalu berbentuk pil penuh, karena radius sudutnya setengah tinggi lintasan, dan kenop putih membawa bayangan jatuh kecil yang tetap untuk kesan mengangkat. Semua yang lain — warna, geometri, jarak gerak — berasal langsung dari nilai kontrol Anda.
Apakah desain saya diunggah?
Tidak. Ruang kerja berjalan sepenuhnya di tab browser saat ini tanpa akun, dan tidak ada nilai yang disimpan, dicatat, atau dikirim ke mana pun. Setelah halaman termuat, generator juga tetap bekerja tanpa koneksi jaringan. Tekan Atur ulang untuk mengembalikan bawaan.

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat

Generator Pola Latar CSS

CSS Background Pattern Generator

Susun pola latar titik, kisi, atau diagonal dari gradien CSS murni tanpa berkas gambar, dengan ukuran ubin, lebar tanda, dan dua warna yang dapat disetel.

Buat