2

I'm trying to replicate the iOS 7 blur effect with CSS 3 to make a blurred menu bar with buttons above it. However, when I blur just the menubar, also the buttons and text in it gets blurred, which isn't what I want.

How the code looks:

<body id="containerid">
  <div class="navbar navbar-static-top">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav">
        <li>Button 1</li>
        <li>Button 2</li>
        </ul>
      </div>
    </div>
  </div>
</body>

Basically I just want to blur <div class="navbar navbar-static-top"> but not the buttons inside that div. How would one do that?

Martyn
  • 49
  • 1
  • 7
  • possible duplicate of [Background blur with CSS](http://stackoverflow.com/questions/14565520/background-blur-with-css) – Tyler Eich Jan 05 '14 at 14:56

1 Answers1

3

This one is the best example I have found: http://jsfiddle.net/CSS_Apprentice/WtQjY/415/

This requires: javascript $(document).ready(function(){

This is what I am trying to do with Bootstrap so it actually blurs the background of the image as well but having not as much luck.

BHCOM
  • 124
  • 1
  • 2
  • 11