Делаем длинную тень для текста на CSS3
Для того, чтобы сделать тень для текста используется свойство text-shadow:
text-shadow: 1px 1px #972c16;
Но, для того чтобы сделать длинную тень, нужно использовать это свойство так:
.long-shadow {
text-shadow: 0px 0px #972c16,
1px 1px #972c16,
2px 2px #972c16,
3px 3px #972c16,
4px 4px #972c16,
5px 5px #972c16,
/* ... */
34px 34px #972c16,
35px 35px #972c16;
}
Как види-те, регулировать длину тени и её цвет абсолютно не удобно. Поэтому автоматизируем процесс с помощью препроцессора SCSS:
@function longShadow($color, $lenght: 40) {
$val: 0px 0px $color;
@for $i from 1 through $lenght {
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
@return $val;
}
Пример использования:
See the Pen WQxrVX by Evgeniy Pakalo (@wcoder) on CodePen.
