3D shadows and individual transparency

(Wolfgang Wunderlich) #1

I would like to make 3D shadows and request the possibility to adjust the transparency of shadow, border and the object individually.


Thanks for the request. Here’s how you can do that with the :before and :after pseudo classes: http://www.paulund.co.uk/playground/demo/css_box_shadow/ (this can be set on a Hype element using the class field in the identity inspector). This technique creates elements with individual shadows similar to your image:

.effect2:before, .effect2:after
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;