Code Snippet </> Info
Snippet Name: Lifted Corner Drop Shadow
Description: Easily create lifted drop shadows to your DIV boxes.
Example: View Code Demo
Note: Change the color values to your preferences.
Author: SnapBuilder <snippets@snapbuilder.com>
Last Modified: 2015-08-26 22:19:23
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 Lifted Corner Drop Shadow</title>
<style>
/* Begin HTML5 CSS Lifted Corner 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 {font-family:verdana,arial,ms sans serif; font-size:90%; color:#000000;}
.box {width:200px; height:100px;}
.drop-shadow {position:relative;float:left;width:40%;padding:1em;margin:2em 10px 4em;background:#fff;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
.drop-shadow:before, .drop-shadow:after {content:"";position:absolute;z-index:-2;}
.drop-shadow p {font-size:16px;font-weight:bold;}
.lifted {-moz-border-radius:4px;border-radius:4px;}
.lifted:before, .lifted:after {bottom:15px;left:10px;width:50%;height:20%;max-width:300px;-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-ms-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg);}
.lifted:after {right:10px;left:auto;-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-ms-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg);}
</style>
</head>
<body>
<h3>HTML5 CSS Lifted Corner Drop Shadow Example</h3>
<div class="box drop-shadow lifted">Your Content Here</div>
<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_127.html">Lifted Corner Drop Shadow</a> page. ]
</div>
</body>
</html>
|