Blur OS X Style Menu

Adding a blur to the child element only

by kizer

HTML

<link rel="stylesheet" href="http://f.cl.ly/items/2D1I2l1O3L3E260v1x1J/ck-reset.css">
<menu>
    <li><p>this is an example of a blur menu<p></li>
</menu>

        
        
        
Select your favorite color: <input type="color" name="favcolor" />

CSS

html {
    background: url(http://f.cl.ly/items/2r2I1w1t3m0D3q360J31/NSTexturedFullScreenBackgroundColor.png);
}

menu {
 background: red;
 height: 200px;    
}
ul, li {
    list-style-type:none;
    color: white;
    user-select: none;
    cursor: default;
}
li {
    background: red;
    -webkit-transition: -webkit-filter 1s ease-in-out;
}

li:hover {
    -webkit-filter: blur(1px);
    -webkit-transition: -webkit-filter 1s ease-in-out;
}

li p {
    -webkit-filter: blur(0px);
}

/* New CSS Functions */
.width1 {
    width: -webkit-calc(200px - 100);
    width: -webkit-calc(2 * 50%);
    width: -webkit-calc(200px / 2);
    color: hsl(-webkit-calc(120), -webkit-calc(75%), 0.5);
    background-position: -webkit-calc(50% + 5px) center;
}

/* New CrossFade() */

background-image: -webkit-cross-fade(url(first.png),
                                       url(second.png), 50%);
@-webkit-keyframes fading {
  0% { background-image: -webkit-cross-fade(
                         url(first.png), url(second.png), 0%); }
  100% { background-image: -webkit-cross-fade(
                           url(first.png), url(second.png), 100%); }
}