LESS CSS effects bootstrap

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!