Posts Tagged: code snipplets

SASS gradient bars with reflections

read post
SASS is great! Not only because it makes writing CSS easier, but also because it forces you to be more organized in your design work. If you make glossy progress bars in CSS like ones in the picture, you tend to use at least 3 color shades: two for gradients, one more for border. But with wonderful SASS color functions you immediately begin to think: can I optimize it somehow? Yes, you can! You can use just one color to create both gradient bar with border and its reflection.
In this tutorial I will show you how to create colorful bar charts with just one color variable for each. Well, one and a half :).

CSS3 rounded responsive drop shadows & glows

read post

And by rounded drop shadow we mean this effect:

All kinds of nice visual effects are now added to web pages using pure CSS3, and no images. When it comes to creating box shadows, the most used property is – not surprisingly – the box-shadow. A lot of tutorials are available for achieving warped shadow effect. This is just one of them: http://www.paulund.co.uk/creating-different-css3-box-shadows-effects.

Oddly enough, to create a round drop shadow effect like on the picture above, most front end developers still use images. I guess images are somehow seem faster to slap into the code, especially with that deadline looming. And in most cases images work just fine. Still, there are some very good reasons to stop using images and use CSS3 instead… Read more