This page (revision-1) was last changed on 2018-10-21 07:49 by UnknownAuthor

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note

Page References

Incoming links Outgoing links
CSS Background Patterns...nobody
CSSBackgroundPatterns

Version management

Difference between version and

At line 1 added 283 lines
%%add-css
/*Credit http://bennettfeely.com/gradients/ */
.bg-pattern-1 {
background:
radial-gradient(
circle at bottom left,
transparent 0,
transparent 2em,
beige 2em,
beige 4em,
transparent 4em,
transparent 6em,
khaki 6em,
khaki 8em,
transparent 8em,
transparent 10em
),
radial-gradient(
circle at top right,
transparent 0,
transparent 2em,
beige 2em,
beige 4em,
transparent 4em,
transparent 6em,
khaki 6em,
khaki 8em,
transparent 8em,
transparent 10em
),
radial-gradient(
circle at top left,
transparent 0,
transparent 2em,
navajowhite 2em,
navajowhite 4em,
transparent 4em,
transparent 6em,
peachpuff 6em,
peachpuff 8em,
transparent 8em,
transparent 10em
),
radial-gradient(
circle at bottom right,
transparent 0,
transparent 2em,
palegoldenrod 2em,
palegoldenrod 4em,
transparent 4em,
transparent 6em,
peachpuff 6em,
peachpuff 8em,
transparent 8em,
transparent 10em
), blanchedalmond;
background-blend-mode: multiply;
background-size: 10em 10em;
background-position: 0 0, 0 0, 5em 5em, 5em 5em;
}
.bg-pattern-2 {
color:white;
background:
radial-gradient(
at bottom right,
dodgerblue 0,
dodgerblue 1em,
lightskyblue 1em,
lightskyblue 2em,
deepskyblue 2em,
deepskyblue 3em,
gainsboro 3em,
gainsboro 4em,
lightsteelblue 4em,
lightsteelblue 5em,
deepskyblue 5em,
deepskyblue 6em,
lightskyblue 6em,
lightskyblue 7em,
transparent 7em,
transparent 8em
),
radial-gradient(
at top left,
transparent 0,
transparent 1em,
lightskyblue 1em,
lightskyblue 2em,
deepskyblue 2em,
deepskyblue 3em,
lightsteelblue 3em,
lightsteelblue 4em,
gainsboro 4em,
gainsboro 5em,
deepskyblue 5em,
deepskyblue 6em,
skyblue 6em,
skyblue 7em,
dodgerblue 7em,
dodgerblue 8em,
transparent 8em,
transparent 20em
),
radial-gradient(
circle at center bottom,
coral, darkslateblue
);
background-blend-mode: overlay;
background-size:
8em 8em, 8em 8em, cover;
}
.bg-pattern-3{
background:
repeating-linear-gradient(
to top left,
beige 0,
beige 2em,
moccasin 2em,
moccasin 4em,
wheat 4em,
wheat 6em
),
repeating-linear-gradient(
to left,
white 0,
white 2em,
wheat 2em,
wheat 4em,
beige 4em,
beige 6em
), white;
background-blend-mode: multiply;
}
.bg-pattern-4 {
background:
repeating-linear-gradient(
45deg,
transparent,
transparent 1em,
moccasin 0,
moccasin 2em,
transparent 0,
transparent 3em,
powderblue 0,
powderblue 4em,
transparent 0,
transparent 5em,
lavender 0,
lavender 6em,
transparent 0,
transparent 7em,
beige 0,
beige 8em
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 1em,
khaki 0,
khaki 2em,
transparent 0,
transparent 3em,
beige 0,
beige 4em,
transparent 0,
transparent 5em,
peachpuff 0,
peachpuff 6em
), whitesmoke;
background-blend-mode: multiply;
}
.bg-pattern-5{
background:
linear-gradient(limegreen,transparent),
linear-gradient(90deg,skyblue,transparent),
linear-gradient(-90deg,coral,transparent);
background-blend-mode: screen;
}
.bg-polka {
background-image:
-webkit-gradient(radial, 30 30, 0, 30 30, 45,
color-stop(0.4, rgba(255,255,255,0.5)),
color-stop(0.44, rgba(255,255,255,0))
),
-webkit-gradient(radial, 30 30, 0, 30 30, 45,
color-stop(0.4, rgba(255,255,255,0.5)),
color-stop(0.44, rgba(255,255,255,0))
);
background-image:
-webkit-radial-gradient(30% 30%,circle closest-side,
rgba(255,255,225,0.5) 40%,
rgba(255,255,225,0) 44%,
transparent 100%),
-webkit-radial-gradient(30% 30%,circle closest-side,
rgba(255,255,225,0.5) 40%,
rgba(255,255,225,0) 44%,
transparent 100%);
background-image:
-moz-radial-gradient(30% 30%,circle closest-side,
rgba(255,255,225,0.5) 40%,
rgba(255,255,225,0) 44%,
transparent 100%),
-moz-radial-gradient(30% 30%,circle closest-side,
rgba(255,255,225,0.5) 40%,
rgba(255,255,225,0) 44%,
transparent 100%);
background-image:
-ms-radial-gradient(30% 30%,circle closest-side,
rgba(255,255,225,0.5) 40%,
rgba(255,255,225,0) 44%,
transparent 100%),
-ms-radial-gradient(30% 30%,circle closest-side,
rgba(255,255,225,0.5) 40%,
rgba(255,255,225,0) 44%,
transparent 100%);
background-image:
-o-radial-gradient(30% 30%,circle closest-side,
rgba(255,255,225,0.5) 40%,
rgba(255,255,225,0) 44%,
transparent 100%),
-o-radial-gradient(30% 30%,circle closest-side,
rgba(255,255,225,0.5) 40%,
rgba(255,255,225,0) 44%,
transparent 100%);
background-image:
radial-gradient(30% 30%,circle closest-side,
rgba(255,255,225,0.5) 40%,
rgba(255,255,225,0) 44%,
transparent 100%),
radial-gradient(30% 30%,circle closest-side,
rgba(255,255,225,0.5) 40%,
rgba(255,255,225,0) 44%,
transparent 100%);
/*ff 3.6*/-moz-background-size: 100px 100px;
background-size: 100px 100px;
background-position: 0 0, 50px 50px;
}
.bg-small-polka {
background-image:
-webkit-gradient(radial, 20 20, 0, 20 20, 20,
color-stop(0.4, rgba(255,255,255,0.5)),
color-stop(0.44, rgba(255,255,255,0))
),
-webkit-gradient(radial, 20 20, 0, 20 20, 20,
color-stop(0.4, rgba(255,255,255,0.5)),
color-stop(0.44, rgba(255,255,255,0))
);
/*ff 3.6*/-moz-background-size: 50px 50px;
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
}
.bg-tiny-polka {
background-image:
-webkit-gradient(radial, 7 7, 0, 7 7, 7,
color-stop(0.4, rgba(255,255,255,0.5)),
color-stop(0.44, rgba(255,255,255,0))
),
-webkit-gradient(radial, 7 7, 0, 7 7, 7,
color-stop(0.4, rgba(255,255,255,0.5)),
color-stop(0.44, rgba(255,255,255,0))
);
/*ff 3.6*/-moz-background-size: 20px 20px;
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
/%
[{ALLOW edit Admin}]
[{ALLOW view All}]
This page (revision-1) was last changed on 2018-10-21 07:49 by UnknownAuthorTop