Membuat Blur Background Dengan HTML dan CSS

Setelah sebelumnya Point Website memberikan tutorial Cara Mudah Membuat Efek Blur Backgound Pada Website, ada yang bertanya pada FP kami tentang bagaimana cara untuk membuat box-nya menjadi blur. Nah pada tutorial kali ini Point Website akan memberikan turorial dan penjelasan untuk pertanyaan tersebut. Cara nya sama seperti artikel yang disebutkan diatas, namun ada sedikit tambahan dan manpulasi yaitu, kita menggunakan 1 buah gambar untuk background namun digunakan untuk dua buah elemen HTML untuk background dan box kemudian kita menggunakan property dan value pada CSS sama pada background dan box tersebut. Untuk lebih jelasnya mari kita lihat code HTML dan CSS berikut ini. Pertama kita buat dulu file HTML, silahkan teman-teman tulis code berikut, simpan dengan nama index,html atau terserah teman-teman yang jelas extensinya harus html.

<!DOCTYPE html>
<html>
<head>
  <title>Blur Background</title>
  <link rel="stylesheet" type="text/css" href="blur.css">
</head>
<body>
  <div id="container">
    <div id="box-container">
      <div id="box-bg"></div>
      <div id="box">
        <h1><a href="http://pointwebsite.blogspot.com" target="_blank">Point Website</a></h1>
        <h4><a href="http://pointwebsite.blogspot.com" target="_blank"">Cara mudah membuat website</a></h4>
      </div>
    </div>
  </div>
</body>
</html>

Kemudian tulis code CSS berikut ini dan simpan pada folder yang sama dengan file HTML yang sudah teman-teman buat diatas, dengan nama style.css atau dengan nama lain, jangan lupa extensinya harus css.

#container, #box-bg {
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-size: 1080px auto;
}

#container {
  background-position: center;
  padding: 70px 90px 120px 90px;
}

#box-container {
  position: relative;
}

#box-bg {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 1;
  background-position: center;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

#box {
  position: relative;
  z-index: 2;
  padding: 20px;
  background: rgb(193, 192, 192);
  background: rgba(119, 119, 119, 0.34);
}

#box h1, #box h1 a, #box h4, #box h4 a { 
  text-align: center; 
  color: #7d1919; 
  font-weight: bold;
}

#box h4 {
  letter-spacing: 2px;
  font-size: 18px;
}

#box h1 { 
  margin-bottom: 10px;
  font-size: 48px;
  text-transform: uppercase;
}
#box h4 { 
  margin-top: 10px; 
  text-transform: uppercase;
}

#box a {
  text-decoration: none;
}

#box a:hover {
  color: #ffffff;
}

Silahkan teman-teman lihat dan perhatikan code CSS diatas dan bandingkan dengan code CSS pada artikel sebelumnya. Kemudian silahkan dibuka pada browser, maka hasilnya akan terlihat seperti berikut ini.

Sekian tutorial dari Point Website tentang Membuat Blur Background Dengan HTML dan CSS semoga bermamfaat, berguna dan dapat membantu teman-teman dalam membuat dan mempelajari website.