lonmakes
KPCKevin Powell - Community
•Created by lonmakes on 1/18/2024 in #front-end
Vertically align text that is wrapping a shape
Right. I looked into the calculated padding solution but, that requires knowing the height of the text block. Can be done with JavaScript, but I was curious if anyone could think of an elegant all-CSS solution.
I tried a whole bunch of crazy stuff: overlapping grid boxes, pseudo element shapes, padding, margins.
Right now the only solution seems to be the JavaScript-calculated padding-top. But not a very clean solution. And not something I'm going to do for such a subtle effect.
10 replies
KPCKevin Powell - Community
•Created by lonmakes on 1/18/2024 in #front-end
Vertically align text that is wrapping a shape
Flipping the relationship might be the trick. But we want the numbers aligned if multiple cards fit. I'll admit the effect is pretty subtle, but I thought it would be a sophisticated touch. 🧐
When it proved to be tricky, I thought I'd share with the class. 
10 replies
KPCKevin Powell - Community
•Created by lonmakes on 1/18/2024 in #front-end
Vertically align text that is wrapping a shape
It's a much trickier challange than it first appears. Shape-outside isn't the problem. It's the vertical alignment of the text.
Here's an early attempt that didn't quite get the centering.
https://codepen.io/schnoggo/pen/VwRbpzz
10 replies
KPCKevin Powell - Community
•Created by lonmakes on 10/10/2023 in #front-end
Any thoughts on a pure CSS solution color behind letters?
Exactly the sort of obscure property I was looking for! 😸 I tried stacked shadows but they got real funky.
7 replies
KPCKevin Powell - Community
•Created by lonmakes on 10/10/2023 in #front-end
Any thoughts on a pure CSS solution color behind letters?
The trick is padding.
7 replies