Menggunakan efek blur pada background color di website dapat memberikan tampilan yang modern dan elegan. Efek ini tidak hanya menarik secara estetika, tetapi juga membantu fokus perhatian pengguna pada konten utama. Berikut ini adalah langkah-langkah untuk membuat background color blur di website menggunakan CSS.
Cara Membuat Background Color Blur di Website
1. Menyiapkan Struktur HTML
Pertama, kita perlu menyiapkan struktur HTML dasar untuk halaman kita. Buat file HTML baru atau gunakan file yang sudah ada, lalu tambahkan elemen div yang akan kita beri efek blur.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background Blur Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="blur-background"> <h1>Selamat Datang di Website Kami</h1> <p>Ini adalah contoh teks yang berada di atas background blur.</p> </div> </body> </html>
2. Menambahkan CSS untuk Background Blur
Selanjutnya, kita akan menambahkan CSS untuk membuat efek blur pada background color. Buat file CSS baru bernama `styles.css` atau tambahkan kode berikut ke file CSS yang sudah ada.
/* Mengatur ukuran dan padding body */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
/* Mengatur gaya elemen blur-background */
.blur-background {
position: relative;
width: 80%;
max-width: 600px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.5); /* Warna dasar dengan transparansi */
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px); /* Efek blur */
-webkit-backdrop-filter: blur(10px); /* Efek blur untuk Safari */
text-align: center;
}
/* Mengatur gaya teks dalam blur-background */
.blur-background h1, .blur-background p {
margin: 0;
color: #333;
}
3. Penjelasan Kode CSS
– **body**: Mengatur tampilan dasar halaman dengan margin dan padding nol, serta memusatkan elemen secara vertikal dan horizontal.
– **.blur-background**:
– `position: relative;` memastikan elemen ini tetap dalam konteks tata letak normal.
– `width: 80%;` dan `max-width: 600px;` mengatur lebar elemen.
– `padding: 20px;` memberikan ruang di dalam elemen.
– `background-color: rgba(255, 255, 255, 0.5);` memberikan warna dasar putih dengan transparansi.
– `border-radius: 15px;` membuat sudut elemen membulat.
– `box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);` memberikan efek bayangan halus.
– `backdrop-filter: blur(10px);` dan `-webkit-backdrop-filter: blur(10px);` menambahkan efek blur pada background.
– **.blur-background h1, .blur-background p**: Mengatur gaya teks di dalam elemen `blur-background`, dengan margin nol dan warna teks yang kontras.
4. Menyesuaikan Efek Blur
Anda dapat menyesuaikan tingkat blur dengan mengubah nilai `blur(10px)` pada properti `backdrop-filter`. Misalnya, `blur(5px)` akan memberikan efek blur yang lebih ringan, sementara `blur(20px)` akan membuatnya lebih kuat.
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
5. Browser Support
Efek `backdrop-filter` didukung oleh sebagian besar browser modern, tetapi tidak semua. Untuk memastikan kompatibilitas yang lebih luas, pastikan untuk menguji halaman Anda di berbagai browser.
Dengan langkah-langkah di atas, Anda dapat membuat efek background color blur yang menarik di website Anda, memberikan tampilan yang lebih profesional dan modern. Semoga panduan ini bermanfaat untuk meningkatkan desain web Anda!