Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>iOS blurred style</title>
</head>
<body>
  <h1>iOS blurred style with <code>backdrop-filter</code></h1>
  <div class="Box">
    <p class="Box-header">Header bar</p>
    <div class="Box-texts">
      <p class="Box-text">Who is that guy. It's already mutated into human form, shoot it. It's cold, damn cold. Ha, ha, ha, Einstein, you little devil. Einstein's clock is exactly one minute behind mine, it's still ticking. Hey, Doc, we better back up, we don't have enough roads to get up to 88. Yet.</p>
      <p class="Box-text">What's going on? Where have you been all week? What? Uh Doc, uh no. No, don't be silly. Believe me, Marty, you're better off not having to worry about all the aggravation and headaches of playing at that dance. Oh, oh a rematch, why, were you cheating?</p>
      <p class="Box-text">About 30 years, it's a nice round number. Now, now, Biff, now, I never noticed any blindspot before when I would drive it. Hi, son. C'mon, he's not that bad. At least he's letting you borrow the car tomorrow night. Hey Marty, I'm not your answering service, but you're outside pouting about the car, Jennifer Parker called you twice. Watch it, Goldie.</p>
    </div>
  </div>
  <p>Works with Safari 9, iOS 9</p>
</body>
</html>
 
html {
  font: 1em/1.4 sans-serif;
  text-align: center;
}
* {
  box-sizing: border-box;
}
​
::-webkit-scrollbar {
    display: none;
}
​
.Box {
  position: relative;
  width: 300px; height: 400px;
  overflow: hidden;
  margin: auto;
  background: url(https://unsplash.imgix.net/photo-1417962798089-0c93ceaed88a?fit=crop&fm=jpg&h=400&q=75&w=300);
  border: 1px solid #111;
}
​
.Box-header {
  position: absolute;
  top: 0; left: 0; right: 0; z-index: 1;
  line-height: 60px;
  margin: 0;
  font-size: 1.4em;
  font-weight: bold;
  background: rgba(255,255,255,.95);
}
​
/* effect: see through the header bar */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .Box-header {
      top: -5px; left: -5px; right: -5px;
    line-height: 65px;
      background: rgba(255,255,255,.6);
      -webkit-backdrop-filter: brightness(1.5) blur(4px);
      backdrop-filter: brightness(1.5) blur(4px);
  }
}
​
.Box-texts {
  height: 400px;
  padding-top: 50px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
​
.Box-text {
  text-align: left;
  padding: 1em;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
}
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x