Is there a more efficient way to add box-shadow to an HTML element? Currently, I have to include the following code:
box-shadow: 2px 2px 3px #969696;<br>
-moz-box-shadow: 2px 2px 3px #969696;<br>
-webkit-box-shadow: 2px 2px 3px #969696;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
It seems excessive to write this much code for a simple gradient in today's web environment. Additionally, maintaining it becomes tedious - changing the color requires updating it four times for each vendor prefix (this also applies to CSS3 Gradients).
Are there better and more optimized ways to handle this issue simply? While I'm aware of non-standard fixes like CSS3 Pie, they tend to take a long time to load and still require additional code for Firefox & Webkit browsers. Do I need to use server-side code to solve this problem? Dealing with redundant and cumbersome code is becoming frustrating.