LESS CSS is possibly the greatest thing to happen to any front end developers job, it handles mixins, parameters and on top of all of that it can be play a big role on the performance of your site with its compiler. To add to the Awesome (yeah, with a capital A) I often involve the compiler within my Capistrano scripts to automate everything during deployment.

But this post isn’t about that, not this time I’m here because I’ve been working on a generic effects.less which contains a set of generic mixins I use so very regularly its a simple include. Download it here!

To use the file just stick this in the top of your LESS file.

@import 'directory/to/effects.less';

And you will have added the below effects to your CSS library instantly:

1. .rounded ([@radius]);
   This adds a border radius to your element with the specified radius
2. .border-radius ([@topleft: 4px, @bottomleft: 4px, @topright: 4px, @bottomright: 4px]);
   This allows you to specify each corners radius seperately
3. .transition ([@transit: all, @speed: 1s, @ease: linear]);
   This watches for transitions and allows you to, cross browser (Bar IE) set the transition methods
4. .boxShadow ([@horiz:0px, @vertic:0px, @blurRad:5px, @color: #000]);
   Adds a shadow to any element capable of having a shadow, this is an OUTER shadow
5. .insetBoxShadow ([@horiz:0px, @vertic:0px, @blurRad:5px, @color: #000]) ;
   Adds a shadow to any element capable of having a shadow, this is an INNER shadow
6. .gradient([@color: rgb(36,36,36), @start: rgb(36,36,36), @stop: rgb(89,89,89)]);
   This applies a very simple bottom/bottom linear gradient to the selected element
7. .perspective ([@amount:800, @left: 50%, @top: 50%]);
   This applies perspective to your element for 3D transforms
8. .perspectiveOrigin ([@left:50%, @top:50%]);
   This is automatically called by .perspective() and sets the origin of the transform
9. .preserve3D ();
   This preserves any 3D aspect attached to the element during transforms

I hope very much that you all enjoy using this file, its sped up my development no end and deserves sharing

If you like it and think I deserve a beer then just send me a buck or two via Paypal to the address in the top of the downloadable file.

happy LESSING!