html - Show box-shadow through transparent object (div) -
i'm working on css3 3d page , want show shadow through transparent div can't work...
can't use span or because needs same object because of jquery animation.
the basic div styling:
#div3{ position:absolute; border:1px solid white; border-radius:10px; transition: 1s; background:transparent; pointer-events: none; }
adittional class position + shadow + transform:
.p3{ top:22.5%; bottom:25%; right:25%; height:55%; width:20%; margin-right:-10%; box-shadow:10px 0px 15px rgba(255,255,255,0.6); transform: perspective( 1000px ) rotatey( 330deg ); -webkit-transform: perspective( 1000px ) rotatey( 330deg ); }
result:
background set transparent won't show box-shadow behind it,
- does box-shadow generates shadow outline of object?
- is there way make visible using css?
i don't know why doesn't work you. box shadow show on transparent background, can see on example.
maybe should try placing shadow on firs class definition element, #div3.
.cartcontainer{ width:150px; height:60px; border-radius:10px; background:transparent; float:left; margin:-10px 0 0 15px; box-shadow:inset 0 0 5px #ffff99, #333 0 0 5px;
}
example: working fiddle
Comments
Post a Comment