2

am trying to realize this 3D effect using css3, enter image description here

This is what i've try so far :

    border-radius: 12px;
    box-shadow: 0px 0px 11px #000000;
2
  • 2
    Why don't you just look at the source...? Link the website and we shall give you the exact effect
    – adaam
    Jun 5, 2013 at 21:20
  • Could you post the link? I'm kind of curious on how they did it :p
    – user1949346
    Jun 5, 2013 at 21:24

2 Answers 2

4

To make a shadow like above image you have to use after before CSS3 tag and apply to div.

.effect
{
     position:relative;       
    -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;
}

.effect:before, .effect:after
{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect: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);
}

visit to stupidcodes.com for more example...

enter image description here

1
  • Thanks, this is more than I asked...:)
    – Asme Just
    May 1, 2014 at 0:18
0
.shadow-bottom {
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.