Menu
To add box-shadow to a HTML element, I currently have to do this:
box-shadow: 2px 2px 3px #969696;
-moz-box-shadow: 2px 2px 3px #969696;
-webkit-box-shadow: 2px 2px 3px #969696;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
At this point, it seems to me that this amount of code for a simple gradient is ridiculous at this stage of the web. Not to mention the maintenance time- if I want to change the color, I have to change it four times for each vendor prefix. (This also applies for things like CSS3 Gradients).
What's a better, more optimized way for handling this simply? I'm aware there are large non-standard fixes like CSS3 Pie, but in my experience, they take forever to load and I still have to write code for Firefox & Webkit. Do I need to resort to server-side code to do this? I'm just really frustrated working with redundant awkward-looking code.
304
Up until now, most of the CSS you've learned is fully supported in all browsers. For newer properties, from CSS3 and later, that's not always going to be the case. It's important to check the compatibility of a property to know if you should use it.
You could use any of the following to ease your sorrows:
Dynamic Stylesheet Languages/CSS Extensions
CSS 3 Generators
115
cssSandpaper is what you are looking for.
22
Use Less CSS framework with bootstrap's preboot here http://markdotto.com/bootstrap/
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
