am trying to realize this 3D effect using css3, 
This is what i've try so far :
border-radius: 12px;
box-shadow: 0px 0px 11px #000000;
-
2Why don't you just look at the source...? Link the website and we shall give you the exact effectadaam– adaam2013-06-05 21:20:58 +00:00Commented Jun 5, 2013 at 21:20
-
Could you post the link? I'm kind of curious on how they did it :puser1949346– user19493462013-06-05 21:24:35 +00:00Commented Jun 5, 2013 at 21:24
Add a comment
|
2 Answers
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...
answered Apr 17, 2014 at 8:06
1 Comment
Asme Just
Thanks, this is more than I asked...:)
.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;
}
