Pengaturan Gaya

Warna Teks

Poin penting: Mengatur warna teks dan transparansi. Ini adalah item terpenting yang berhubungan langsung dengan memastikan kontras terhadap latar belakang.

Dampak pengaturan ini: Jika keterbacaan kurang, tombol akan sulit diklik meskipun desainnya bagus.

Tips penyesuaian: Dari perspektif WCAG, perhatikan rasio kontras, terutama untuk teks kecil pastikan perbedaan kecerahan yang cukup kuat.

Item Pengaturan

• Warna Teks: Mengatur warna teks dan mengoptimalkan kontras terhadap latar belakang.
• Alpha (transparansi): Menyesuaikan transparansi warna teks dan mengontrol intensitas kehadiran teks. Nilainya berkisar dari 0 (transparan penuh) hingga 1 (tidak transparan).
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk menyesuaikan perbedaan latar belakang pada setiap perangkat.

Warna teks saat hover juga dapat diatur secara terpisah. Perubahan warna saat hover akan bertransisi dengan halus mengikuti Duration pada transition style. WCAG 2.1 merekomendasikan rasio kontras minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar.

Bayangan Teks

Poin penting: Mengatur bayangan teks. Berguna untuk memperkuat keterbacaan pada gambar latar belakang.

Dampak pengaturan ini: Intensitas bayangan mengubah keseimbangan antara visibilitas dan kesan dekoratif.

Tips penyesuaian: Mulai dengan Blur kecil dan Alpha rendah, lalu tambahkan secara bertahap sesuai kebutuhan agar lebih aman.

Item Pengaturan

• Bayangan Teks (ON/MATI): Mengaktifkan/menonaktifkan bayangan teks dan menentukan apakah bantuan keterbacaan digunakan.
• Warna: Mengatur warna dan menyesuaikan visibilitas elemen serta keselarasan desain.
• Blur + satuan: Mengatur jumlah blur dan menyesuaikan penyebaran bayangan atau efek cahaya.
• Horizontal + satuan: Mengatur jarak pergeseran horizontal dan menyesuaikan arah bayangan.
• Vertical + satuan: Mengatur jarak pergeseran vertikal dan menciptakan kesan kedalaman yang alami.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Teks shadow juga dapat diatur secara terpisah untuk status hover. Saat menempatkan teks di atas gambar latar belakang, pilih warna bayangan dengan kecerahan berlawanan dari gambar (putih untuk latar gelap, gelap untuk latar terang) untuk meningkatkan keterbacaan.

Perbatasan

Poin penting: Mengatur warna, ketebalan, dan jenis garis bingkai. Memperjelas kontur tombol agar dikenali sebagai elemen yang dapat diklik.

Dampak pengaturan ini: Bahkan pada desain dengan warna latar belakang tipis, bingkai memberikan efek batas yang jelas.

Tips penyesuaian: Bingkai yang terlalu tebal melemahkan kehadiran teks, jadi mulai penyesuaian dari sekitar 1px agar lebih mudah dikelola.

Item Pengaturan

• Perbatasan (ON/MATI): Mengaktifkan/menonaktifkan bingkai dan menentukan apakah kontur ditekankan.
• Warna + Alpha: Mengatur warna dan transparansi secara bersamaan untuk menyesuaikan visibilitas dan intensitas.
• Lebar: Mengatur lebar dan menyesuaikan luas area tampilan.
• Style (none / solid / dashed / dotted): Memilih jenis garis dan menyesuaikan nuansa dekoratif.
• Box Sizing (border-box / content-box): Mengalihkan metode perhitungan ukuran untuk mencegah masalah layout.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Jika border-box dipilih, ketebalan bingkai termasuk dalam lebar dan tinggi elemen, sehingga layout tidak berubah saat bingkai ditambahkan. Dengan content-box, elemen secara keseluruhan akan membesar sesuai ketebalan bingkai. Perbatasan saat hover juga dapat diatur secara terpisah.

Radius Tepi

Poin penting: Mengatur kelengkungan sudut elemen. Dapat menyesuaikan nuansa merek (kaku/lembut) pada tingkat kesan.

Dampak pengaturan ini: Nilai border radius mengubah tampilan berdasarkan rasio terhadap ukuran tombol.

Tips penyesuaian: Sekitar 20-35% dari tinggi menjadi acuan yang baik untuk keseimbangan yang tidak terlalu bulat dan tidak terlalu kaku.

Item Pengaturan

• Gunakan Pengaturan Individual: Memungkinkan penyesuaian detail per sisi (atas, kanan, bawah, kiri), bukan nilai seragam.
• Seragam: Radius Tepi + satuan: Menerapkan border radius yang sama ke 4 sudut untuk menciptakan keseragaman dengan cepat.
• Individual: Radius Tepi Kiri Atas / Kanan Atas / Kanan Bawah / Kiri Bawah + satuan: Mengubah kelengkungan tiap sudut untuk menciptakan aksen bentuk yang disengaja.
• Satuan: Dapat dipilih dari px / % / em / rem.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Mengatur 50% akan menghasilkan lingkaran sempurna (jika elemen berbentuk persegi) atau bentuk elips. Perbatasan radius saat hover juga dapat diatur secara terpisah dan dapat digunakan untuk efek perubahan bentuk saat hover.

Bayangan Dalam

Poin penting: Mengatur bayangan bagian dalam. Pengaturan untuk menciptakan efek tekan atau kedalaman.

Dampak pengaturan ini: Berguna ketika ingin menambahkan sedikit kedalaman pada desain flat.

Tips penyesuaian: Jika terlalu kuat akan terkesan UI lawas, jadi jadikan Blur dan Alpha yang lemah sebagai dasar.

Item Pengaturan

• Bayangan Dalam (ON/MATI): Mengaktifkan/menonaktifkan bayangan dalam dan menyesuaikan efek tekan.
• Warna: Mengatur warna dan menyesuaikan visibilitas elemen serta keselarasan desain.
• Blur: Menyesuaikan jumlah blur dan mengontrol intensitas serta penyebaran bayangan.
• Horizontal: Menyesuaikan jumlah pergeseran horizontal dan menciptakan arah bayangan atau elemen.
• Vertical: Menyesuaikan jumlah pergeseran vertikal dan menciptakan kesan kedalaman yang alami.
• Spread: Mengatur jumlah perluasan bayangan dan menyesuaikan penyebaran kontur.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Inner shadow dihasilkan sebagai CSS box-shadow: inset. Inner shadow saat hover juga dapat diatur secara terpisah dan cocok untuk efek penekanan. Inner shadow digambar sebagai pseudo-element ::after di bagian dalam tombol, sehingga di-clip dengan bentuk yang benar sesuai pengaturan border radius.

Shadow

Poin penting: Mengatur bayangan luar. Pengaturan untuk mengangkat tombol dari latar belakang dan memperkuat panduan visual.

Dampak pengaturan ini: Arah dan jarak bayangan menentukan kesan kedalaman depan-belakang elemen.

Tips penyesuaian: Bayangan terlihat lebih kuat di mobile, jadi disarankan menguranginya satu tingkat di tab SP (mobile).

Item Pengaturan

• Shadow (ON/MATI): Mengaktifkan/menonaktifkan bayangan luar dan menyesuaikan efek mengambang.
• Warna + Alpha: Mengatur warna dan transparansi secara bersamaan untuk menyesuaikan visibilitas dan intensitas.
• Blur: Menyesuaikan jumlah blur dan mengontrol intensitas serta penyebaran bayangan.
• Horizontal: Menyesuaikan jumlah pergeseran horizontal dan menciptakan arah bayangan atau elemen.
• Vertical: Menyesuaikan jumlah pergeseran vertikal dan menciptakan kesan kedalaman yang alami.
• Spread: Mengatur jumlah perluasan bayangan dan menyesuaikan penyebaran kontur.
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Opasitas

Poin penting: Mengatur opasitas keseluruhan elemen dan blend mode. Dapat menyesuaikan cara tumpang tindih dengan latar belakang secara desain.

Dampak pengaturan ini: Warna yang sama pun dapat memberikan kesan yang sangat berbeda dengan Opasitas dan Blend.

Tips penyesuaian: Jika keterbacaan menurun, koreksi dulu warna teks dan kontras latar belakang sebelum menyesuaikan Opasitas.

Item Pengaturan

• Opasitas: Mengatur opasitas dan menyesuaikan tampilan keseluruhan elemen.
• Mode Campuran: Mengatur blend mode dan menyesuaikan cara tumpang tindih dengan latar belakang. Nilai umum: normal (normal) / multiply (perkalian) / screen (layar) / overlay (hamparan).
• Responsif: Mengaktifkan pengaturan individual per perangkat untuk mencegah masalah tampilan.

Menurunkan Opasitas akan memengaruhi semua elemen anak (teks, ikon, dll.). Jika ingin membuat latar belakang transparan sambil menjaga keterbacaan teks, lebih efektif menyesuaikan Alpha pada pengaturan latar belakang daripada Opasitas tombol itu sendiri. Opasitas saat hover juga dapat diatur secara terpisah.

Batasan Mode Campuran: Jika Mode Campuran diatur pada beberapa layer (latar belakang, gambar mini, pita) secara terpisah, warna yang dihasilkan mungkin tidak sesuai harapan tergantung pada urutan komposisi browser. Saat menggunakan Mode Campuran, disarankan untuk mengatur dan memeriksa satu per satu.

Transisi

Poin penting: Mengatur kecepatan perubahan dari status normal ke status hover. Item yang menentukan "kenyamanan" saat berinteraksi.

Dampak pengaturan ini: Terlalu cepat membuat perubahan tidak terasa, terlalu lambat terasa tidak responsif.

Tips penyesuaian: Mulai dengan Duration 200-350ms sebagai acuan, lalu tambahkan delay atau custom easing hanya pada bagian yang membutuhkan efek khusus.

Item Pengaturan

• Durasi (ms): Mengatur durasi perubahan dan menyesuaikan kecepatan respons.
• Tunda (ms): Mengatur waktu tunggu sebelum perubahan dimulai dan menyesuaikan timing efek.
• Pelemahan: Mengatur kurva perubahan kecepatan dan menyesuaikan kesan gerakan. Pilihan: ease / ease-in / ease-out / ease-in-out / linear / Kustom.
• Nilai Kustom: Menentukan nilai custom easing (format CSS cubic-bezier) dan menyesuaikan kecepatan perubahan hover secara detail.
• Reset: Mengembalikan pengaturan bagian ini ke kondisi awal.
• Peringatan saat animasi teks aktif: Mengonfirmasi catatan penting saat menggunakan animasi teks bersamaan untuk menghindari konflik.

Transisi ini diterapkan pada transisi hover dari setiap properti dalam panel pengaturan style seperti Warna Teks, Perbatasan, Radius Tepi, Shadow, Bayangan Dalam, Opasitas, dll. Transisi untuk latar belakang dan ikon dapat diatur secara terpisah di masing-masing panel. Saat menggunakan animasi teks bersamaan, transition dapat saling mengganggu, jadi perhatikan penyesuaian Duration dan Delay.

Batasan properti target transition: Secara internal, hanya color, text-shadow, border, border-radius, box-shadow, opacity yang menjadi target transition. background (warna latar belakang/gradien) dan transform (transformasi) bukan target transition ini dan dikontrol oleh pengaturan transition khusus masing-masing. Perubahan width/height juga tidak bertransisi dengan transition ini.