Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-background-dots();).
The Background Dots Sass mixin allows you to easily create a stylish dotted background pattern (also known as polka dots).
Arguments
| Name | Type | Description |
|---|---|---|
$color | list | The color or colors of the dots. Accepts no more than two color values. By default there is only one color, a translucent black. |
$size (1em) | number (with unit) | The size of the dots. The default value is 1em. |
$gutter ($size * 5) | number (with unit) | The size of the space between the dots. The default value is $size * 5, which means 5em. |
$diagonal (true) | boolean | This option lets you set the line order of the dots. The default value is true. |
$image | string (quoted) | Accepts the URL of an image. This option helps you add an image underneath the dots to create more stylish design elements. |
Using two separate color values together is only possible when the $diagonal option is true. See the examples for more.
Examples
Simply call the mixin without passing any arguments.
.element{
@include background-dots;
}.element {
background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1em, transparent 0), radial-gradient(rgba(0, 0, 0, 0.1) 1em, transparent 0);
background-position: 2.5em 2.5em, 10em 10em;
background-size: 5em 5em;
background-repeat: repeat;
}Let's play with the $color and $size arguments.
.element{
@include background-dots(
$color: pink,
$size: 10px
);
}.element {
background-image: radial-gradient(pink 10px, transparent 0), radial-gradient(pink 10px, transparent 0);
background-position: 25px 25px, 100px 100px;
background-size: 50px 50px;
background-repeat: repeat;
}You can increase or decrease the space between the dots. Compare the result with example 2.
.element{
@include background-dots(
$color: pink,
$size: 10px,
$gutter: 70px
);
}.element {
background-image: radial-gradient(pink 10px, transparent 0), radial-gradient(pink 10px, transparent 0);
background-position: 35px 35px, 140px 140px;
background-size: 70px 70px;
background-repeat: repeat;
}You can add a second color value as well. Note that the second color only works when the $diagonal argument is true, and the two colors must be separated by a space.
.element{
@include background-dots(
$color: red orange,
$size: 10px
);
}.element {
background-image: radial-gradient(red 10px, transparent 0), radial-gradient(orange 10px, transparent 0);
background-position: 25px 25px, 100px 100px;
background-size: 50px 50px;
background-repeat: repeat;
}Set the $diagonal argument to false to make the dots look more linear.
.element{
@include background-dots(
$color: red,
$size: 4px,
$diagonal: false
);
}.element {
background-image: radial-gradient(red 4px, transparent 0);
background-position: 10px 10px;
background-size: 20px 20px;
background-repeat: repeat;
}Now let's add an image and see how sexy this design piece will look!
.element{
@include background-dots(
$color: rgba(black, 0.1) rgba(green, 0.2),
$size: 4px,
$gutter: 20px,
$image: "/images/backgrounds/03.jpg"
);
}.element {
background-image: radial-gradient(rgba(0, 0, 0, 0.1) 4px, transparent 0), radial-gradient(rgba(0, 128, 0, 0.2) 4px, transparent 0);
background-position: 10px 10px, 40px 40px;
background-size: 20px 20px;
background-repeat: repeat;
position: relative;
}
.element::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url(/images/backgrounds/03.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: -1;
}