[해피CGI][cgimall] Live CSS Blur

css 속성인 filter를 이용해서 이미지를 블러처리하는 방법입니다.
 

HTML 구조

<div class="widget center">

 

  <div class="blur"></div>

 

  <div class="text center">

    <h1 class="">Live CSS Blur</h1>

    <p>Go ahead, resize me.</p>

  </div>

 

</div>

CSS 소스

body {

  background: url("https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=")

    no-repeat center center fixed;

  background-size: cover;

}

 

.blur {

  background: url("https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=")

    no-repeat center center fixed;

  background-size: cover;

  overflow: hidden;

  filter: blur(13px);

  position: absolute;

  height: 300px;

  top: -50px;

  left: -50px;

  right: -50px;

  bottom: -50px;

}

 

.widget {

  border-top: 2px solid rgba(255, 255, 255, 0.5);

  border-bottom: 2px solid rgba(255, 255, 255, 0.5);

  height: 200px;

  width: 100%;

  overflow: hidden;

}

 

.center {

  position: absolute;

  margin: auto;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

}

 

/*  NOT REQUIRED  */

 

.text {

  height: 200px;

  width: 340px;

}

 

.text h1 {

  text-align: center;

  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);

  color: #ffffff;

  margin-top: 57px;

  font-family: "Lora", serif;

  font-weight: 700;

  font-size: 38px;

}

 

.text p {

  text-align: center;

  color: #ffffff;

  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);

  margin-top: 0px;

  font-family: "Lato", serif;

  font-weight: 400;

  font-size: 22px;

}