Light Silver Background gradients
This works in the Haddock Template
This works in the Haddock Template
Usage:#
%%add-css [Background Silver Gradients] /% %%bg-horizontal-stripes <page content> /%
Note: you can also combine these styles with other background colors
%%bg-horizontal-stripes.bg-lime ... /% %%info.bg-horizontal-stripes ... /%
bg-horiziontal-stripes#
This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?bg-vertical-stripes#
This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?bg-diagonal-left-stripes#
This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?bg-diagonal-right-stripes#
This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?bg-checkerboard#
This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?bg-silver-dots#
This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
/*Inspired by https://css3wizardry.com/tag/css-gradients/
*/
.bg-horizontal-stripes {
background-image:
linear-gradient(0, rgba(0,0,0,0.1) 25%, transparent 25%);
background-size: 100% 4px;
}
.bg-vertical-stripes {
background-image:
linear-gradient(90deg, transparent 75%, rgba(0,0,0,0.1) 75% );
background-size: 4px 100%;
}
.bg-diagonal-left-stripes {
background-image:
linear-gradient(45deg,
transparent 35%, rgba(0,0,0,0.1) 35%,
rgba(0,0,0,0.1) 50%, transparent 50%,
transparent 85%, rgba(0,0,0,0.1) 85%);
background-size: 6px 6px;
}
.bg-diagonal-right-stripes {
background-image:
linear-gradient(-45deg,
transparent 35%, rgba(0,0,0,0.1) 35%,
rgba(0,0,0,0.1) 50%, transparent 50%,
transparent 85%, rgba(0,0,0,0.1) 85%);
background-size: 6px 6px;
}
.bg-checkerboard {
background-image:
linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
linear-gradient(-45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.1) 75%),
linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.1) 75%);
background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
.bg-silver-dots {
background-image:
radial-gradient(
rgba(0,0,0,0.3), rgba(0,0,0,0.3) 15%,
rgba(0,0,0,0) 15%, rgba(0,0,0,0) 95%);
background-size: 6px 6px;
}
*/
.bg-horizontal-stripes {
background-image:
linear-gradient(0, rgba(0,0,0,0.1) 25%, transparent 25%);
background-size: 100% 4px;
}
.bg-vertical-stripes {
background-image:
linear-gradient(90deg, transparent 75%, rgba(0,0,0,0.1) 75% );
background-size: 4px 100%;
}
.bg-diagonal-left-stripes {
background-image:
linear-gradient(45deg,
transparent 35%, rgba(0,0,0,0.1) 35%,
rgba(0,0,0,0.1) 50%, transparent 50%,
transparent 85%, rgba(0,0,0,0.1) 85%);
background-size: 6px 6px;
}
.bg-diagonal-right-stripes {
background-image:
linear-gradient(-45deg,
transparent 35%, rgba(0,0,0,0.1) 35%,
rgba(0,0,0,0.1) 50%, transparent 50%,
transparent 85%, rgba(0,0,0,0.1) 85%);
background-size: 6px 6px;
}
.bg-checkerboard {
background-image:
linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
linear-gradient(-45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.1) 75%),
linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.1) 75%);
background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
.bg-silver-dots {
background-image:
radial-gradient(
rgba(0,0,0,0.3), rgba(0,0,0,0.3) 15%,
rgba(0,0,0,0) 15%, rgba(0,0,0,0) 95%);
background-size: 6px 6px;
}
See Category.Add CSS Style
);
background-repeat:no-repeat;
background-position:top;
background-size:48px;
text-align:center;
}