octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <script src="http://fsasso.com/labs/blur/js/StackBlur.js" type="text/javascript"></script>
<script src="http://fsasso.com/labs/blur/js/html2canvas.js" type="text/javascript"></script>

<section>
  <header>
    <h1><img src="http://fsasso.com/labs/blur/images/abdz.svg" width="55px" style="margin-top: 10px;"/></h1>
  </header>
  <div class="blurheader">
    
  </div>
  <article>
    <div class="pic">
      <img src="http://fsasso.com/labs/blur/images/00.jpg" />
    </div>
    <div class="gd">
      <h1>Beautiful Artworks on Instagram by Creative Mints</h1>
    </div>
    <h3>by Paul0v2</h3>
    <p class="first">We have yet another instagram post, this time is an amazing artist & designer from Czech Republic who loves to share his works and process on instagram. Take a look at these amazing painting & Drawings and let us know what you think. </p>
    
    <p>For more from Creative Mints visit his Instagram instagram.com/emotionslive and art.creativemints.com.</p>
    
    <blockquote>My name is Mike, I'm 30, living and working in Prague, Czech Republic. I've been interested in art and design since I was a kid and I've been always looking for a way to express the emotions and feelings that surround me. I'm most fascinated and inspired by Renaissance art but I like to explore different styles – from impressionism to abstract art. I've been experimenting more lately too, looking for fresh styles and trends – for me the path of an artist is one of constant search for something new</blockquote>
    
    <img src="http://fsasso.com/labs/blur/images/02.jpg" />
    
    <img src="http://fsasso.com/labs/blur/images/04.jpg" />
    
    <img src="http://fsasso.com/labs/blur/images/07.jpg" />
    
    <img src="http://fsasso.com/labs/blur/images/11.jpg" />
    
    <footer>
      <p>Created by <b><a href="http://fabiosasso.com">Fabio Sasso</a></b></p>
      <p>Credits:</p>
      <ul>
        <li><a href="http://jquery.com/">jQuery</a></li>
        <li><a href="http://html2canvas.hertzen.com">html2canvas 0.4.1</a></li>
        <li><a href="http://www.quasimondo.com/StackBlurForCanvas">Stackblur</a></li>
      </ul>
      
      <p>Fork on <a href="https://github.com/abduzeedo/ios7-blur-html5">GitHub</a></p>
    </footer>
    
  </article>
</section>
            
          
!
            
              <style>
			*, *:after, *:before {
			    -webkit-box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    box-sizing: border-box;
			}
			body{
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
				font-family: "HelveticaNeue-Light", sans-serif;
				background: #ddd;
			}
			header, .blurheader{
				background: rgba(255,255,255,.6);
				height: 88px;
				position: fixed;
				width: 100%;
				
				top: 0;
				border-bottom:1px solid rgba(0,0,0,.2);
				z-index: 10000000000;
			}
			header{
				text-align: center;
				display: none;
				max-width: 1024px;
				
			}
			header h1{
				font-size: 24px;
				font-family: "HelveticaNeue-Light", sans-serif;
				font-weight: lighter;
				line-height: 88px;
				margin: 0;
				padding: 0;
			}
			.blurheader{
				background: transparent;
				overflow: hidden;
				z-index: 10000;
				background: #fff;
				left: 0;
				
			}
			section{
				height: 100%;
				position: relative;
				display: block;
				max-width: 1024px;
				margin: 0 auto;
				background: #fff;
			}
			article{
				background: #fff;
				width: 100%;
				padding: 22px;
				margin-top: 70px;
				z-index: 100;	
				font-size: 16px;
				line-height: 150%;;		
			}
			#canvas{
				opacity:1;
			  	z-index: 100;
			  	position: absolute;
			  	display: block;
			  	top: 3px;
			}
			article .pic{
				margin: -22px -22px 11px -22px
			}
			article div.gd{
				/*background: -webkit-linear-gradient(bottom, rgba(0,0,0,.8) 0% , rgba(0,0,0,0)  100%) no-repeat;
				height:auto;
				display: block;
				margin: -150px -11px 50px -11px;
				padding: 0 11px 20px 11px;
				position: relative;
				color: #fff;*/

			}
			article h1{
				font-size: 32px;
				font-family: sans-serif;
				font-weight: bold;
				margin: 0 0 11px 0;
				padding: 0;
				line-height: 32px;
			}
			article h3{
				line-height: 24px;
				font-size: 24px;
				margin:0;
				padding: 0;
				font-family: "HelveticaNeue-Light", sans-serif;
				font-weight: normal;
			}
			article img{
				width: 100%;
			}
			
			article p.first:first-letter{
				display: block;
				background: #111;
				width: 44px;
				height: 46px;
				line-height: 46px;;
				color: #fff;
				position: relative;
				padding: 5px;
				float: left;
				margin: 10px 10px 0 0;
				text-align: center;
				font-weight: bold;
				font-family: sans-serif;
				font-size: 20px;
			}
			blockquote{
				font-family: serif;
				color: #999;
				font-style: italic;
				font-size: 20px;
			}
			footer{
				margin: 22px -22px -22px -22px;
				padding: 22px;
				background: #111;
				color: #ccc;
			}
			footer a{
				color: #ccc;
				text-decoration: none;
				border-bottom: 1px dotted #fff;
			}

		</style>
            
          
!
            
                  
$(function(){
			html2canvas($("body"), { 
				onrendered: function(canvas) {
			    $(".blurheader").append(canvas);
			    $("canvas").attr("id","canvas");
					stackBlurCanvasRGB('canvas', 0, 0, $("canvas").width(), $("canvas").height(), 20);
				}
				
			
			});
			vv = setTimeout(function(){
				$("header").show();
				clearTimeout(vv);
			},200)
})


$(window).scroll(function(){
  $("canvas").css("-webkit-transform", "translatey(-" + $(window).scrollTop() + "px)");
})

window.onresize = function(){
  $("canvas").width($(window).width());
}

$(document).bind('touchmove', function(){
  $("canvas").css("-webkit-transform", "translatey(-" + $(window).scrollTop() + "px)");
})

$(document).bind('touchend', function(){
  $("canvas").css("-webkit-transform", "translatey(-" + $(window).scrollTop() + "px)");
})

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console