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 ++ |
|
Snap HTML Code Editor: Paste the source code, make changes and instantly see it in live preview. Snap HTML Code Editor
|
|
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>
|