- PVSM.RU - https://www.pvsm.ru -
Доброго времени суток уважаемые читатели. Недавно я нашел очень интересный пример на SCSS [1] и решил реализовать его на LESS да я люблю LESS больше:
[2]
Пример работает на LESS 1.5.0, поэтому нет возможности разместить его на codepen или jsfiddle.
.shade(@type, @color, @depth, @angle, @long, @fade);
#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";
}
}
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}")`;
@import (inline) "file.css";
property+:
(как раз то, что используется в shade.less, эквивалентно операнду += в JS):
text-shadow+: (@i * @x) (@i * @y) 0 hsla(@hue, @sat, (@lightness - (@i * @darken)), (1 - (@i * @opacify)));
.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 [5].
Спасибо всем за внимание и красивых вам плоских теней.
Автор: ilusha_sergeevich
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/less/43061
Ссылки в тексте:
[1] пример на SCSS: http://codepen.io/hugo/pen/xzjGB
[2] Image: http://netcribe.com/MojoShade/
[3] 1.5.0 Beta 1 (2013-09-01): https://github.com/less/less.js/blob/master/CHANGELOG.md
[4] здесь: http://habrahabr.ru/post/178743/
[5] Github: https://github.com/Pestov/Shade
[6] Источник: http://habrahabr.ru/post/193300/
Нажмите здесь для печати.