Membuat Popup Box Keren Hanya dengan CSS: Tutorial Lengkap

Selamat datang kembali, pengunjung setia situs samuelpasaribu.com! Pada kesempatan kali ini, kami akan membahas cara membuat popup box yang menarik hanya dengan menggunakan CSS. Tutorial ini akan memandu Anda melalui langkah-langkah lengkap untuk menciptakan popup/modal windows yang responsif dan interaktif, tanpa memerlukan bahasa pemrograman JavaScript.

Mengapa Popup Box Penting dalam Desain Web?

Popup box adalah elemen desain web yang memungkinkan Anda menyoroti informasi penting, meminta interaksi pengguna, atau menampilkan konten tambahan tanpa harus membuka halaman baru. Mereka memainkan peran kunci dalam meningkatkan pengalaman pengguna, memberikan pesan penting, atau menunjukkan promosi.

Kenapa Harus Menggunakan CSS?

Menggunakan hanya CSS untuk membuat popup box memiliki beberapa keuntungan:

• Kinerja Lebih Cepat: Tanpa perlu menunggu pemuatan skrip JavaScript, popup muncul dengan cepat.
• SEO-Friendly: Konten dalam popup dapat diindeks oleh mesin pencari, meningkatkan SEO situs Anda.
• Responsif: Dengan menggunakan teknik CSS yang tepat, popup dapat dengan mudah disesuaikan untuk tampilan perangkat mobile dan desktop.

Langkah-Langkah Membuat Popup Box dengan CSS:

Berikut ini Langkah-Langkah Membuat Popup Box dengan CSS:

1. Pemahaman Dasar CSS

Mulailah dengan memahami dasar-dasar CSS, termasuk selektor, properti, dan nilai. Pastikan Anda memahami konsep dasar seperti padding, border, dan position.

2. Struktur HTML Dasar

Gunakan struktur HTML yang sederhana untuk popup box, dengan tombol sebagai pemicu popup dan elemen overlay sebagai latar belakang gelap ketika popup muncul.

    <div class="box">
        <a class="button" href="#popup1">Let me Pop up</a>
    </div>

    <div id="popup1" class="overlay">
        <div class="popup">
            <h2>Here I Am</h2>
            <a class="close" href="#">&times;</a>
            <div class="content">
                Thank you for popping me out of that button, but now I'm done so you can close this window.
            </div>
        </div>
    </div>

Disini, saya akan menjelaskan bagian kode HTML yang digunakan untuk membuat Popup Box Keren:

1. <div class="box">: Ini adalah elemen <div> yang memiliki kelas CSS bernama "box." Elemen ini digunakan untuk mengelilingi sebuah tombol yang nantinya akan digunakan untuk memicu munculnya popup box. Tombol ini memiliki teks "Let me Pop up".
2. <a class="button" href="#popup1">Let me Pop up</a>: Ini adalah tautan <a> yang memiliki kelas CSS "button." Tautan ini memiliki atribut href yang mengarah ke #popup1. Saat tautan ini diklik, itu akan mengarahkan pengguna ke elemen dengan id="popup1", yang akan memunculkan popup box.
3. <div id="popup1" class="overlay">: Ini adalah elemen <div> yang memiliki atribut id dengan nilai "popup1" dan kelas "overlay." Elemen ini bertindak sebagai latar belakang gelap yang menutupi halaman saat popup muncul. Dengan menerapkan kelas "overlay," elemen ini dibuat terlihat gelap dan transparan sehingga fokus pengguna tertuju pada popup box.
4. <div class="popup">: Ini adalah elemen <div> lain yang memiliki kelas "popup". Elemen ini adalah tempat sebenarnya di mana isi dari popup box ditempatkan. Ini memiliki berbagai elemen turunan:

• <h2>Here I Am</h2>: Ini adalah judul yang akan ditampilkan di dalam popup box. Dalam contoh ini, judulnya adalah "Here I Am".
• <a class="close" href="#">×</a>: Ini adalah tautan yang bertindak sebagai tombol penutup untuk popup box. Tautan ini memiliki teks "X" yang merupakan simbol "X" yang digunakan secara umum untuk menutup jendela atau popup.
• <div class="content">: Ini adalah elemen di mana konten tambahan yang ingin ditampilkan dalam popup box ditempatkan. Dalam contoh ini, itu berisi teks "Thank you for popping me out of that button, but now I'm done so you can close this window".

Jadi, kode ini bekerja dengan cara berikut: Saat tombol "Let me Pop up" diklik, tautan tersebut mengarahkan pengguna ke elemen dengan id="popup1" yang memiliki kelas "overlay." Ini membuat latar belakang gelap muncul, dan elemen dengan kelas "popup" muncul di tengahnya, menampilkan konten popup, termasuk judul dan teks pesan. Pengguna dapat menutup popup box dengan mengklik tombol "X".

3. Gaya CSS Kreatif

Terapkan gaya CSS kreatif untuk membuat popup box terlihat menarik. Anda bisa menyesuaikan warna, ukuran, dan animasi sesuai preferensi desain Anda.

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: rgba(255, 255, 255, 0.8);
            background-size: cover;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        h1 {
            text-align: center;
            font-family: Tahoma, Arial, sans-serif;
            color: #000;
            margin: 80px 0;
        }

        .box {
            width: 40%;
            background: rgba(255, 255, 255, 0.8);
            padding: 35px;
            border: 2px solid silver;
            border-radius: 20px;
            text-align: center;
            margin-bottom: 20px;
        }

        .button {
            font-size: 1em;
            padding: 10px 20px;
            color: #fff;
            background-color: #0000FF;
            border: 2px solid #0000FF;
            border-radius: 20px;
            text-decoration: none;
            cursor: pointer;
            transition: background 0.3s ease-out, color 0.3s ease-out;
        }

        .button:hover {
            background: #fff;
            color: #0000FF;
        }

        .overlay {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.5s;
        }

        .overlay:target {
            visibility: visible;
            opacity: 1;
        }

        .popup {
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            width: 70%;
            text-align: center;
            position: relative;
        }

        .popup h2 {
            margin-top: 0;
            color: #333;
            font-family: Tahoma, Arial, sans-serif;
        }

        .popup .close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 30px;
            font-weight: bold;
            text-decoration: none;
            color: tomato;
            transition: color 0.3s;
        }

        .popup .close:hover {
            color: #CC0000;
        }

        .popup .content {
            max-height: 50vh;
            overflow: auto;
        }

        @media screen and (max-width: 700px) {
            .box {
                width: 70%;
            }

            .popup {
                width: 70%;
            }
        }

Berikut ini penjelasan dari bagian-bagian kode CSS yang digunakan:

1. body: Ini mendefinisikan gaya untuk elemen <body> HTML. Pengaturan ini mengatur beberapa properti dasar, seperti font, margin, padding, dan latar belakang. Elemen <body> ini diatur sebagai flex container untuk mengatur tata letak elemen-elemen anak dengan display: flex. Semua elemen diatur di tengah halaman menggunakan align-items: center dan justify-content: center.
2. h1: Ini mendefinisikan gaya untuk elemen <h1> HTML. Judul ini diberi properti text-align: center untuk mengatur rata tengah, warna teksnya diatur menjadi hitam (#000), dan memiliki margin atas dan bawah sebesar 80px.
3. .box: Ini adalah kelas untuk kotak yang mengelilingi tombol "Let me Pop up". Kotak ini memiliki lebar 40%, latar belakang putih semi-transparan (rgba(255, 255, 255, 0.8)), padding 35px, border 2px solid silver, sudut sudut (border radius) sebesar 20px, dan teks diatur rata tengah.
4. .button: Ini adalah kelas untuk tombol "Let me Pop up". Tombol ini memiliki font size 1em, padding 10px 20px, warna teks putih (#fff), latar belakang biru (#0000FF), border biru, sudut sudut 20px, dan transisi warna latar belakang dan teks selama 0.3 detik saat di-hover.
5. .overlay: Ini adalah kelas untuk latar belakang gelap ketika popup muncul. Latar belakangnya hitam semi-transparan (rgba(0, 0, 0, 0.7)) dan menggunakan position: fixed agar menutupi seluruh layar. Ketika elemen ini menjadi target (dengan menggunakan hash #popup1), ia menjadi terlihat (visibility: visible) dan opasitasnya menjadi 1.
6. .popup: Ini adalah kelas untuk konten yang ditampilkan dalam popup box. Kontennya memiliki latar belakang putih, padding 20px, sudut sudut 5px, lebar 70%, dan diatur rata tengah.
7. .popup h2: Ini mengganti gaya untuk judul dalam popup. Warna teksnya adalah abu-abu tua (#333) dan diatur rata tengah.
8. .popup .close: Ini adalah gaya untuk tombol penutup pada popup. Warna teksnya adalah merah muda (tomato) dan bertransisi menjadi merah tua (#CC0000) saat di-hover.
9. .popup .content: Ini adalah kelas untuk konten dalam popup yang mungkin berukuran lebih tinggi dari layar. Konten ini memiliki tinggi maksimum 50% dari tinggi viewport dan menggunakan overflow untuk memungkinkan pengguna menggulir jika kontennya terlalu panjang.
10. Media Query (.box dan .popup pada layar dengan lebar maksimum 700px): Pada layar dengan lebar maksimum 700px, lebar .box dan .popup diatur menjadi 70% untuk memastikan tampilan yang responsif di perangkat seluler dan layar kecil.

Semua bagian kode HTML dan CSS yang Anda berikan terlihat baik dan sesuai dengan tujuan Anda untuk membuat popup box menggunakan CSS saja. Dengan struktur dan gaya yang Anda terapkan, pengunjung situs Anda akan dapat melihat contoh popup box dengan jelas dan dapat memahaminya dengan mudah. Jika Anda memiliki pertanyaan lebih lanjut atau membutuhkan bantuan tambahan, jangan ragu untuk bertanya!

Baca juga : Meningkatkan Pengalaman Pengguna dengan Dialog Konfirmasi Kustom

Demo: Lihat Langsung!

Anda bisa melihat demo langsung dari kode yang telah kami buat. Klik tombol "Demo" di bawah ini untuk melihat popup box keren yang dibuat hanya dengan menggunakan CSS!

Kesimpulan

Dengan mengikuti langkah-langkah di atas dan memahami konsep dasar CSS, Anda sekarang memiliki keterampilan untuk membuat popup box menarik hanya dengan menggunakan CSS. Gunakan kreativitas Anda untuk membuat pengalaman pengguna di situs web Anda lebih interaktif dan memikat!

Jangan ragu untuk bereksperimen dengan gaya dan desain. Jika Anda memiliki pertanyaan atau membutuhkan bantuan lebih lanjut, jangan ragu untuk meninggalkan komentar di bawah. Semoga tutorial ini bermanfaat bagi pengembangan situs web Anda. Selamat berkarya!