Create A Depth Of Field Effect Using CSS3
Here’s a very neat CSS trick that really makes good use of the text-shadow attribute. It is created by Sawyer Hollenshead and he simply calls it the “Depth Of Field effect.” The effect is animated with the use of jQuery and as you will see in the demo, it really looks cool.
Basic HTML5 mark up:
<section>
<article >
<span>01</span>
<h1>HTC Design Chief Talks About Its First Tablet, the Flyer</h1>
</article>
<article >
<span>02</span>
<h1>Irrational Design, a San Francisco Start-Up, Tries to Fly Solo</h1>
</article>
<article >
<span>03</span>
<h1>Staying in Touch With Home, for Better or Worse</h1>
</article>
<article >
<span>04</span>
<h1>Google Announces Payment System for Digital Content</h1>
</article>
</section>
|
And here’s the CSS:
article{
background:rgba(242,194,0,1);
width:225px;
height:225px;
position:absolute;
-moz-border-radius:12px;
border-radius:12px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
transition: all 400ms ease;
}
article.blur{
-webkit-box-shadow:
0 0 10px rgba(242,194,0,1),
0 0 8px rgba(242,194,0,1),
0 0 6px rgba(242,194,0,1),
0 0 4px rgba(242,194,0,1),
0 0 2px rgba(242,194,0,1);
-moz-box-shadow:
0 0 10px rgba(242,194,0,1),
0 0 8px rgba(242,194,0,1),
0 0 6px rgba(242,194,0,1),
0 0 4px rgba(242,194,0,1),
0 0 2px rgba(242,194,0,1);
box-shadow:
0 0 10px rgba(242,194,0,1),
0 0 8px rgba(242,194,0,1),
0 0 6px rgba(242,194,0,1),
0 0 4px rgba(242,194,0,1),
0 0 2px rgba(242,194,0,1);
-webkit-transform:scale(0.85);
-moz-transform:scale(0.85);
transform:scale(0.85);
opacity:0.8;
}
article:hover{
cursor:pointer;
z-index:10;
-webkit-transform:scale(1.15);
-moz-transform:scale(1.15);
transform:scale(1.15);
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
|
0
486
