Gerillass
v2.1.0Type: Mixin
@include text-stroke();
* You can call mixins with or without the gls- namespace (e.g. @include gls-text-stroke();).
The Text Stroke Sass mixin helps you add a stroke to a text element and style it very easily.
Arguments
| Name | Type | Description |
|---|---|---|
$color | color | Sets the color of the text. The default value is transparent. |
$stroke-color | color | Sets the stroke color of the text. The default value is black. |
$fallback-color | color | This option is for browsers that do not support text stroke. It prevents the text from disappearing entirely in those browsers. The default value is black. |
$stroke-width | number (with unit) | Sets the width of the stroke. You can also pass the string values thin, medium, and thick. |
Design Tip: When your stroke color is dark, try making the fallback color the same, so the text looks more consistent with the rest of the design.
Examples
Simply call the mixin without passing any arguments.
.element {
@include text-stroke;
}.element {
color: black;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
}Result
Now pass some arguments to make the text look sexier!
.element {
@include text-stroke(
$color: azure,
$stroke-color: cadetblue,
$fallback-color: cadetblue,
$stroke-width: 1px
);
}.element {
color: cadetblue;
-webkit-text-fill-color: azure;
-webkit-text-stroke-color: cadetblue;
-webkit-text-stroke-width: 1px;
}Result