eupolicy.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
This Mastodon server is a friendly and respectful discussion space for people working in areas related to EU policy. When you request to create an account, please tell us something about you.

Server stats:

221
active users

#css

14 posts13 participants1 post today

This was a PITA to make work, getting characters to align so that the letters in either script looks properly kerned, to emulate word-wrapping. Took forever, but it's fully #CSS, no #JavaScript.

I got the idea from how the computer displays on #MurderbotDiaries would first show a sci-fi script and then wipe to English.

🆕 post: Dropping masonry in Sloth

For about five years Sloth has been using the masonry layout in CSS. As this is my side project and Firefox has been my daily driver, it was great. But it's time to change.

sarahgebauer.com/post/dropping

Sarah GebauerDropping masonry in SlothFor about five years Sloth has been using the masonry layout in CSS. As this is my side project and Firefox has been my daily driver, it was great. But it's time

Minimal CSS-only blurry image placeholders, leanrada.com/notes/css-only-lq.

Pretty clever!
The author represents Low Quality Image Placeholders (LQIP) by integers (20 bits long) then use CSS Math operators to do bitwise operations and extract some values to generate this blurry effect (based on 6 circles, 1 solid background image, and blend everything together with a blur filter). I love it. 100% CSS, no JS required. Of course, there is a first step consisting at generating this integer.

figured out a nice way to do recolorable glyph icons without resorting to a font or inline SVG data:

👉 single icon sheet

👉 set col/row vars to add icons

👉 use inline with <span class="icon icon-mail"></span>

👉 recolor with `background-color` anywhere in the stylesheet

#html#css#web

Move over Bootstrap.

Web Awesome is an awesome successor to what in my opinion was already the best open source #WebComponents library (Shoelace) on the market. Now we have the best #CSS framework on the market.

All of the CSS is…um…just CSS and all of the components are…um…just web components. Native #WebDev APIs across the board. 🙌

Take a first look at the brand new public beta:

thathtml.blog/2025/07/web-awes

That HTML Blog · Web Awesome, the First All-in-One Web Components + CSS Framework, is Finally Here
More from Jared White (🏳️‍⚧️ ally)

When applying a thick border around an element in multiple colors, the corners meet at a 45-degree angle forming a diamond. That is established and seems reasonable.

But, when you set a thick edge on one side, the thin 1px border gets squeezed into a slope, and won't reach the edge! And the sidebar forms a *trapezoid*!

This is most noticable on modern high-DPI screens. It is rather unsatisfying, and hard to unsee...

Example:
en.wikipedia.org/wiki/Template

Howdy! 🤓 How do you all handle native #CSS Nesting at the moment? Are you using it already? And if so, are you just targeting newer browsers that support it? Or are you using PostCSS, for example?

Asking for a friend who has reduced his build process to the max (nothing but a little esbuild script) and is now hesitating to add PostCSS again… 😉