Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make multiple DROP-shadow?

i want make two shadows with dropshadow for the div backgroundimage. This wont work:

-webkit-filter:drop-shadow(3px 3px 5px #000000, 2px 2px 2px #ffcc00); filter:drop-shadow(3px 3px 5px #000000, 2px 2px 2px #ffcc00); 
like image 589
VeloFX Avatar asked Jan 21 '16 18:01

VeloFX


People also ask

How do you make a drop shadow separate layer?

by going under the Layer menu, under Layer Style, and choosing Create Layer. Now the drop shadow is no longer attached to the layer—it's on its own separate layer directly below the original layer (as seen above left). They're no longer linked together in any way, so you can treat it as a completely separate layer.


1 Answers

The filter property accepts multiple filters, so you can repeat drop-shadow:

filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00); 

.gray {    -webkit-filter: drop-shadow(3px 3px 5px #000000);    filter: drop-shadow(3px 3px 5px #000000);  }  .yellow {    -webkit-filter: drop-shadow(2px 2px 2px #ffcc00);    filter: drop-shadow(2px 2px 2px #ffcc00);  }  .gray-yellow {    -webkit-filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);    filter: drop-shadow(3px 3px 5px #000000) drop-shadow(2px 2px 2px #ffcc00);  }
<span class="gray">Hello world</span>  + <span class="yellow">Hello world</span>  = <span class="gray-yellow">Hello world</span>
like image 173
Oriol Avatar answered Sep 22 '22 23:09

Oriol