CSS3 to Achieve iOS7 Frosted Glass Blur Effect (iOS7 Live Blur)

With the official release of iOS 7, many people expressed that Apple has finally tried to fix the UI that has remained unchanged for centuries. Whether this change is good or bad is subjective. Today, we focus on a special design effect in iOS 7 — the frosted glass effect.

There have already been many discussions on other aspects of iOS7 live blur. For example:

What system overhead is required for rendering the real-time frosted glass blur (live blur) effect in iOS 7?

Today I want to talk about how to implement the frosted glass effect of iOS 7 using CSS3.

-webkit-filter

This property is the main attribute we will use to achieve this functionality.

This property is currently still in the draft stage and is only supported by Chrome 18+ and Safari browsers. However, I believe it will soon be widely adopted over time.

I will write another article to share the specific usage of the filter; here I mainly introduce its three attributes: blur(), brightness(), and contrast().

blur()

This is used to set the blur level of the corresponding DOM, and it is very simple to use.

filter: blur(5px)

brightness()

This is used to set the brightness of the corresponding DOM. The larger the value, the brighter it is.

filter: brightness(0.5)

contrast()

The larger the contrast value, the more intense it is.

filter: contrast(200%)

clip: rect(205px 572px 516px 351px);

This is used to crop the DOM, equivalent to the concept of masking. Since CSS blur can cause the edges to become very faint, affecting our effect, we use cropping to reduce the edge part, which makes the effect look great.

 clip: rect(205px 572px 516px 351px);

Example

HTML Code

    <div class="ios7">
        <div class="ios7_f">
        <img src="ios7_icon_redesign_by_ida_swarczewskaja.jpg" width="700px" height="525px" />
    </div>
    <div class="ios7_b">
        <img src="ios7_icon_redesign_by_ida_swarczewskaja.jpg" width="700px" height="525px" />
    </div>
    <div class="ios7_i">
        <img src="Control-Center-btns.png" width="222px" height="331px"/>
    </div>
   </div>

CSS Code

.ios7 {  
    width: 700px;  
    height: 525px; 
    overflow: hidden;  
    position: relative;  
    margin: 0 auto; 
}
.ios7_f, .ios7_b { 
    position: absolute;  
    top: 0;  
    left: 0;
}
.ios7_f img, .ios7_b img{  
    width:700px; 
    height:525px; 
}
.ios7_b { 
    -webkit-filter: blur(8px) contrast(0.4) brightness(1.4); 
    clip: rect(205px 572px 516px 351px);
     z-index: 50;   transition: all 0.5s ease-in-out;   
}
.ios7_b_on { 
    clip: rect(516px 572px 516px 351px); 
}
.ios7_i { 
    position: absolute; 
    clip: rect(205px 572px 516px 351px); 
}
.ios7_i img { 
    z-index: 100; 
    width: 222px;   
    height:301px;  
    top: 215px; 
    left: 350px; 
    position: absolute; 
    transition: all 0.5s ease-in-out; 
}
.ios7_i_on img { 
    top: 516px 
}

JavaScript Code

var img = document.querySelector('.ios7_i');
var back = document.querySelector('.ios7_b');
document.onkeydown = function(e) {
    if (e.keyCode == '38') {
        img.className = 'ios7_i';
        back.className = 'ios7_b';
        return false;
    } else if (e.keyCode == '40') {
        img.className += ' ios7_i_on';
        back.className += ' ios7_b_on';
        return false;
   }
};