Report Blog Entry
<style>
css-doodle {
--color: #E63946,#F1FAEE,#A8DADC,#457B9D,#1D3557;
--pos: @p(0 0, 0 100%, 100% 0, 100% 100%);
--size: calc(@r(100%) / @N * @n) calc(@r(100%) / @N * @n);
--rule: (
:doodle {
@grid: 1x120 / 100vw 100vh;
grid-template: auto / repeat(auto-fill, @r(2vmax));
grid-auto-rows: @lr;
grid-auto-flow: dense;
grid-gap: 1vmax;
overflow: hidden;
background: @p(var(--color));
}
:container {
@size: 105%;
}
--pos1: var(--pos);
--pos2: var(--pos);
grid-column-end: span @ri(12);
grid-row-end: span @ri(18);
background:
radial-gradient(
circle at var(--pos),
@stripe(transparent, @p(var(--color)) 1px, transparent)
)
@var(--pos1) / @r(100%) @lr
no-repeat,
@m(@r8, (
linear-gradient(@p(var(--color)), @lp)
@var(--pos1) / var(--size)
no-repeat
)),
radial-gradient(
circle at var(--pos),
@p(var(--color)) @r(70%), #0000 0)
@r(100%) @r(100%) / @r(20vmax, 50vmax) @lr
@p(round, space),
linear-gradient(
@r(360deg),
@p(var(--color)) @r(20%), #0000 0)
@r(100%) @r(100%) / @r(5px, 10px) @lr
@p(round, space);
:after, :before {
content: '';
@size: @r(100%);
background:
@m(@r2, (
linear-gradient(@p(var(--color)), @lp)
@var(--pos2) / var(--size)
no-repeat
)),
radial-gradient(
circle at var(--pos),
@p(var(--color)) @r(70%), #0000 0)
@r(100%) @r(100%) / @r(5vmax, 25vmax) @lr
@p(round, space),
linear-gradient(
@r(360deg),
@p(var(--color)) @r(20%), #0000 0)
@r(100%) @r(100%) / @r(2px, 5px) @lr
@p(round, space);
}
);
}
body {
margin: 0
}
</style>
<css-doodle use="var(--rule)" click-to-update></css-doodle>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )