Shade: long shadows of a trendy flat design on CSS

.shade(@type, @color, @depth, @angle, @long, @fade); 

• type: box / text values ​​- box-shadow / text-shadow
• color: shadow color
• depth: shadow length
• angle: slope angle
• long: boolean, true by default - long flat shadows
• fade: boolean, defaults to false - fade out

 #facebook { .shade(box, #1B2733, 20, 135deg, true, false); .shade(text, #253960, 50, 135deg, true, false); background: #4161A2; &:before { content: "\e000"; } } ... #dribble { .shade(box, #1B2733, 20, 135deg, true, false); .shade(text, #9B2E58, 15, 135deg, false, false); background: #C23B6F; &:before { content: "\e00f"; } } 

LESS 1.5.0

  @shade: ~`(function (depth,x,y, ... thislightness) { var shadow = ""; for(var i=1; i<depth; i++) { if (i != depth) { shadow += i*x+"px "+i*y+"px 0 hsla("+thishue+", "+thissaturation+", "+thislightness - (i*darken)+", "+1 - (i * opacify)+"), "; } else { shadow += i*x+"px "+i*y+"px 0 hsla("+thishue+", "+thissaturation+", "+thislightness - (i*darken)+", "+1 - (i * opacify)+");"; } } return shadow; })("@{depth}", "@{x}", "@{y}", ... "@{thislightness}")`; 

New features in 1.5.0 Beta 1 (2013-09-01)

• Source map support (good post on Habré about it here )
• The ability to register additional options when connecting files @import (inline) "file.css";
• Guard support for multiple selectors
• Added min / max functions
• The new “unifying” syntax for properties is property+: (exactly what is used in shade.less is equivalent to the operand + = in JS):
  
  

   text-shadow+: (@i * @x) (@i * @y) 0 hsla(@hue, @sat, (@lightness - (@i * @darken)), (1 - (@i * @opacify))); 

  
  
• Svg-gradient function
• Many useful fixes

shade.less

 .shade(@type, @color: #3498db, @depth: 20, @angle: 135deg, @long: true, @fade: false) { @ang: (@angle - 90deg); @x: 1.5px * cos(@ang); @y: 1.5px * sin(@ang); .shade(@type, @color, @depth, @x, @y, @long, @fade, (lightness(@color)/@depth)/2, (alpha(@color)/@depth)); } /*  "",     */ .shade(@type, @color, @depth, @x, @y, @long, @fade, @darken, @opacify) when (@long = true) { .shade(@type, @color, @depth, @x, @y, @fade, 0, @opacify); } /*          */ .shade(@type, @color, @depth, @x, @y, @long, @fade, @darken, @opacify) when (@long = false) { .shade(@type, @color, @depth, @x, @y, @fade, @darken, @opacify); // } .shade(@type, @color, @depth, @x, @y, @long, @darken, @opacify) when (@fade = true) { .shade(@type, @color, @depth, @x, @y, @darken, @opacify); } /*   ""       */ .shade(@type, @color, @depth, @x, @y, @long, @darken, @opacify) when (@fade = false) { .shade(@type, @color, @depth, @x, @y, @darken, 0); } /*    HSLA   .        http://habrahabr.ru/qa/46440/ */ .shade(@type, @color, @depth, @x, @y, @darken, @opacify) { @hue: hue(@color); @sat: saturation(@color); @lightness: lightness(@color); .shade-recursive(@type, 1, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness); } .shade-recursive(@type, @i, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness) when (@i < @depth) and (@type = text) { text-shadow+: (@i * @x) (@i * @y) 0 hsla(@hue, @sat, (@lightness - (@i * @darken)), (1 - (@i * @opacify))); .shade-recursive(@type, @i + 1, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness); } .shade-recursive(@type, @i, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness) when (@i < @depth) and (@type = box) { box-shadow+: (@i * @x) (@i * @y) 0 hsla(@hue, @sat, (@lightness - (@i * @darken)), (1 - (@i * @opacify))); .shade-recursive(@type, @i + 1, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness); }