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

Доброго времени суток уважаемые хабражители. Недавно я нашел очень интересный пример на SCSS и решил реализовать его на LESS да я люблю LESS больше:

Пример работает на 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 только благодаря этой версии.

В другом случае пришлось бы использовать JavaScript подобным образом:

    @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.

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

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

• Massacres That Matter - Part 1 - 'Responsibility To Protect' In Egypt, Libya And Syria


• Massacres That Matter - Part 2 - The Media Response On Egypt, Libya And Syria


• National demonstration: No attack on Syria - Saturday 31 August, 12 noon, Temple Place, London, UK