Advanced Search

Different CSS Drop-Shadows

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Shared styles */
  2.  
  3.         .drop-shadow {
  4.             position:relative;
  5.             float:left;
  6.             width:40%;    
  7.             padding:1em; 
  8.             margin:2em 10px 4em; 
  9.             background:#fff;
  10.             -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  11.                -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  12.                     box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  13.         }
  14.  
  15.         .drop-shadow:before,
  16.         .drop-shadow:after {
  17.             content:"";
  18.             position:absolute; 
  19.             z-index:-2;
  20.         }
  21.  
  22.         .drop-shadow p {
  23.             font-size:16px;
  24.             font-weight:bold;
  25.         }
  26.  
  27.         /* Lifted corners */
  28.  
  29.         .lifted {
  30.             -moz-border-radius:4px; 
  31.                  border-radius:4px;
  32.         }
  33.  
  34.         .lifted:before,
  35.         .lifted:after { 
  36.             bottom:15px;
  37.             left:10px;
  38.             width:50%;
  39.             height:20%;
  40.             max-width:300px;
  41.             -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
  42.                -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  43.                     box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  44.             -webkit-transform:rotate(-3deg);    
  45.                -moz-transform:rotate(-3deg);   
  46.                 -ms-transform:rotate(-3deg);   
  47.                  -o-transform:rotate(-3deg);
  48.                     transform:rotate(-3deg);
  49.         }
  50.  
  51.         .lifted:after {
  52.             right:10px; 
  53.             left:auto;
  54.             -webkit-transform:rotate(3deg);   
  55.                -moz-transform:rotate(3deg);  
  56.                 -ms-transform:rotate(3deg);  
  57.                  -o-transform:rotate(3deg);
  58.                     transform:rotate(3deg);
  59.         }
  60.  
  61.         /* Curled corners */
  62.  
  63.         .curled {
  64.             border:1px solid #efefef; 
  65.             -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;    
  66.                  border-radius:0 0 120px 120px / 0 0 6px 6px;
  67.         }
  68.  
  69.         .curled:before,
  70.         .curled:after {
  71.             bottom:12px;
  72.             left:10px;
  73.             width:50%;
  74.             height:55%;
  75.             max-width:200px;
  76.             -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
  77.                -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
  78.                     box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
  79.             -webkit-transform:skew(-8deg) rotate(-3deg);
  80.                -moz-transform:skew(-8deg) rotate(-3deg);
  81.                 -ms-transform:skew(-8deg) rotate(-3deg);
  82.                  -o-transform:skew(-8deg) rotate(-3deg);
  83.                     transform:skew(-8deg) rotate(-3deg);
  84.         } 
  85.  
  86.         .curled:after { 
  87.             right:10px; 
  88.             left:auto;
  89.             -webkit-transform:skew(8deg) rotate(3deg); 
  90.                -moz-transform:skew(8deg) rotate(3deg);     
  91.                 -ms-transform:skew(8deg) rotate(3deg);     
  92.                  -o-transform:skew(8deg) rotate(3deg); 
  93.                     transform:skew(8deg) rotate(3deg);
  94.         }
  95.  
  96.         /* Perspective */
  97.  
  98.         .perspective:before {
  99.             left:80px;
  100.             bottom:5px;
  101.             width:50%;
  102.             height:35%;
  103.             max-width:200px;
  104.             -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  105.                -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  106.                     box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  107.             -webkit-transform:skew(50deg);
  108.                -moz-transform:skew(50deg);
  109.                 -ms-transform:skew(50deg);
  110.                  -o-transform:skew(50deg);
  111.                     transform:skew(50deg);
  112.             -webkit-transform-origin:0 100%;
  113.                -moz-transform-origin:0 100%;
  114.                 -ms-transform-origin:0 100%;
  115.                  -o-transform-origin:0 100%;
  116.                     transform-origin:0 100%;
  117.         }
  118.  
  119.         .perspective:after {
  120.             display:none;
  121.         }
  122.  
  123.         /* Raised shadow - no pseudo-elements needed */
  124.  
  125.         .raised {
  126.             -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  127.                -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  128.                     box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  129.         }
  130.  
  131.         /* Curved shadows */
  132.  
  133.         .curved:before {
  134.             top:10px;
  135.             bottom:10px;
  136.             left:0;
  137.             right:50%;
  138.             -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
  139.             -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
  140.             box-shadow:0 0 15px rgba(0,0,0,0.6);
  141.             -moz-border-radius:10px / 100px;
  142.             border-radius:10px / 100px;
  143.         }
  144.  
  145.         .curved-vt-2:before {
  146.             right:0;
  147.         }
  148.  
  149.         .curved-hz-1:before {
  150.             top:50%;
  151.             bottom:0;
  152.             left:10px;
  153.             right:10px;
  154.             -moz-border-radius:100px / 10px;
  155.             border-radius:100px / 10px;
  156.         }
  157.  
  158.         .curved-hz-2:before {
  159.             top:0;
  160.             bottom:0;
  161.             left:10px;
  162.             right:10px;
  163.             -moz-border-radius:100px / 10px;
  164.             border-radius:100px / 10px;
  165.         }
  166.  
  167.         /* Rotated box */
  168.  
  169.         .rotated {
  170.             -webkit-box-shadow:none;
  171.                -moz-box-shadow:none;
  172.                     box-shadow:none;
  173.             -webkit-transform:rotate(-3deg);    
  174.                -moz-transform:rotate(-3deg);   
  175.                 -ms-transform:rotate(-3deg);
  176.                  -o-transform:rotate(-3deg);
  177.                     transform:rotate(-3deg);
  178.         }
  179.  
  180.         .rotated > :first-child:before {
  181.             content:"";
  182.             position:absolute;
  183.             z-index:-1;
  184.             top:0;
  185.             bottom:0;
  186.             left:0;
  187.             right:0;
  188.             background:#fff;
  189.             -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  190.                -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  191.                     box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  192.         }
  193.  
  194. /* HTML START */
  195.  
  196. <div class="drop-shadow lifted">
  197.             <p>Lifted corners</p>
  198.         </div>
  199.  
  200.         <div class="drop-shadow curled">
  201.  
  202.             <p>Curled corners</p>
  203.         </div>
  204.  
  205.         <div class="drop-shadow perspective">
  206.             <p>Perspective</p>
  207.         </div>
  208.  
  209.         <div class="drop-shadow raised">
  210.             <p>Raised box</p>
  211.  
  212.         </div>
  213.  
  214.         <div class="drop-shadow curved curved-vt-1">
  215.             <p>Single vertical curve</p>
  216.         </div>
  217.  
  218.         <div class="drop-shadow curved curved-vt-2">
  219.             <p>Vertical curves</p>
  220.         </div>
  221.  
  222.  
  223.         <div class="drop-shadow curved curved-hz-1">
  224.             <p>Single horizontal curve</p>
  225.         </div>
  226.  
  227.         <div class="drop-shadow curved curved-hz-2">
  228.             <p>Horizontal curves</p>
  229.         </div>
  230.  
  231.  
  232.         <div class="drop-shadow lifted rotated">
  233.  
  234.             <p>Rotated box</p>
  235.         </div>
  236.  
  237. /* HTML END */

URL: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.