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
.feather {
background-image:url(
);
background-repeat:no-repeat;
background-position:top;
background-size:48px;
text-align:center;
}
);
background-repeat:no-repeat;
background-position:top;
background-size:48px;
text-align:center;
}
Copyright © 2024 The Apache Software Foundation,
Licensed under the Apache License, Version 2.0.
Apache and the Apache feather logo are trademarks of The Apache Software Foundation.
Licensed under the Apache License, Version 2.0
.Apache and the Apache feather logo are trademarks of The Apache Software Foundation.