Cara Mudah Membuat Efek Blur Pada Background Website
Perkembangan website saat ini sangat pesat, dimana banyak website parallax yang intertif dan unix saling bermunculan, pada kesempatan kali ini Point Website akan memberikan tutorial tentang Cara mudah membuat efek blur pada background website, untuk membuat efek blur pada background website kita menggunakan HTML dan CSS. Langkah pertama yang kita buat adalah HTML nya, silahkan teman-teman copy code dibawah ini dan simpan dengan nama index.html atau terserah teman-teman yang penting extensinya harus html.
<!DOCTYPE html> <html> <head> <title>Blur Backgound</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="background-image"></div> <div id="box"> <h1><a href="http://pointwebsite.blogspot.com" target="_blank">Point Website</a></h1> <h4><a href="site:pointwebsite.blogspot.com" target="_blank"">Cara mudah membuat website</a></h4> </div> </div> </body> </html>
Kemudia untuk memberikan efek blur kita akan membuatkan CSS nya, silhakan teman-teman copy code css dibawah ini dan simpan dengan nama style.css atau terserah teman-teman yang penting extensinya harus css, dan letakan pada folder yang sama dengan file html tadi, karna dalam tutorial ini dalam menghubungkan HTML dan CSS nya kita menggunakan metode Eksternal Style.
.container{ position:relative; padding:15px; height: 500px; } .background-image{ position:absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(bg.jpg); background-size: cover; z-index: 1; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } #box { /* Put this on top of the blurred layer */ margin-top: 100px; position: relative; z-index: 2; padding: 20px; background: rgb(61, 117, 123); background: rgba(50, 148, 144, 0.75); } #box h1, #box h1 a, #box h4, #box h4 a { text-align: center; color: #fefefe; font-weight: bold; } #box h1 { font-size: 48px; text-transform: uppercase; } #box h4 { margin-top: 10px; text-transform: uppercase; } #box a { text-decoration: none; } #box a:hover { color: #7d1919; }
Pada code CSS diatas background:url(bg.jpg) di ganti dengan gambar yang ada pada PC teman-teman. Nah jika teman-teman jalankan pada browser maka akan menghasikan seperti berikut.
Sedikit penjelasan dari saya mengenai tutorial ini, pada tutorial ini ada bebrapa property CSS yang perlu kita pahami yaitu position, z-index dan blur. Property tersebut adalah inti dari tutorial ini. jika teman-teman perhatikan pada code CSS yang sudah kita buat, kita menggunakan dua buah value untuk property position nya yaitu absolute dan relative, value ini berfungsi untuk membuat background tetap pada posisinya dan membuat elemen box tetap pada posisinya, kemudian pada code CSS kita juga menggunakan property z-index yaitu property yang berfungsi untuk untuk mengatur background berada paling bawah menggunakan value 1 dan membuat elemen box berada diatasnya dengan menggunakan value 2, berikutnya property blur, yaitu property yang berfungsi untuk membuat gambar background menjadi blur, contoh pada tutorial ini kita memberikan value untuk property blur yaitu 10px.
Sekian tutorial dari Point Wesbite tentang Cara Mudah Membuat Efek Blur Pada Background Website ini, semoga dapat membantu teman-teman dalam mempelajari website.
Demonya ada tuh gan..?
ReplyDeleteMantap gan, ane mau lihat demonya kalo ada agn:)
ReplyDeleteKeren juga gan.. Buat ide bikin template ke 2 ane
ReplyDeleteMantap om
ReplyDeletejadi keren gitu ya ada blurnya. ijin praktekin aaah
ReplyDeletewah keren nih gan jadi background belakangnya bisa blur gitu
ReplyDeleteNice👍
ReplyDeletekok ga ngefek ya gan? padahal sudah copy paste codingannya
ReplyDeleteramadhannu coba cek lagi file html dan css nya..
ReplyDeletecek juga ini..
cek juga di link external css nya gan, sesuaikan dengan nama file css agan..