Setelah sebelumnya menunjukkan tutorial Cara Praktis Membuat Efek Blur Backgound Pada Website, ada yang bertanya pada FP kami wacana bagaimana cara untuk menciptakan box-nya menjadi blur. Nah pada tutorial kali ini akan menunjukkan turorial dan klarifikasi untuk pertanyaan tersebut. Cara nya sama menyerupai artikel yang disebutkan diatas, namun ada sedikit embel-embel dan manpulasi yaitu, kita memakai 1 buah gambar untuk background namun dipakai untuk dua buah elemen HTML untuk background dan box lalu kita memakai 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 terang 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"></a></h1> <h4><a href="http://pointwebsite.blogspot.com" target="_blank"">Cara gampang menciptakan 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 balasannya akan terlihat menyerupai berikut ini.
Sekian tutorial dari wacana Membuat Blur Background Dengan HTML dan CSS supaya bermamfaat, mempunyai kegunaan dan sanggup membantu teman-teman dalam menciptakan dan mempelajari website.
Sumber http://pointwebsite.blogspot.com/
No comments:
Post a Comment