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

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Drop Box Shadows >> Rotated Box Shadow Without Images


Code Snippet </> Info


Snippet Name: Rotated Box Shadow Without Images

Description: Create a drop box with a rotated box shadow without using images.

Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:28:15

Language: css

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 Rotated Box Shadow Without Images</title> <style> /* Begin HTML5 CSS Rotated Box Shadow Without Images */ /* == 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;background:#e6e6e6 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAXKklEQVR42myaeWyVVbfG95mgM6W0jKd0ggKWAi12YCiFIkVxwFnR72quGmPUxMQY/yExJsa/TEwwapyioiAIqIgK0oqAVBAQQRBlaGUeW6B0ovT0nHN/z3a/TT9zT/L2nffea61nPWt464vH4+EjR46YwsJC434pbB2xWCztypUrk4YMGdLA+Ri2xmPHjpm8vLzZHO/q4peUlFRbX19fV1VVNSUhIWE/12Pnzp0zI0aMMJcvXzapqamZoVCoheujTp48eebQoUMmMzMzYdKkSbOCweC58+fPHxk+fPh17tcyV/PPP/+8d9asWSPS0tLOnTlzxowaNcr0/23YsMHccsst9ph5B/t8vis33XSTPfezJSOMfUi/a9euSaIshBvBQruampp0+UJPT4+EMI2NjQ2RSMQKcf369brp06fXIMSx9evXx1horoS4dOlSICMjw6CMFp4J8f6Z0aNHm9ra2swJEyZ0I0QdCznAvXTu+Y4fP77p888/33vbbbcZCbF79+5MT4hVq1YZreHo0aNWiN7e3iCXp7e1tV2ZOHGi3h/gCdI5btw4+9APP/zgS0xMTOVac35+/mEEHHL16tUAC2uPRqPzfv31V2m5Bi2bixcv1g0cOHBYcnLyj3v27Lm6YMECM378+OMaFCtG0egI7hssFHEKLWFrYXx7UlBQYHJyci5g2ACLi2IZe53nU4qKipJRlj2fP39+elZWlsGiPp23trbO4fnt99xzj+GdVi71oDDj7+joqBZ0GhoaDGadyPEeST9gwIDgN998U19aWho9fPiwYQH1aNAMGzasTgMOGjSohOsXEFJCmdOnT9uJ2Us5Evgcuyodv/vuu2bz5s2nsKZOpVGDouzzWLZ3zJgxPhRmEGogFk0HFREpi99M5mzl3MydOzeZ8xFAsx6LFnAckDWwZoHf78/xofXxLMjPYONZ+C40W4YQ+3gogS2TbSybFj+HbbOsiAZuWrp0aV12drbZv3+/ef755zN/+umnVhTRy/1xaK+TZybk5ubWc16xdevWndXV1TNRWiQlJWUnc2YcOHCgE18pamlpibC4A85q0noyyujgGT9w9uFH0RkzZphTp06ZwYMHV+h9revs2bMtCGGAtvyxNvDyyy8nMNB1pDrDFvztt99Ov/nm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') 0 0 repeat; margin:0;padding:0;} .container {position:relative;z-index:1;padding:20px;margin:0 auto;width:700px;} .container:after {content:"";display:block;clear:both;visibility:hidden;height:0;font-size:0;} /* box styles */ .drop-shadow {position:relative;float:left;width:60%;height:200px;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;} /* Rotated Box */ .rotated {-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-ms-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg);} .rotated > :first-child:before {content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;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;} /* box word text */ .words {padding:10px 10px 10px 10px;font-family:verdana,arial,ms sans serif;font-size:90%;color:#000000;text-shadow:0px 1px 0px rgba(0,0,0,0.4);} </style> </head> <body> <div class="container"> <div class="drop-shadow lifted rotated"> <p class="words">HTML5 CSS Rotated Box Shadow Without Images</p> </div> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_145.html">Rotated Box Shadow Without Images</a> page. ] </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library