آموزش ایجاد برگه ی تار بر روی عکس (Gaussian blur)

با سلام خدمت تمامی دوستان عزیز … امروز براتون یک آموزش در زمینه ساخت یک برگه (Div) تار روی یک عکس پس زمینه تهیه کزدم … امیدوارم براتون مفید باشه و بتونید بخوبی ازش استفاده کنید . همین جور که در جلوتر ببینید فقط با HTML و CSS تهبه شده و از JS استفاده نشده . . . نمیخوام زیاد توضیج بدم میرم سراغ کد هاش …

کد های HTML :

[php]
<div id="bg">
<div id="search-container">
<div id="search-bg"></div>
<div id="search">
<h2>CSS Gaussian blur behind a translucent box</h2>
<h5><a href="https://www.7plugin.ir">7Plugin.ir</a></h5>
</div>
</div>
</div>
[/php]

کدهای CSS :

[css]
#bg, #search-bg {
background-image: url(‘https://7plugin.ir/wp-content/uploads/Background-4.jpg’);
background-repeat: no-repeat;
background-size: 100% auto;
}

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

#search-container {
position: relative;
}

#search-bg {

position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 99;
/* Pull the background 70px higher to the same place as #bg’s */
background-position: center -70px;
-webkit-filter: blur(10px);
filter: blur(10px);
}

#search {
/* Put this on top of the blurred layer */
position: relative;
z-index: 100;
padding: 20px;
background: rgb(34,34,34); /* for IE */
background: rgba(34,34,34,0.75);
}
@media (max-width: 600px ) {
#bg { padding: 10px; }
#search-bg { background-position: center -10px; }
}
#search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; }
#search h2 { margin-bottom: 50px }
#search h5 { margin-top: 70px }

[/css]

همچنین قابل HTML اشم براتون قرار میدم که اگه دوست داشته باشید دانلود کنید و داشته باشیدش … امیدوارم از این مطلب لذت برده باشید .