Slanted Squares (slanted_squares)¶
← Back to Object Elements | 📋 All Elements
This element is available in the Lucit Template Designer Elements Panel and can be added to any template by clicking on it.
When this element is added, the code listed in Element HTML will be added as a new layer in your template design that you can then customize as you see fit.
Overview
- Type:
object - Element Class:
App\LuCore\DriveTemplates\BackgroundDriveTemplateElementClass
white, black, repeating, gray, grey,
Preview
Element HTML
<div x-objectcode="slanted_squares" class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_image_full_size_stretch" id="{id}" title="Slanted Squares"></div>
Default CSS
--u: 1vmin;
--hue: hue-rotate(0deg);
--c1: #ffffff;
--c2: #ced7c5;
--c3: #212121;
--d1: #d5ddcc;
--d2: #a6af9c;
--gp: 50%/calc(var(--u) * 20) calc(var(--u) * 20);
filter: var(--hue);
background:
linear-gradient(0deg, var(--c3) 0 1px, #fff0 0 calc(100% - 1px), var(--c3) 0 100%) var(--gp),
linear-gradient(90deg, var(--c3) 0 1px, #fff0 0 calc(100% - 1px), var(--c3) 0 100%) var(--gp),
conic-gradient(from 270deg at 2.75% 48.5%, var(--c3) 0% 24%, #fff0 24.25% 100%) var(--gp),
conic-gradient(from 93deg at 52.5% 97.25%, #fff0 0 0.25%, var(--c3) 0.5% 25%, #fff0 25% 100%) var(--gp),
conic-gradient(from 90deg at 97.25% 52%, var(--c3) 0% 24%, #fff0 24.25% 100%) var(--gp),
conic-gradient(from 273deg at 47.5% 2.75%, #fff0 0 0.25%, var(--c3) 0.5% 25%, #fff0 22.75% 100%) var(--gp),
conic-gradient(from 189deg at 7% 56.5%, #fff0 0 0.25%, var(--c3) 0.5% 34%, #fff0 25% 100%) var(--gp),
conic-gradient(from 180deg at 43.5% 93%, var(--c3) 0 22.5%, #fff0 22.75% 100%) var(--gp),
conic-gradient(from 8deg at 93% 43.5%, #fff0 0 0.25%, var(--c3) 0.5% 34%, #fff0 25% 100%) var(--gp),
conic-gradient(from 0deg at 56.5% 7%, var(--c3) 0 22.5%, #fff0 22.75% 100%) var(--gp),
conic-gradient(from 0deg, var(--c3) 0 2.5%, var(--d1) 2.75% , var(--c1) 12.5%, var(--d1) 22.5%, var(--c3) 22.75% 25.85%, var(--d2) 26%, var(--c2) 39%, var(--d2) 49%, var(--c3) 49.15% 52.5%, var(--d1) 52.75%, var(--c1) 62.5%, var(--d1) 72.5%, var(--c3) 72.75% 75.85%, var(--d2) 73%, var(--c2) 89%, var(--d2) 99%, var(--c3) 99.15% 100%) var(--gp);