As part of our Pixie development stack we use SASS because it is much more manageable than standard css for supporting interesting styles across browsers.
Recently, we decided to incorporate a glassy box-shadow into most of our gallery pages.
Opera’s docs were very clear about how to set up this style. However, you’ll notice, as with a number of other css3 features, you need to include a ton of css (4 rules each made up of 5 shadows) to get this to work well across browsers.
css_selector {
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 1px rgba(255, 255, 255, 0.7), inset 0 10px rgba(255, 255, 255, 0.8), inset 0 5px 10px transparentize(#fff, 0.75), inset 0 -5px 10px rgba(255, 255, 255, 0.7);
-moz-box-shadow: 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 1px rgba(255, 255, 255, 0.7), inset 0 10px rgba(255, 255, 255, 0.8), inset 0 5px 10px transparentize(#fff, 0.75), inset 0 -5px 10px rgba(255, 255, 255, 0.7);
-o-box-shadow: 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 1px rgba(255, 255, 255, 0.7), inset 0 10px rgba(255, 255, 255, 0.8), inset 0 5px 10px transparentize(#fff, 0.75), inset 0 -5px 10px rgba(255, 255, 255, 0.7);
-webkit-box-shadow: 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 1px rgba(255, 255, 255, 0.7), inset 0 10px rgba(255, 255, 255, 0.8), inset 0 5px 10px rgba(255, 255, 255, 0.75), inset 0 -5px 10px rgba(255, 255, 255, 0.7);
}
The awesome part about SASS is that I can package all this up into a parameterizable mixin that I can include in one line wherever I want. In our case we don’t have a need for parameters yet, so our mixin looks like this
=glass()
box-shadow: 0 2px 4px transparentize(#fff, 0.5), inset 0 1px transparentize(#fff, 0.7), inset 0 10px transparentize(#fff, 0.8), inset 0 5px 10px transparentize(#fff, 0.75), inset 0 -5px 10px transparentize(#000, 0.7)
-moz-box-shadow: 0 2px 4px transparentize(#fff, 0.5), inset 0 1px transparentize(#fff, 0.7), inset 0 10px transparentize(#fff, 0.8), inset 0 5px 10px transparentize(#fff, 0.75), inset 0 -5px 10px transparentize(#000, 0.7)
-o-box-shadow: 0 2px 4px transparentize(#fff, 0.5), inset 0 1px transparentize(#fff, 0.7), inset 0 10px transparentize(#fff, 0.8), inset 0 5px 10px transparentize(#fff, 0.75), inset 0 -5px 10px transparentize(#000, 0.7)
-webkit-box-shadow: 0 2px 4px transparentize(#fff, 0.5), inset 0 1px transparentize(#fff, 0.7), inset 0 10px transparentize(#fff, 0.8), inset 0 5px 10px transparentize(#fff, 0.75), inset 0 -5px 10px transparentize(#000, 0.7)
Now, instead of writing that huge mess every time we want something to look shiny, we get to do this
css_selector
+glass
That’s it. And if we want to change the way our glass style looks, we only have to edit the mixin definition and the whole site is updated with the new styles.
I highly recommend SASS if you write any amount of css.