Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

CSS Videos

General Design

Border Image Custom Graphics SliceCSS import Rule Import Style Sheet TutorialCustom Mouse Cursor Tutorial Canvas CSS HTMLControl Panel Icon Menu Configure Button Design TutorialFloating Content Shadow Effect Border Radius TutorialEmbed Custom Font HTML Tutorial Special Website TextDrop Down Category Menus details and summary Elements