Search code examples
csshtmltranslucency

How to make an iOS 7-like translucency effect html

I was wondering if there was a way to make an iOS 7-like "frosted glass" effect (translucency) using HTML divs and CSS.

Solution

  • This is possible. Check the jsfiddle: http://jsfiddle.net/jawilliams346614/jmbsch96/

    HTML

    <div class="ios-container ios-blur">
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
</div>
<div class="ios-frost">&nbsp;</div>

    CSS

    .ios-container {
    width: 400px;
    height: 400px;
    background: url(http://www.hdwallpapers.in/walls/ios_7_galaxy-wide.jpg);
    z-index:1;
}
.ios-items {
    background: #f00;
    width:80px;
    height:80px;
    margin:10px;
    box-sizing:border-box;
    float:left;
    border-radius: 3px;
}
.ios-blur {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    z-index:5;
}
.ios-frost {
    height:200px;
    width: 400px;
    position:absolute;
    top:0;
    left: 0;
    background: rgba(255,255,255,0.3);
}

    The class ios-blur could be added to the element by a click event. The same click event would show the overlay frosted glass.