Gerillass
v2.1.0Type: Mixin
@include background-stripes();
* You can call mixins with or without the gls- namespace (e.g. @include gls-background-stripes();).
The Background Stripes Sass mixin allows you to create stylish and colorful background stripes.
Arguments
| Name | Type | Description |
|---|---|---|
$color | list | The color or colors of the stripes. By default there is only one color, a translucent black. Accepts one or more color values to create multiple color stops. |
$thickness | number<br/>(with unit) | The thickness of the stripes. The default value is 1em. |
$rotation | number<br/>(with deg unit) | The rotation of the stripes. The default value is -45deg. This option lets you create diagonal or straight stripes very easily. |
$image | string<br/>(quoted) | Accepts the URL of an image. This option helps you add an image underneath the stripes to create more stylish design elements. |
Multiple color values must be separated by a space (e.g. $color: red blue green).
Examples
Simply call the mixin without passing any arguments.
.element{
@include background-stripes();
}.element {
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 1em, transparent 1em, transparent 2em);
}Result
Let's pass a $color value to it!
.element{
@include background-stripes(
$color: pink
);
}.element {
background-image: repeating-linear-gradient(-45deg, pink 0, pink 1em, transparent 1em, transparent 2em);
}Result
Now let's add more colors and change the $thickness and $rotation values. Important: Don't forget that multiple color values must be separated by a space!
.element{
@include background-stripes(
$color: #FFD393 #FF974F #F54F29,
$thickness: 3em,
$rotation: 90deg
);
}.element {
background-image: repeating-linear-gradient(90deg, #FFD393 0em, #FFD393 3em, #FF974F 3em, #FF974F 6em, #F54F29 6em, #F54F29 9em);
}Result
Add an image to make your design look more alive! Just do not forget to use quotes when you pass the URL of an image.
.element{
@include background-stripes(
$color: rgba(blue, 0.4),
$thickness: 3px,
$rotation: 45deg,
$image: "/images/backgrounds/05.jpg"
);
}.element {
background-image: repeating-linear-gradient(45deg, rgba(0, 0, 255, 0.4) 0, rgba(0, 0, 255, 0.4) 3px, transparent 3px, transparent 6px), url(/images/backgrounds/05.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}Result
You can create an old-fashioned TV screen effect as well.
.element{
@include background-stripes(
$color: black,
$thickness: 1px,
$rotation: 180deg,
$image: "/images/backgrounds/03.jpg"
);
}.element {
background-image: repeating-linear-gradient(180deg, black 0, black 1px, transparent 1px, transparent 2px), url(/images/backgrounds/03.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}Result