Gerillass
v2.1.0Type: Mixin
@include text-shadow();
* You can call mixins with or without the gls- namespace (e.g. @include gls-text-shadow();).
The Text Shadow Sass mixin helps you add shadows to text elements. It accepts a comma separated list of shadows, or a single shadow value that can optionally be multiplied. It provides an easy one-line method.
Arguments
| Name | Type | Description |
|---|---|---|
$direction | string | Sets the direction of the shadow. Accepts top, top-right, right, bottom-right, bottom, bottom-left, left, top-left. |
$color | color value | Sets the color of the shadow. |
$size | number (with unit) | Sets how far the shadow will be from the text. When used with $fill, it also determines how many times the shadow will be multiplied. |
$blur | number (with unit) | Optional. Sets the blur value of the shadow. The default value is null. |
$fill | boolean | Makes the shadow fill the gap between the text and the shadow. It is optional and should always come last. The default value is false. |
Design Tip: You can add multi layered shadows to create fancier effects. Just separate each shadow layer with a comma. See the [examples](#examples) for more.
Examples
Let's start with some basic shadow arrangements.
.element{
@include text-shadow(bottom rgba(black, 0.3) 6px);
}.element {
text-shadow: 0 6px rgba(0, 0, 0, 0.3);
}Result
Now, let's add some $blur to the shadow.
.element{
@include text-shadow(bottom rgba(black, 0.3) 6px 4px);
}.element {
text-shadow: 0 6px 4px rgba(0, 0, 0, 0.3);
}Result
Now, to understand what $fill is for, let's try once more without the $fill argument and examine the CSS output.
.element{
@include text-shadow(bottom #5bc0bb 30px);
}.element {
text-shadow: 0 30px #5bc0bb;
}Result
Now let's pass the true value at the end of the argument list and watch the CSS output carefully, because this is where the magic starts.
.element{
@include text-shadow(bottom #5bc0bb 30px true);
}.element {
text-shadow: 0 1px #5bc0bb, 0 2px #5bc0bb, 0 3px #5bc0bb, 0 4px #5bc0bb, 0 5px #5bc0bb, 0 6px #5bc0bb, 0 7px #5bc0bb, 0 8px #5bc0bb, 0 9px #5bc0bb, 0 10px #5bc0bb, 0 11px #5bc0bb, 0 12px #5bc0bb, 0 13px #5bc0bb, 0 14px #5bc0bb, 0 15px #5bc0bb, 0 16px #5bc0bb, 0 17px #5bc0bb, 0 18px #5bc0bb, 0 19px #5bc0bb, 0 20px #5bc0bb, 0 21px #5bc0bb, 0 22px #5bc0bb, 0 23px #5bc0bb, 0 24px #5bc0bb, 0 25px #5bc0bb, 0 26px #5bc0bb, 0 27px #5bc0bb, 0 28px #5bc0bb, 0 29px #5bc0bb, 0 30px #5bc0bb;
}Result
You can add an alpha value to the colors to soften the shadow.
.element{
@include text-shadow(bottom rgba(#5bc0bb, 0.04) 30px true);
}.element {
text-shadow: 0 1px rgba(91, 192, 187, 0.04), 0 2px rgba(91, 192, 187, 0.04), 0 3px rgba(91, 192, 187, 0.04), 0 4px rgba(91, 192, 187, 0.04), 0 5px rgba(91, 192, 187, 0.04), 0 6px rgba(91, 192, 187, 0.04), 0 7px rgba(91, 192, 187, 0.04), 0 8px rgba(91, 192, 187, 0.04), 0 9px rgba(91, 192, 187, 0.04), 0 10px rgba(91, 192, 187, 0.04), 0 11px rgba(91, 192, 187, 0.04), 0 12px rgba(91, 192, 187, 0.04), 0 13px rgba(91, 192, 187, 0.04), 0 14px rgba(91, 192, 187, 0.04), 0 15px rgba(91, 192, 187, 0.04), 0 16px rgba(91, 192, 187, 0.04), 0 17px rgba(91, 192, 187, 0.04), 0 18px rgba(91, 192, 187, 0.04), 0 19px rgba(91, 192, 187, 0.04), 0 20px rgba(91, 192, 187, 0.04), 0 21px rgba(91, 192, 187, 0.04), 0 22px rgba(91, 192, 187, 0.04), 0 23px rgba(91, 192, 187, 0.04), 0 24px rgba(91, 192, 187, 0.04), 0 25px rgba(91, 192, 187, 0.04), 0 26px rgba(91, 192, 187, 0.04), 0 27px rgba(91, 192, 187, 0.04), 0 28px rgba(91, 192, 187, 0.04), 0 29px rgba(91, 192, 187, 0.04), 0 30px rgba(91, 192, 187, 0.04);
}Result
Now let's add multiple shadow values with different $direction, $color, and $size values.
.element{
@include text-shadow(
top yellow 5px,
right lightseagreen 15px,
bottom orange 5px,
left pink 15px,
);
}.element {
text-shadow: 0 -5px yellow, 15px 0 lightseagreen, 0 5px orange, -15px 0 pink;
}Result
Let's add an alpha value to the colors and set the $fill option to true to make it look sexier!
.element{
@include text-shadow(
top rgba(yellow, 0.1) 10px true,
bottom rgba(orange, 0.1) 10px true,
left rgba(pink, 0.1) 10px true,
right rgba(lightseagreen, 0.1) 10px true
);
}.element {
text-shadow: 0 -1px rgba(255, 255, 0, 0.1), 0 -2px rgba(255, 255, 0, 0.1), 0 -3px rgba(255, 255, 0, 0.1), 0 -4px rgba(255, 255, 0, 0.1), 0 -5px rgba(255, 255, 0, 0.1), 0 -6px rgba(255, 255, 0, 0.1), 0 -7px rgba(255, 255, 0, 0.1), 0 -8px rgba(255, 255, 0, 0.1), 0 -9px rgba(255, 255, 0, 0.1), 0 -10px rgba(255, 255, 0, 0.1), 0 1px rgba(255, 165, 0, 0.1), 0 2px rgba(255, 165, 0, 0.1), 0 3px rgba(255, 165, 0, 0.1), 0 4px rgba(255, 165, 0, 0.1), 0 5px rgba(255, 165, 0, 0.1), 0 6px rgba(255, 165, 0, 0.1), 0 7px rgba(255, 165, 0, 0.1), 0 8px rgba(255, 165, 0, 0.1), 0 9px rgba(255, 165, 0, 0.1), 0 10px rgba(255, 165, 0, 0.1), -1px 0 rgba(255, 192, 203, 0.1), -2px 0 rgba(255, 192, 203, 0.1), -3px 0 rgba(255, 192, 203, 0.1), -4px 0 rgba(255, 192, 203, 0.1), -5px 0 rgba(255, 192, 203, 0.1), -6px 0 rgba(255, 192, 203, 0.1), -7px 0 rgba(255, 192, 203, 0.1), -8px 0 rgba(255, 192, 203, 0.1), -9px 0 rgba(255, 192, 203, 0.1), -10px 0 rgba(255, 192, 203, 0.1), 1px 0 rgba(32, 178, 170, 0.1), 2px 0 rgba(32, 178, 170, 0.1), 3px 0 rgba(32, 178, 170, 0.1), 4px 0 rgba(32, 178, 170, 0.1), 5px 0 rgba(32, 178, 170, 0.1), 6px 0 rgba(32, 178, 170, 0.1), 7px 0 rgba(32, 178, 170, 0.1), 8px 0 rgba(32, 178, 170, 0.1), 9px 0 rgba(32, 178, 170, 0.1), 10px 0 rgba(32, 178, 170, 0.1);
}Result
You can use corners as well.
.element{
color: pink;
@include text-shadow(top-left crimson 15px true);
}.element {
color: pink;
text-shadow: -1px -1px crimson, -2px -2px crimson, -3px -3px crimson, -4px -4px crimson, -5px -5px crimson, -6px -6px crimson, -7px -7px crimson, -8px -8px crimson, -9px -9px crimson, -10px -10px crimson, -11px -11px crimson, -12px -12px crimson, -13px -13px crimson, -14px -14px crimson, -15px -15px crimson;
}Result
Here's a good example of how easily you can create artistic effects with Gerillass. Just hover over the text below and click on it to see the effect!
.element{
transition: .3s;
@include text-shadow(left gold 3px true);
&:hover{
@include text-shadow(right gold 8px true);
}
&:active{
@include text-shadow(right deepskyblue 8px true);
}
}.element {
transition: 0.3s;
text-shadow: -1px 0 gold, -2px 0 gold, -3px 0 gold;
}
.element:hover {
text-shadow: 1px 0 gold, 2px 0 gold, 3px 0 gold, 4px 0 gold, 5px 0 gold, 6px 0 gold, 7px 0 gold, 8px 0 gold;
}
.element:active {
text-shadow: 1px 0 deepskyblue, 2px 0 deepskyblue, 3px 0 deepskyblue, 4px 0 deepskyblue, 5px 0 deepskyblue, 6px 0 deepskyblue, 7px 0 deepskyblue, 8px 0 deepskyblue;
}Result
Examples are endless. Just use your imagination.