Loading time...
Google AdSense Leaderboard (728x90) Paste AdSense responsive code in this widget
Latest
LATEST | Memuat artikel terbaru...
Home » Bikin Fitur Dark Mode Otomatis, Efek Pseudo-Elements & Font Responsif Tanpa Media Query
12.47

Bikin Fitur Dark Mode Otomatis, Efek Pseudo-Elements & Font Responsif Tanpa Media Query

Assalamualaikum Wr. Wb.

Tutorial Web Design Lanjutan Part 9: Bikin Fitur Dark Mode Otomatis, Efek Pseudo-Elements & Font Responsif Tanpa Media Query | Trik CSS Tingkat Mahir | Pernah merasa silau saat membaca artikel web di ruangan gelap? Atau merasa lelah karena harus menulis puluhan baris @media (max-width: ...) hanya untuk mengatur ukuran judul artikel agar tidak terpotong di layar HP? Di tutorial tingkat lanjut kali ini, kita akan mempelajari 3 trik sakti CSS modern: membuat Sistem Dark Mode yang sinkron dengan setelan sistem pengguna, membuat ornamen UI interaktif menggunakan Pseudo-elements (::before & ::after), serta rumus tipografi cair menggunakan fungsi clamp() yang dijamin work 100%.

1. Sistem Dark Mode Otomatis dengan prefers-color-scheme & Data Attribute

Dulu kita butuh script jQuery yang rumit untuk mengubah tema web. Sekarang, browser modern sudah memiliki fitur pendeteksi tema bawaan laptop/smartphone pengunjung:

  • @media (prefers-color-scheme: dark) : Otomatis mengaktifkan warna gelap jika HP pengguna disetel ke Dark Mode.
  • [data-theme="dark"] : Memungkinkan pengunjung mengganti mode gelap/terang secara manual melalui tombol sakelar.

Gambar 1: Perbandingan tema terang default dan mode gelap hemat baterai menggunakan CSS Variables

2. Trik Pseudo-Elements (::before & ::after) untuk Tooltip Murni CSS

Pseudo-elements memungkinkan kita menambahkan elemen dekoratif (seperti segitiga panah, badge, atau tooltip petunjuk) langsung dari stylesheet tanpa mengotori file HTML dengan tag <span> tambahan:

  • content: "" : Syarat mutlak agar elemen semu dapat dirender di layar.
  • position: absolute : Mengunci posisi ornamen tepat di atas atau di samping tombol induk (yang disetel position: relative).

Gambar 2: Kotak petunjuk tooltip interaktif yang muncul otomatis saat kursor diarahkan (hover)

3. Rumus Tipografi Cair (Fluid Typography) dengan clamp()

Daripada menulis breakpoint media query berulang kali, fungsi clamp(MIN, VAL, MAX) mengunci ukuran font agar membesar dan mengecil secara elastis mengikuti lebar layar:

font-size: clamp(1.25rem, 4vw + 0.5rem, 2.75rem);
  • Batas Minimal (1.25rem): Teks tidak akan pernah mengecil melewati 20px saat dibuka di layar HP sekecil apa pun.
  • Skala Fleksibel (4vw + 0.5rem): Ukuran teks menyesuaikan persentase lebar layar secara dinamis dan mulus.
  • Batas Maksimal (2.75rem): Teks tidak akan membesar secara berlebihan saat dibuka di monitor monitor ultra-wide.

Gambar 3: Skalabilitas teks judul otomatis antara tampilan Mobile (375px) dan Desktop (1440px)

4. Full Source Code Praktik (HTML, Modern CSS & Mini Switcher)

Berikut adalah source code lengkap yang bisa langsung anda uji coba di browser favorit anda:

<!DOCTYPE html>
<html lang="id" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode & Fluid CSS Mastery</title>
    <style>
        /* 1. Theme Variables: Light Mode (Default) */
        :root {
            --bg-body: #f8fafc;
            --bg-card: #ffffff;
            --text-title: #0f172a;
            --text-body: #475569;
            --accent: #0284c7;
            --border: #e2e8f0;
        }

        /* 2. Theme Variables: Dark Mode Override */
        [data-theme="dark"] {
            --bg-body: #0f172a;
            --bg-card: #1e293b;
            --text-title: #f8fafc;
            --text-body: #94a3b8;
            --accent: #38bdf8;
            --border: #334155;
        }

        body {
            background-color: var(--bg-body);
            color: var(--text-body);
            font-family: 'Segoe UI', system-ui, sans-serif;
            margin: 0;
            padding: 30px 20px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        /* 3. Fluid Heading dengan clamp() */
        h1.fluid-title {
            font-size: clamp(1.5rem, 3.5vw + 0.5rem, 2.6rem);
            color: var(--text-title);
            line-height: 1.2;
            margin-bottom: 12px;
        }

        .card {
            background-color: var(--bg-card);
            border: 1px solid var(--border);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            margin-top: 20px;
        }

        /* 4. Pure CSS Tooltip menggunakan ::before & ::after */
        .tooltip-btn {
            position: relative;
            background: var(--accent);
            color: #ffffff;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
        }

        .tooltip-btn::after {
            content: "Pengaturan tema tersimpan!";
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            background: #020617;
            color: #38bdf8;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        .tooltip-btn:hover::after {
            opacity: 1;
            transform: translateX(-50%) translateY(-4px);
        }

        .toggle-btn {
            background: transparent;
            border: 1px solid var(--accent);
            color: var(--accent);
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
        }
    </style>
</head>
<body>

    <div class="container">
        <button class="toggle-btn" onclick="gantiTema()">🌓 Ganti Mode Gelap / Terang</button>
        
        <div class="card">
            <h1 class="fluid-title">Desain Web Dinamis & Ramah Mata</h1>
            <p>Halaman ini menerapkan CSS Variables untuk Dark Mode, tipografi cair clamp(), serta tooltip murni CSS tanpa library eksternal.</p>
            
            <button class="tooltip-btn">Arahkan Kursor ke Sini</button>
        </div>
    </div>

    <script>
        function gantiTema() {
            const html = document.documentElement;
            const temaSekarang = html.getAttribute('data-theme');
            const temaBaru = temaSekarang === 'dark' ? 'light' : 'dark';
            html.setAttribute('data-theme', temaBaru);
        }
    </script>

</body>
</html>

Itulah tutorial tingkat lanjut mengenai implementasi Dark Mode, ornamen tooltip murni CSS dengan pseudo-elements, dan tipografi responsif clamp(). Saya sendiri juga rutin menerapkan formula ini pada projek web agar tampilannya tetap nyaman dibaca di segala kondisi pencahayaan dan ukuran layar.

Sekian tutorial kali ini, silahkan share artikel ini jika anda rasa bermanfaat untuk teman atau sahabat anda.

Semoga Bermanfaat ^_^

Terima Kasih.

Wassalamualaikum Wr. Wb.

Sumber gambar: Koleksi Pribadi / Screenshot Praktik CSS

0 Komentar

Posting Komentar

Pengunjung yang baik selalu meninggalkan komentar

Silahkan berikan komentar/kritik/saran tentang artikel ini untuk kemajuan blog ini,
Mohon untuk tidak berkomentar berbau SARA, Pornografi, Spam, dan kata-kata kasar agar tidak terjadi kesalah pahaman disini.

Terima Kasih