Fire JS Bin - CSS3TiltShift

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

Find

⟲

Replace

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  
 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head> 
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
  <title>CSS3 Tilt-Shift Text experiment - Where are the trees</title> 
  
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">

</head> 
 
<body> 
  
  <div id="wrapper" contenteditable="true"> 
    
    <p>Where</p> 
    <p>are the</p> 
    <p>trees</p> 
    
  </div> 
      
  
  <div id="meta"> 
    <p><strong>Where are the trees</strong> is an experiment trying to create a <strong>Tilt-Shift</strong> effect on <strong>Text</strong> using <strong>CSS3</strong> only.<br /> 
    Background source photo by <a href="http://flic.kr/p/7kcU2W">karinga</a>. Looks best in Safari.</p> 
    
    <p>Read <a href="http://simurai.com/post/861975259/">more details</a>.</p> 
  </div>  
  
  <div id="simurai"> 
    <a href="http://simurai.com/" title="simurai"><img src="/assets/simurai/simurai_logo.png" alt="simurai" /></a> 
  </div> 
 
 
 
  <div id="love"> 
    <a class="FlattrButton" style="display:none;" href="http://lab.simurai.com"></a> 
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="simurai">Tweet</a> 
  </div> 
  
</body> 
 
</html>

/* @override http://lab.simurai.com/css/tilt-shift/style.css */

/* TiltShift text by simurai.com  */

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:bold);

html {
  background: url(http://files.simurai.com/tumblr/img/bg_glow.png) no-repeat fixed center center,
        url("/assets/simurai/tiltshift_bg.gif") repeat fixed 0 0;
  font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
}

#wrapper {
  text-align: center;
  font-weight: bold;
  font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
  margin: 100px auto;
  width: 600px;
  padding: 7em 0;
  background: url(/assets/simurai/tiltshift_bg.jpg) no-repeat center center;
  -webkit-perspective: 350;
  -webkit-border-radius: 4px;  -moz-border-radius: 4px;
  -webkit-box-shadow: rgba(0,0,0,0.1) 0px 5px 7px;  -moz-box-shadow: rgba(0,0,0,0.1) 0px 5px 7px;
}
#wrapper:focus {
  outline: none;
}

#wrapper p {
  font-size: 10em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow:   rgba(0,0,0,0.1) 0 20px 80px;
  -webkit-transition: -webkit-transform .1s ease-in;
}

/* wrapper:hover */

#wrapper:hover p {
  color: transparent;
  -webkit-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
      -moz-transform:  rotate(6.5deg);
  -webkit-transition: -webkit-transform .1s ease-out;
}
#wrapper:hover p:nth-child(1) {
  font-size: 9em;
  text-shadow:   #fff 0 0 10px, 
          #fff 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px, 
          rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
          rgba(0,0,100,0.2) 0 15px 80px;
  text-indent: 0.3em;
}
#wrapper:hover p:nth-child(2) {
  font-size: 10em;
  text-shadow:   #fff 0 0 1px, 
          #eee 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px, 
          rgba(0,0,0,0.2) 0 14px 3px, rgba(0,0,0,0.1) 0 20px 10px,
          rgba(0,0,100,0.2) 0 15px 80px;
}
#wrapper:hover p:nth-child(3) {
  font-size: 11em;
  text-shadow:   #fff 0 0 2px, 
          #fff 0 4px 5px, #ddd 0 9px 5px,  #ccc 0 12px 10px, 
          rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
          rgba(0,0,100,0.2) 0 15px 80px;
}

/* Interaction */

#wrapper p:nth-child(2):hover {
  text-shadow:   #fff 0 -5px 1px, 
          #eee 0 -1px 3px, #ddd 0 4px 3px,  #ccc 0 7px 1px, 
          rgba(0,0,0,0.2) 0 15px 5px, rgba(0,0,0,0.1) 0 20px 10px,
          rgba(0,0,0,0.2) 0 15px 80px;
}
#wrapper p:nth-child(2):active {
  text-shadow:   rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
          rgba(0,0,0,0.2) 0 15px 80px;
}

#wrapper p::selection {
  background-color: red;
}

/* below just the usual stuff */

strong {
  font-weight: bold;
  color: #000;
}

#meta {
  color: #777;
  font-size: 1.2em;
  line-height: 1.5em;
  margin-bottom: 90px;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0 1px 0;
} 
#meta p { margin-bottom: 10px; }
#meta a {
  text-decoration: none;
  color: #7276ff;
}
#meta a:hover { color: rgba(114,118,255,0.5); }

#simurai {
  width: 100px;
  height: 300px;
  position: fixed;
  z-index: 88;
  bottom: 60px;
  right: 40px;
  opacity: 0.1;
}
#simurai:hover { opacity: 1; }

/* Love */

#love {
  padding: 10px;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.3);
  -webkit-box-shadow: inset rgba(0,0,0,0.15) 0 1px 2px;
  border-radius: 0 10px 0 0;
  opacity: .33;
}
#love:hover { opacity: 1; }
#love * { padding-right: 10px; }
#love *:last-child { padding-right: 2px; }

Pop out