Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0* 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.
The first three arguments ($direction, $color, $size) are required, and they must be given in that order: @include text-shadow(bottom red 20px). You cannot swap these three around.
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.
Important: If you use the $fill argument, it should always come last.
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);
}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);
}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;
}It repeats the shadow one step at a time, up to the $size value, to fill the gap between the actual text and the end point of the shadow.
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;
}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);
}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;
}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);
}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;
}As long as you don't overdo it, the Text Shadow mixin can create marvelous effects.
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;
}Examples are endless. Just use your imagination.