Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Floating Content Shadow Effect Border Radius Tutorial

Published :
Author :
Adam Khoury
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>