Especially useful for designers is when they realise that a lot of the fancy visual effects from Figma etc. can be recreated with CSS.

Even more, when realising that those can become reusable CSS styles for building things faster in the future. That way designers can build their own visual toolkit.

I'm thinking of font features that could mess with calculating the width of a string of text.

The most obvious is optical sizing. This changes the width of glyphs at certain font sizes, so a text at font-size:16px might be 100px wide, but that doesn't mean it'll be 200px wide at font-size:32px.

Another could be `rand`, when supported: if you get different glyphs on your virtual canvas than on screen, calculations get borked.

Anything else?

Creating Animated Accordions With the “details” Element and Modern CSS, by @stefan (@builderio.bsky.social):

https://www.builder.io/blog/animated-css-accordions

#Development #Guides
Must-know Interop features 2025 · A learning guide for the next couple of months https://ilo.im/1631b4

_____
#Browser #Interoperability #AnchorPositioning #ViewTransitions #WebVitals #WebPerf #WebDev #Frontend #CSS #JavaScript

Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.

Live on @codepen https://codepen.io/thebabydino/pen/XJWxLWV

cc @bramus

Clean Seas Seafood ( #CSS ) has released " Clean Seas enters Scheme Implementation Deed with Yumbah " on Mon 31 Mar at 09:23 AEST #trading #Australia #media #live #ltd
https://grafa.com/asset/clean-seas-seafood-ltd-6474-css.asx?utm_source=asxmktsensitive&utm_medium=mastodon&utm_campaign=css.asx

Looking for CMS advice

Hey Web devs!

Do you have any suggestions, tips, opinions, dos, don’ts about headless CMSes?

I have a growing list of small/mid non-profits and collectives asking for my help to (re)make their website. I totally want to help, but I don’t have much time, especially considering that they generally have little or no funding—I would most definitely point them to @VillageOneCoop, otherwise.

Therefore, I want a super simple and replicable solution where I can copy-paste most of the code, while providing them with a stable, fast, and modern solution. I had a look at the Headless CMS section in the Jamstack website, but I need opinions from people who actually used some of that software already.

Needs

• I want to code and configure everything using @eleventy
• Admin interface (#WebApp) for the client to add pages and write posts
• Static website in the front-end
• Simple and reliable CI/CD
• No/minimal maintenance after the first setup
• Self-hostable (I was taking this for granted so much that I forgot to write it)
• #OpenSource

Nice to have

• Possibly using #Deno, not #NodeJS
• Allowing the client to customize a bit their website through the admin interface, with a GUI
• CMS app packaged on @yunohost
• No CMS vendor lock-in
• I’d love to write as little JavaScript as possible
• #FreeSoftware

Absolutely not

• Front-end #JavaScript frameworks

Please, boost this and ask around! Links to videos, tutorials, and resources are welcome.

People whose perspective I would really value: @zachleat @harryfk @deno_land @jaredwhite @vanillaweb @stefan @mxbck @WeirdWriter @deadsuperhero (Sorry if I am spamming you!)

How to Set CSS Class Name in React JS.

Como Poner Nombre de Clase CSS en React JS.

https://blog.nubecolectiva.com/como-poner-nombre-de-clase-css-en-react-js/

#programming #coding #webdevelopment #devs
#softwaredevelopment #css #react

Oh no, my blog shows up in the Dillo like a

Looks like it's time to edit the CSS

new Notebook
- #CSS relative color

https://nerdy.dev/notebook/relative-color.html

Want to give a responsive irregular shape depending on text content/ viewport rounded corners? Here's a super simple pure #CSS + #SVG #filter demo on @codepen doing it https://codepen.io/thebabydino/pen/KwKGrjR

Heavily commented. See also https://mastodon.social/@anatudor/114185324674119212 for details about some of the filter primitives.

Expanding upon my parallax layers experiment from yesterday, now with zero-js

I also added two more designs to the demo, and tried one with a horizontal parallax

Doesn't work for Safari or Firefox users, sorry.

Thanks @germanfrelo for the tip.

CodePen: https://codepen.io/HejChristian/full/VYwEVPO

#Development #Launches
‘Div’ided we Fall · A fun HTML and CSS learning game https://ilo.im/162orz

_____
#HTML #CSS #Course #Game #Browser #WebDev #Frontend

:dir()
Newly available (from Dec 2023)

https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

The :dir() CSS pseudo-class matches elements based on the directionality of the text contained in them.

“Reimagining Fluid Typography” by @mia

https://www.oddbird.net/2025/02/12/fluid-type/

> Never do pixel math with `em` and `rem` units. That’s where we went wrong, by assuming that `16px == 1em` is a reliable fact.

It reminds me a lot of what I was pretty vocal about a few years ago, including “People don't change the default 16px font size in their browser (You wish!)” and “Users DO change font size”.

But I don't understand how this code…

#font #CSS #em

️ https://nicolas-hoizey.com/links/2025/03/20/reimagining-fluid-typography/

Parallax layers

A subtle shift across 13 layers kept within a frame on the page.

CodePen: https://codepen.io/HejChristian/full/ZYEqoXd

Huh, I'm using a 14-year-old CSS reset. Maybe time to update?

Gosh, that idea is terrifying.

I've been distracting myself with some updates on my website lately (#LetAWebsiteBeAWorryStone). One such update was to, on hover, show a mockup of my sticker designs on a laptop, with the power of… #CSS! I also adjusted the layout of my Projects page on large viewports because regular card grids _can_ get boring.

A new #CSSWG proposal for layout looks ... interesting.

#CSS #WebDev

https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/