Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: HTML5 Codes Library >> Drop Shadows >> Simple Drop Shadow


Code Snippet </> Info


Snippet Name: Simple Drop Shadow

Description: Add a drop shadow below your DIV boxes.

Example: View Code Demo

Note: Adjust the color styles to your preferences.

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2019-12-06 00:42:53

Language: html5

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
Copied To Clipboard!

<!DOCTYPE html> <html> <head> <title>HTML5 CSS Simple Drop Shadow</title> <style> /* Begin HTML5 CSS Simple Drop Shadow */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ body, .box:after {font-family:verdana,arial,ms sans serif; font-size:90%; text-shadow:0px 1px 0px rgba(0,0,0,0.4); background:#E6E7E8;} .box, .content {-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;} .box {background:#ffffff; position:relative; width:300px; height:100px; padding:15px; margin:0 auto; margin-top:80px; border:solid 2px #ddd;} .content {background:#ffffff; width:100%; height:100%;} .shadow:before, .box:after {content:''; position:absolute;} .shadow:before {background:#BEBEC0; height:10px; width:96%; bottom:-10px; left:2%;} .shadow:after {-moz-border-radius:150% / 20px; -webkit-border-radius:150% / 20px; border-radius:150% / 20px; width:100%; height:20px; bottom:-22px; left:0; z-index:1;} </style> </head> <body> <h3>HTML5 CSS Simple Drop Shadow Example</h3> <div class="box shadow"> <div class="content">Your Content Here</div> </div> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_126.html">Simple Drop Shadow</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library