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

 

Category: HTML5 Codes Library >> Drop Shadows >> Lifted Corner Drop Shadow


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

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


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library