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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -