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-image();).
The Text Image Sass mixin helps you clip the background image of a selected element to the shape of its foreground text.
Arguments
| Name | Type | Description |
|---|---|---|
$image | string (quoted), function | The URL of the clipping image. A value that already is an image, var(), url(), image-set() or a gradient, is written as it is rather than wrapped in url(). A list, a number, a colour or a boolean is refused. |
Important: Pass the URL of the image in quotation marks. A var(), url(), image-set() or gradient is written as it is, without quotes.
Examples
Simply call the mixin inside the selector and pass the URL of an image.
<h2 class="element">Text Image is Awesome!</h2>.element{
@include text-image("/images/backgrounds/05.jpg");
}.element {
background-image: url("/images/backgrounds/05.jpg");
background-size: cover;
background-position: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}The $image argument is optional. This is especially useful when the image is loaded from the markup, as in the example below.
<h2 class="element" style="background-image: url(/images/backgrounds/02.jpg)">Text Image is Awesome!</h2>.element{
@include text-image;
}.element {
background-size: cover;
background-position: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}What it refuses
An image that is not one path stops the build. Until 2.3.1 anything went into url(), and here that matters more than elsewhere: the mixin makes the text transparent, so an image that does not load leaves no visible text at all. Measured in Chrome 152, a list such as url(16 9) is dropped.
.element {
@include text-image(16 9);
}Error: `16 9` is not a valid $image for `text-image`: it is a list where one image is meant, and a browser drops `url()` with a list in it. Pass one path as a string, such as `"/img/hero.png"`.