Shade: длинные тени трендового плоского дизайна на CSS

Пример работает на LESS 1.5.0, поэтому нет возможности разместить его на codepen или jsfiddle.

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

• type: значения box/text — box-shadow/text-shadow
• color: цвет тени
• depth:длина тени
• angle: угол наклона
• long: boolean, по умолчанию true — длинные Flat тени
• fade: boolean, по умолчания false — затухание

#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.less написан на «чистом» LESS только благодаря этой версии.

    @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}")`; 

Новые возможности в 1.5.0 Beta 1 (2013-09-01)

• Поддержка source map (хороший пост на Хабре про это здесь)
• Возможность прописывать дополнительные опции при подключении файлов @import (inline) "file.css";
• Поддержка Guard для множества селекторов
• Добавлены функции min/max
• Новый «объединяющий» синтаксис для свойств — property+: (как раз то, что используется в shade.less, эквивалентно операнду += в JS):

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

• Функция svg-gradient
• Множество полезных фиксов

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); }          

Github.

Спасибо всем за внимание и красивых вам плоских теней.