Perkembangan website ketika ini sangat pesat, dimana banyak website parallax yang intertif dan unix saling bermunculan, pada kesempatan kali ini akan menunjukkan tutorial perihal Cara gampang menciptakan efek blur pada background website, untuk menciptakan efek blur pada background website kita memakai HTML dan CSS. Langkah pertama yang kita buat yaitu 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"></a></h1> <h4><a href="site:pointwebsite.blogspot.com" target="_blank"">Cara gampang menciptakan website</a></h4> </div> </div> </body> </html>
Kemudia untuk menunjukkan efek blur kita akan mengembangkan 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 memakai 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 bila teman-teman jalankan pada browser maka akan menghasikan ibarat berikut.
Sedikit klarifikasi dari aku mengenai tutorial ini, pada tutorial ini ada bebrapa property CSS yang perlu kita pahami yaitu position, z-index dan blur. Property tersebut yaitu inti dari tutorial ini. bila teman-teman perhatikan pada code CSS yang sudah kita buat, kita memakai dua buah value untuk property position nya yaitu absolute dan relative, value ini berfungsi untuk menciptakan background tetap pada posisinya dan menciptakan elemen box tetap pada posisinya, lalu pada code CSS kita juga memakai property z-index yaitu property yang berfungsi untuk untuk mengatur background berada paling bawah memakai value 1 dan menciptakan elemen box berada diatasnya dengan memakai value 2, berikutnya property blur, yaitu property yang berfungsi untuk menciptakan gambar background menjadi blur, referensi pada tutorial ini kita menunjukkan value untuk property blur yaitu 10px.
Sekian tutorial dari Point Wesbite perihal Cara Praktis Membuat Efek Blur Pada Background Website ini, agar sanggup membantu teman-teman dalam mempelajari website.
No comments:
Post a Comment