Floating Content Shadow Effect Border Radius Tutorial
In this very quick design tip I am sharing a pure CSS trick to get a Floating Content Shadow effect, an effect that we had to use images for in the past. Adding the effect will make your content appear to be floating in mid-air on the page. Especially cool placed under images, icons, graphics and videos.
<!DOCTYPE html>
<html>
<head>
<style>
div.bot_container{
width:285px;
height:420px;
margin:0px auto;
}
div.bot{
background: url(adam.png);
width: 285px;
height: 302px;
}
div.bot_shadow{
height:16px;
background: #999;
opacity:0.1;
border-radius:100%;
margin:32px 0px 0px 0px;
top:100px;
}
</style>
</head>
<body>
<div class="bot_container">
<div class="bot"></div>
<div class="bot_shadow"></div>
</div>
</body>
</html>