Pembuat CSS Clamp
Secara otomatis menghitung nilai fungsi clamp() fluida untuk desain responsif.
Grafik Nilai
Anda mungkin juga suka
Pratinjau Real-time
Tipografi Fluida
Semua orang dilahirkan merdeka dan mempunyai martabat dan hak-hak yang sama.
Anda mungkin juga suka
Kode yang Dihasilkan
Anda mungkin juga suka
Tentang alat ini
Pembuat CSS Clamp adalah alat yang secara otomatis menghasilkan kode untuk tipografi fluida dan spasi menggunakan fungsi clamp() CSS, dengan skala yang mulus sesuai dengan lebar viewport (layar).
Cukup masukkan ukuran elemen dan lebar viewport minimum dan maksimum, dan perhitungan clamp() yang optimal akan dibuat. Anda dapat secara intuitif memeriksa transisi dengan grafik dan pratinjau real-time, dan mengekspor kode dalam format CSS, variabel CSS, atau Tailwind CSS.
Semua perhitungan diproses di dalam browser Anda, memastikan tidak ada data yang dikirim ke server. Tidak diperlukan pendaftaran akun; gunakan secara gratis sekarang juga.
Cara menggunakan
Tetapkan parameter
Masukkan lebar dan ukuran viewport minimum dan maksimum. Anda juga dapat menerapkannya pada properti selain ukuran font (misal: margin, padding).
Periksa grafik & pratinjau
Konfirmasi visual transisi ukuran di berbagai lebar viewport melalui grafik. Gunakan area pratinjau untuk menyimulasikan perubahan viewport.
Salin kode
Pilih format yang Anda inginkan dari CSS, Variabel CSS, atau Tailwind, lalu klik tombol salin. Tempelkan langsung ke proyek Anda.
Glosarium
- clamp()
- Fungsi perbandingan CSS yang menetapkan batas bawah dan atas dalam format
clamp(min, preferred, max). Ini adalah cara ampuh untuk mencapai ukuran fluida yang mulus dalam desain responsif tanpa kueri media (media queries). - vw (viewport width)
- Unit CSS yang setara dengan 1% dari lebar viewport. Misalnya, jika lebar viewport adalah 1000px,
1vwadalah 10px. Ini sangat penting untuk menghitung nilai fluida yang terkait dengan lebar layar. - rem
- Unit CSS relatif berdasarkan ukuran font elemen root (biasanya
<html>). Unit ini lebih direkomendasikan daripada px untuk menghormati pengaturan browser pengguna dan meningkatkan aksesibilitas. - Tipografi Fluida
- Teknik desain di mana ukuran font berskala mulus berdasarkan lebar viewport, bukan berubah secara tiba-tiba pada titik henti (breakpoint) tertentu, memastikan keterbacaan yang optimal di semua ukuran layar.
- preferred value (nilai yang disukai)
- Nilai ideal yang ditentukan sebagai argumen kedua dalam fungsi
clamp(). Alat ini menghitungnya sebagai fungsi linier yang diformat sebagaiintercept(rem) + slope × 100(vw), memungkinkan transisi yang mulus dari ukuran minimum ke maksimum.
Detail Teknis
Tipografi fluida yang menggunakan fungsi clamp() CSS didasarkan pada matematika fungsi linier.
Mendapatkan Rumus
Menggunakan ukuran minimum (minSize), ukuran maksimum (maxSize), lebar viewport minimum (minVW), dan lebar viewport maksimum (maxVW), kemiringan (slope) dan intersep (intercept) dihitung sebagai berikut:
- slope = (maxSize - minSize) / (maxVW - minVW)
- intercept = minSize - slope × minVW
Menggunakan nilai ini, nilai yang disukai (preferred value) dihitung sebagai intercept(rem) + slope × 100(vw).
Perbedaan dengan Kueri Media (Media Queries)
Kueri @media tradisional menyebabkan perubahan yang tiba-tiba dan bertahap pada titik henti (breakpoint) tertentu. clamp() memberikan penskalaan yang mulus dan linier di seluruh lebar viewport mana pun. Ini secara drastis mengurangi jumlah kode yang diperlukan dan meningkatkan kemudahan pemeliharaan.
FAQ
- Q.Apakah data saya dikirim ke server?
- Tidak. Semua perhitungan diselesaikan sepenuhnya di dalam browser Anda, yang berarti tidak ada data yang dikirim ke luar. Sangat aman untuk digunakan.
- Q.Apakah ini berfungsi di Internet Explorer?
- Tidak. Internet Explorer tidak mendukung fungsi
clamp(). Harap gunakan browser modern seperti Chrome, Firefox, Safari, atau Edge. - Q.Bisakah saya menggunakan ini untuk properti selain font-size?
- Ya.
clamp()dapat digunakan untuk properti panjang CSS apa pun, termasukpadding,margin,gap, danwidth. Anda dapat memilih properti target untuk menghasilkan kode yang sesuai. - Q.Mengapa output menggunakan rem, bukan px?
- Penggunaan rem direkomendasikan untuk aksesibilitas. Jika pengguna meningkatkan ukuran font default mereka di pengaturan browser, nilai px akan mengabaikannya, sedangkan nilai rem akan berskala sesuai dengan pengaturan tersebut.
- Q.Bagaimana cara kerja matematika di baliknya?
- Ini menghitung "kemiringan" (slope) dan "intersep" (intercept) dari persamaan linier menggunakan lebar dan ukuran viewport minimum/maksimum yang disediakan untuk menghasilkan
nilai yang disukai(preferred value) menggunakan unit vw. Ini menghasilkan penskalaan proporsional antara batas yang ditentukan.
Kasus Penggunaan
📱Desain Web Responsif
Skalakan judul dan teks isi dari ponsel ke desktop secara mulus hanya dengan satu baris CSS, menghilangkan kebutuhan akan media queries yang rumit.
🧩Sistem Desain
Kelola seluruh skala tipografi Anda secara terpusat menggunakan clamp(). Ekspor sebagai variabel CSS untuk mengintegrasikannya segera sebagai token desain di seluruh proyek Anda.
📏Spasi Fluida
Terapkan clamp() pada padding, margin, dan gap grid untuk membuat tata letak indah yang berskala proporsional di seluruh layar.
🤝Kepatuhan Aksesibilitas
Dengan mengandalkan output berbasis rem, Anda menghormati pengaturan ukuran font default browser pengguna, menawarkan desain responsif yang ramah pengguna dan sesuai dengan pedoman WCAG.
Kirim Umpan Balik
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
Umpan balik sementara ditangguhkan
Server sedang sibuk atau perlindungan spam aktif. Silakan coba lagi nanti.