<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/FWeinb/pen/Dfoaw?limit=all&page=32&q=css" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
.content {
box-sizing: border-box;
/* Not covered by autoprefixer... */
-webkit-flow-into: content;
flow-into: content;
overflow-y: auto;
}
.blurred__background, .phone__content {
transform: translateZ(0);
overflow: hidden;
/* Not covered by autoprefixer... */
-webkit-flow-from: content;
flow-from: content;
}
.content {
padding: 1em 1em 0 1em;
height: 672px;
padding-top: 60px;
}
.messages {
margin: 10px 0;
padding: 0;
list-style-type: none;
}
.messages li {
display: block;
float: left;
clear: both;
max-width: 60%;
margin: 0 0 1em 0;
padding: 0;
}
.messages li:nth-child(even) {
float: right;
}
.messages li:nth-child(even) img {
float: right;
}
.messages p {
border-radius: .75em;
background: #e6e5eb;
color: #383641;
padding: .6875em;
margin: 0;
font-size: .875em;
}
.messages li:nth-child(even) p {
background: #158ffe;
color: #fff;
}
.messages img {
display: block;
max-width: 65%;
border-radius: .75rem;
}
.phone {
position: relative;
width: 509px;
height: 931px;
margin: 0 auto;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/315/phone.png);
}
.phone__display {
position: absolute;
top: 182px;
left: 95px;
height: 567px;
width: 319px;
}
.blurred {
position: relative;
height: 60px;
}
.blurred__background, .header__text, .footer__container {
position: absolute;
top: 0;
left: 0;
right: 0;
height: inherit;
}
.blurred__background {
filter: blur(10px);
-webkit-filter: blur(10px);
opacity: .2;
}
.header:before, .header:after {
position: absolute;
content: '';
width: 100%;
z-index: 1;
}
.header:before {
height: 100%;
}
.header:after {
height: 1px;
bottom: 0;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.header__text {
font-weight: 300;
text-align: center;
line-height: 60px;
z-index: 4;
}
.footer {
position: relative;
height: 45px;
}
.footer:before, .footer:after {
position: absolute;
content: '';
width: 100%;
z-index: 1;
}
.footer:before {
height: 100%;
}
.footer:after {
height: 1px;
top: 0;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.footer__container {
list-style: none;
margin: 0 1.2em;
padding: 0;
letter-spacing: 1.5em;
}
.footer__container > li {
display: inline-block;
line-height: 45px;
font-size: 1.5em;
}
.footer__container .spacer {
width: .22em;
}
.phone__content {
height: 462px;
}
body {
font-family: "Helvetica Neue","Helvetica","sans-serif";
}
.custom {
position: absolute;
top: 10px;
}
.custom style {
display: block;
white-space: pre;
}
</style></head><body>
<p>Reade about it on <a href="https://css-tricks.com/blurry-transparent-header-effect-ios7-css/">CSS-Tricks</a> (this pen was updated after I wrote the article)</p>
<p>enable 'experimental-webkit-features'/'enable-experimental-web-platform-features'</p>
<div class="phone">
<div class="phone__display">
<!-- .header>.header__text+.header__tint+.header__background -->
<div class="blurred header">
<div class="header__text">Header</div>
<div class="blurred__background js-header__background"></div>
</div>
<div class="phone__content"></div>
<div class="blurred footer">
<ul class="footer__container">
<li class="entypo-left-open-big"></li>
<li class="entypo-right-open-big"></li>
<li class="spacer"></li><!-- This is bad-->
<li class="entypo-down-open-big"></li>
<li class="entypo-up-open-big"></li>
</ul>
<div class="blurred__background"></div>
</div>
</div>
</div>
<!-- The content will be here -->
<div class="content">
<ol class="messages">
<li>
<p>Praesent porttitor nisl vel enim consectetur, vitae dictum ipsum condimentum.</p>
</li>
<li>
<p>Sed convallis lorem non augue lobortis tincidunt.</p>
</li>
<li>
<img src="http://lorempixel.com/200/300/nature/" alt=""/>
</li>
<li>
<p>Mauris viverra lacus et justo accumsan, et lobortis eros adipiscing.</p>
</li>
<li>
<p>Integer dignissim metus id arcu pretium, ultrices tristique dolor vulputate.</p>
</li>
<li>
<p>Sed ultricies tortor sagittis sapien dapibus commodo.</p>
</li>
<li>
<p>Morbi nec erat sit amet dui aliquet pretium.</p>
</li>
<li>
<img src="http://lorempixel.com/200/250/nature/" alt=""/>
</li>
<li>
<p>Mauris viverra lacus et justo accumsan, et lobortis eros adipiscing.</p>
</li>
<li>
<p>Integer eget nisi euismod, fermentum ligula eget, faucibus nibh.</p>
</li>
<li>
<p>Sed ultricies tortor sagittis sapien dapibus commodo.</p>
</li>
<li>
<p>Morbi nec erat sit amet dui aliquet pretium.</p>
</li>
<li>
<p>Praesent porttitor nisl vel enim consectetur, vitae dictum ipsum condimentum.</p>
</li>
<li>
<p>Sed convallis lorem non augue lobortis tincidunt.</p>
</li>
<li>
<p>Praesent porttitor nisl vel enim consectetur, vitae dictum ipsum condimentum.</p>
</li>
<li>
<p>Sed convallis lorem non augue lobortis tincidunt.</p>
</li>
<li>
<img src="http://lorempixel.com/200/310/nature/" alt=""/>
</li>
<li>
<p>Mauris viverra lacus et justo accumsan, et lobortis eros adipiscing.</p>
</li>
<li>
<p>Integer dignissim metus id arcu pretium, ultrices tristique dolor vulputate.</p>
</li>
<li>
<p>Sed ultricies tortor sagittis sapien dapibus commodo.</p>
</li>
<li>
<p>Morbi nec erat sit amet dui aliquet pretium.</p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li>
<p>Voluptatibus, aperiam tempore iusto est voluptate eius autem!</p>
</li>
<li>
<p>Et molestiae non esse mollitia delectus blanditiis magni.</p>
</li>
<li>
<p>Aliquam corrupti laboriosam placeat expedita in iure hic?</p>
</li>
<li>
<p>Vel, molestias eligendi accusamus aliquid voluptates repellendus nostrum.</p>
</li>
</ol>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://s.cdpn.io/315/dat.gui.min.js'></script>
<script >window.onload = function() {
var sheet = (function() {
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
return style.sheet;
})();
// Add a new rule
sheet.addRule('.header:before', 'background-color:none');
var headerBackgroundNode = document.querySelector('.js-header__background'),
headerTintRule = sheet.cssRules[0];
var updateHeaderTintColor = function(color){
color = 'rgba('+color.map(function(i, dex){return (dex !== 3) ? Math.round(i) : i;}).join(',')+')';
headerTintRule.style.backgroundColor = color;
};
var updateHeaderBlur = function(blur){
headerBackgroundNode.style.webkitFilter = 'blur('+blur+'px)';
};
var updateHeaderOpacity = function(opacity){
headerBackgroundNode.style.opacity = opacity;
};
var options = {
headerTint : {
color : [ 255, 255, 255, 0.1 ], // Shared with SCSS! Keep in mind
opacity : 0.1
},
headerBlur : {
blur : 0,
opacity : 0.1
},
custom : {
preset : '',
filter : ''
}
};
var gui = new dat.GUI();
var headerTint = gui.addFolder('Header tint');
headerTint.addColor(options.headerTint, 'color').onChange(updateHeaderTintColor).listen();
headerTint.add(options.headerTint, 'opacity', 0, 1).step(0.1).onChange(function(opacity){
options.headerTint.color[3] = Math.round(opacity*10)/10;
updateHeaderTintColor(options.headerTint.color);
});
headerTint.open();
var headerBlur = gui.addFolder('Header blur');
headerBlur.add(options.headerBlur, 'blur',0, 20).onChange(updateHeaderBlur);
headerBlur.add(options.headerBlur, 'opacity', 0, 1).step(0.1).onChange(updateHeaderOpacity);
headerBlur.open();
var headerCustom = gui.addFolder('Custom filter:');
headerCustom.add(options.custom, 'preset', [ '', 'invert(1)', 'hue-rotate(90deg)', 'grayscale(100%)' ]).onChange(function(change){
headerBackgroundNode.style.webkitFilter = change;
});
headerCustom.add(options.custom, 'filter').onChange(function(change){
headerBackgroundNode.style.webkitFilter = change;
});
headerCustom.open();
// Fix dat.gui bug https://code.google.com/p/dat-gui/issues/detail?id=11
var cInput = document.querySelector('.c input');
cInput.disabled = true;
};
// Activate scrolling on iOS7 (Don't know why this is working)
document.addEventListener('touchstart', function(){});
//# sourceURL=pen.js
</script>
</body></html>
