#basket
New messages Members Forum rules Search RSS
Page 1 of 11
Forum » For webmasters » HTML / CSS / Javascript » Drop shadows without images
Drop shadows without images
adminDate: Tuesday, 21.06.2011, 12:58 | Message # 1
Group: Verified
Posts: 187
Awards: 8
Status: Offline
Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

Lifted corners


HTML:

Code
<div class="lifted">
           <p>Lifted corners</p>
</div>

CSS:

Code
.lifted p {
           font-size:16px;
           font-weight:bold;
}
       
.lifted {
           position:relative;
           width:40%;
           padding:1em;
           margin:2em 10px 4em;
           background:#fff;
           border-radius:4px;
       -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;
           -moz-border-radius:4px;
       
}
       
.lifted:before,
.lifted:after {
           content:"";
           position:absolute;
           z-index:-2;
           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);
}

Curled corners


HTML:

Code
<div class="curled">
           <p>Curled corners</p>
</div>

CSS:

Code
.curled {
       position:relative;
       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;
       border:1px solid #efefef;
       -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
            border-radius:0 0 120px 120px / 0 0 6px 6px;
}
       
.curled:before,
.curled:after {
       content:"";
       position:absolute;
       z-index:-2;
       bottom:12px;
       left:10px;
       width:50%;
       height:55%;
       max-width:200px;
       -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
          -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
               box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
        -webkit-transform:skew(-8deg) rotate(-3deg);
           -moz-transform:skew(-8deg) rotate(-3deg);
            -ms-transform:skew(-8deg) rotate(-3deg);
             -o-transform:skew(-8deg) rotate(-3deg);
                transform:skew(-8deg) rotate(-3deg);
}
       
.curled:after {
       right:10px;
       left:auto;
       -webkit-transform:skew(8deg) rotate(3deg);
          -moz-transform:skew(8deg) rotate(3deg);
           -ms-transform:skew(8deg) rotate(3deg);
            -o-transform:skew(8deg) rotate(3deg);
               transform:skew(8deg) rotate(3deg);
           }
.curled p {
       font-size:16px;
       font-weight:bold;
}        

Perspective


HTML:

Code
<div class="perspective">
         <p>Perspective</p>
</div>

CSS:

Code
.perspective {
     position:relative;
     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;
}
   
.perspective:before,
.perspective:after {
     content:"";
     position:absolute;
     z-index:-2;
}        
   
.perspective:before {
     left:80px;
     bottom:5px;
     width:50%;
     height:35%;
     max-width:200px;
     -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
        -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
             box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
     -webkit-transform:skew(50deg);
        -moz-transform:skew(50deg);
         -ms-transform:skew(50deg);
          -o-transform:skew(50deg);
             transform:skew(50deg);
     -webkit-transform-origin:0 100%;
        -moz-transform-origin:0 100%;
         -ms-transform-origin:0 100%;
          -o-transform-origin:0 100%;
             transform-origin:0 100%;
}
   
.perspective:after {
     display:none;
}
   
.perspective p {
     font-size:16px;
     font-weight:bold;
}        

Raised box


HTML:

Code
<div class="raised">
         <p>Raised box</p>
</div>

CSS:

Code
.raised {
     position:relative;
     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;
     -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;
        -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;
             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;
}        
   
.raised:before,
.raised:after {
     content:"";
     position:absolute;
     z-index:-2;
}
   
.raised p {
     font-size:16px;
     font-weight:bold;
}        

Single vertical curve


HTML:

Code
<div class="curved-vt-1">
         <p>Single vertical curve</p>
</div>

CSS:

Code
.curved-vt-1 {
     position:relative;
     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;
}
   
.curved-vt-1:before,
.curved-vt-1:after {
     content:"";
     position:absolute;
     z-index:-2;
}
   
.curved-vt-1:before {
     top:10px;
     bottom:10px;
     left:0;
     right:50%;
     -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
        -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
             box-shadow:0 0 15px rgba(0,0,0,0.6);
     -moz-border-radius:10px / 100px;
          border-radius:10px / 100px;
}
   
.curved-vt-1 p {
     font-size:16px;
     font-weight:bold;
}                

Vertical curves


HTML:

Code
<div class="curved-vt-2">
         <p>Vertical curves</p>
</div>

CSS:

Code
.curved-vt-2 {
     position:relative;
     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;
}
   
.curved-vt-2:before,
.curved-vt-2:after {
     content:"";
     position:absolute;
     z-index:-2;
}
   
.curved-vt-2:before {
     top:10px;
     bottom:10px;
     left:0;
     right:0;
     -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
        -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
             box-shadow:0 0 15px rgba(0,0,0,0.6);
     -moz-border-radius:10px / 100px;
          border-radius:10px / 100px;
}
   
.curved-vt-2 p {
     font-size:16px;
     font-weight:bold;
}     

Single horizontal curve


HTML:

Code
<div class="curved-hz-1">
         <p>Single horizontal curve</p>
</div>

CSS:

Code
.curved-hz-1 {
     position:relative;
     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;
}
   
.curved-hz-1:before,
.curved-hz-1:after {
     content:"";
     position:absolute;
     z-index:-2;
}
   
.curved-hz-1:before {
     top:50%;
     bottom:0px;
     left:10px;
     right:10px;
     -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
        -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
             box-shadow:0 0 15px rgba(0,0,0,0.6);
     -moz-border-radius:100px / 10px;
          border-radius:100px / 10px;
}
   
.curved-hz-1 p {
     font-size:16px;
     font-weight:bold;
}             

Horizontal curves


HTML:

Code
<div class="curved-hz-2">
         <p>Horizontal curves</p>
</div>

CSS:

Code
.curved-hz-2 {
     position:relative;
     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;
}
   
.curved-hz-2:before,
.curved-hz-2:after {
     content:"";
     position:absolute;
     z-index:-2;
}
   
.curved-hz-2:before {
     top:0px;
     bottom:0px;
     left:10px;
     right:10px;
     -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
        -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
             box-shadow:0 0 15px rgba(0,0,0,0.6);
     -moz-border-radius:100px / 10px;
          border-radius:100px / 10px;
}
   
.curved-hz-2 p {
     font-size:16px;
     font-weight:bold;
}        

Rotated box


HTML:

Code
<div class="rotated">
         <p>Rotated box</p>
</div>

CSS:

Code
.rotated {
     position:relative;
     width:40%;
     padding:1em;
     margin:2em 10px 4em;
     background:#fff;
     border-radius:4px;
     -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;
     -moz-border-radius:4px;
     -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:0px;
     bottom:0;
     left:0;
     right:0px;
     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;
}      
   
.rotated:before,
.rotated:after {
         content:"";
         position:absolute;
         z-index:-2;
         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);
}
   
.rotated:after {
     right:10px;
     left:auto;
     -webkit-transform:rotate(3deg);
        -moz-transform:rotate(3deg);
         -ms-transform:rotate(3deg);
          -o-transform:rotate(3deg);
             transform:rotate(3deg);
}
   
.rotated p {
         font-size:16px;
         font-weight:bold;
}

 
AnimorphDate: Thursday, 30.06.2011, 14:18 | Message # 2
Group: Verified
Posts: 7
Awards: 0
Status: Offline
Nice smile

Message edited by Animorph - Thursday, 30.06.2011, 14:19
 
adminDate: Thursday, 30.06.2011, 14:24 | Message # 3
Group: Verified
Posts: 187
Awards: 8
Status: Offline
I have another collection of drop shadows. If you are interested I can share them smile
 
AnimorphDate: Thursday, 30.06.2011, 14:26 | Message # 4
Group: Verified
Posts: 7
Awards: 0
Status: Offline
admin, Well yes, that would be great , i'm already glad that i found this i was always wondering how to get correct shadows on different browsers Like IE , its really a bad browser compared with all the other browsers.

But yes i'm Interested smile


Message edited by Animorph - Thursday, 30.06.2011, 14:26
 
adminDate: Thursday, 30.06.2011, 14:30 | Message # 5
Group: Verified
Posts: 187
Awards: 8
Status: Offline
Publish will soon. Come to us again wink
 
AnimorphDate: Saturday, 23.07.2011, 02:18 | Message # 6
Group: Verified
Posts: 7
Awards: 0
Status: Offline
admin, I check all day smile , its only now that i'm logged in , but i will login more often happy

Added (23.07.2011, 02:18)
---------------------------------------------
admin, Any idea how i can make these codes support lower IE versions ?

 
Forum » For webmasters » HTML / CSS / Javascript » Drop shadows without images
Page 1 of 11
Search: