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

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

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

 

کد های HTML :

<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="http://www.7plugin.ir">7Plugin.ir</a></h5>
    </div>
  </div>
</div>

کدهای CSS :

    #bg, #search-bg {
       background-image: url('http://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 }

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

 
Download Demo

جعبه دانلود

  • آموزش ایجاد برگه ی تار بر روی عکس (Gaussian blur)
  • نویسنده :
  • تعداد فروش : http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
chanel-telgram

درباره آرمان زارعی

با سلام . آرمان زارعی هستم . حدود 4 سال هست که در زمینه طراحی وب فعالیت دارم ... امیدوارم از حداقل چیزی که بلدم در اختیار شما قرار بدم .

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سوال امنیتی * Time limit is exhausted. Please reload the CAPTCHA.