This week CodePen challenge wasn't much different from last week, so I didn't felt that motivated... But Love-month is continue and so we are, today I wrote a love letter, and somehow made it kinda useful 😋, not just beautiful.
Lets prepare a paper sheet.
Most challenging part of it is line background. Lets take a look on it bit closer.
background: repeating-linear-gradient(transparent 0 calc(1.2rem - 1px), #eecfd7 0 1.2rem);
So the background, it is transparent from 0% to 1.2rem - 1px and from 0 to 1.2rem it is red (1px more than prev, but on a lower level).
Exactly what we need, 1 red pixel each 1.2rem. Perfect for our needs, now we have canvas. Lets get to words.
Text is simple but not too sweet.
font-size: 0.875rem;
line-height: 1.25rem;
Why line height is not 1.2rem straight? Coz all the fonts have its own inner spacings, and each time making some kind of handcrafted design element you will need to make some adjustments.
Universal solution but low compatibility.
I do love to use :has pseudoclass to check which radio is :checked, so simple especially with custom props, but still cant look on its compatibility level (~93% right now) without a tears.
body:has(#orange:checked) .heart:after {
--bg-color: #e8874e;
}
So nice to see how far css / html actually moved since I've start working with it, even if I cant use new features in production yet.
Result:
My previous challenge work: Let's serve a table!
Top comments (0)