Drop shadows without images

New messages Members Forum rules Search RSS

Page 1 of 1
1

admin

Date: 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;
}

Author's website

Animorph

Date: Thursday, 30.06.2011, 14:18 | Message # 2

Group: Verified

Posts: 7

Awards: 0

Status: Offline

Nice

Message edited by Animorph - Thursday, 30.06.2011, 14:19

admin

Date: 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

Animorph

Date: 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

admin

Date: Thursday, 30.06.2011, 14:30 | Message # 5

Group: Verified

Posts: 187

Awards: 8

Status: Offline

Publish will soon. Come to us again wink

Animorph

Date: 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 ?

Drop shadows without images

Page 1 of 1
1