how to make #CSS view transitions swoop or have motion blur

or how I learned to help view transitions not always go in straight lines

⤷ https://nerdy.dev/swoop-there-it-is

Accepting user-supplied code is mostly fine https://lobste.rs/s/bxbytk #css #security #web
https://dimden.dev/blog/?id=15-webtiles-its-fine-to-accept-user-supplied-code-actually

親の display が block でも、自分が position: absolute なら justify-self と align-self ってこういう効果があるのしらなかった！

https://css-tricks.com/yet-another-way-to-center-an-absolute-element/

#CSS

Code Corners via @aksAkseli ​ https://lobste.rs/s/5gu6jr #css #web
https://codecorners.rknight.me/

Anchor positioning is supported in all major browsers and will soon be used widely. Learn how it properly works before you start hating this cool feature!

https://css-tip.com/anchor-issues/

#CSS #HTML

💡 CSS Tip!

For years, we've had the "z-index, stacking context" nightmare, but we will soon have a worse nightmare related to Anchor Positioning 😱

When it doesn't work, it's frustrating, so it's time to learn how it really works.

https://css-tip.com/anchor-issues/

It's not as simple as you might think!

#CSS #HTML

Looks like I've got at least one overflow problem.

#coffee #css #WebDev

Rounding the corners and it's almost ready! 😁

Now I need to find a name for it ... what I hate the most 😑

Open to suggestions 👇

#CSS #HTML

Playing with shape() and border-shape 👀

Cool demos in progress ⌛

#CSS #HTML

Thinking Deeply About Theming and Color Naming via @lesleyLesley Lai https://lobste.rs/s/kkslov #css #design #web
https://css-tricks.com/thinking-deeply-about-theming-and-color-naming/

#CSS only scroll-driven geometric orbits
https://nerdy.dev/css-scroll-driven-gyro-trig-experiments

The CSS Working Group published a First Public Working Draft of Selectors Level 5. Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in a document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code.
#css #webstandards
https://www.w3.org/news/2026/first-public-working-draft-selectors-level-5/

Dew Drop Weekly Newsletter 472 - Week Ending February 27, 2026

https://zc.vg/C7drA?m=0

#dewdrop #newsletter #javascript #aspnetcore #css #xaml #windowsdev #dotnet #csharp #ai #mcp #devops #agile #python #appdev #dotnetmaui #podcasts #m365 #sqlserver #data #powershell

Firefox is joining the shape() game 🤩

It's a good time for some blobs: https://css-generators.com/blob/

Or maybe a nice wavy divider: https://css-generators.com/wavy-divider/

And stay tuned for another generator and more shapes next week! 🤫

#CSS #HTML

Justifying text-wrap: pretty via @vulcan https://lobste.rs/s/mo0hgf #browsers #css #design #web
https://matklad.github.io/2026/02/14/justifying-text-wrap-pretty.html

Sprites on the Web https://lobste.rs/s/yw92gw #css #web
https://www.joshwcomeau.com/animation/sprites/

x86CSS - An x86 CPU emulator written in CSS by @rebane2001Rebane https://lobste.rs/s/rhgsiy #show #css
https://lyra.horse/x86css/

#TIL `column-width` and `column-height` #CSS are logical properties too, instead of uh… `column-block-size` or `column-inline-size`.

Death to Scroll Fade via @toastalｔｏ⟁ｓｔ⟁ｌ https://lobste.rs/s/bi9wsi #a11y #css #web
https://dbushell.com/2026/01/09/death-to-scroll-fade/

Everything you never wanted to know about visually-hidden via @lobsters https://lobste.rs/s/mje6ui #css
https://dbushell.com/2026/02/20/visually-hidden/

Dew Drop Weekly Newsletter 471 - Week Ending February 20, 2026

https://zc.vg/Ci5Qs?m=0

#dewdrop #newsletter #aspnetcore #css #azure #javascript #xaml #windowsdev #cpp #csharp #dotnet #mcp #ai #devops #agile #IoT #appdev #unoplatform #m365 #podcasts #data #sqlserver #powershell

These are all things I plan to cover in the Poetic #CSS course, but I'd love your input and questions! Where are you having the most issues, what piques your curiosity, and where do you have questions?

Feel free to select multiple, or reply with other topics & specific questions!

RE: https://front-end.social/@piccalilli/116097200401916672

You want lists? You got lists!

In 2017 my Web #Typography book had ~300 words on styling lists. Now, in 2026, I've written 3000 words on the subject!

#CSS sure has moved on...

Just look at this lot to try and understand: list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols.

The narrative that #CSS was initially designed to be static, and only later became responsive with things like media, supports, container queries, and now if()… is maybe how things turned out?

But MQs were part of the original proposal – including document age queries, & user "relevance" queries.

This wasn't a big pivot in the vision of the language, but a more continuous project of realizing that vision in relation to changing author needs & browser capabilities over time.

Hi everyone - Let this be my #introduction toot.

I'm a Design Engineer from Turnhout 🇧🇪, working at Essent in 's Hertogenbosch 🇳🇱.

My mission? Trying to make developers spent less time on the overly complex stuff and more on the fun stuff. That's why I'd like to toot about the cool things in #openapi, modern #css and in general, #opensource.

https://mrtnvh.com/

Hi, Mastodon 🦣 - could you help me out?

If you can test in actual Safari, is the slider here vertical like it is for me in Chrome/ Firefox? Or is it horizontal like it is the case in Epiphany?

https://codepen.io/thebabydino/pen/emzaEOR

If you cannot test in actual Safari, boosts appreciated.

Thanks! 🙏

#CSS

Modern CSS Code Snippets via @chamlisOlivia https://lobste.rs/s/c4c5ri #css #web
https://modern-css.com

Modern #CSS code snippets, side by side with the old hacks they replace.

https://modern-css.com/

"Stop writing CSS like it's 2015."

#webdev #frontend

i got fired 😕 -- NO! i got laid off! i'm not useless 😄
#getfedihired
over 30% of devs got the boot.

hit me up for #frontend #wcag #accessibillity #css #semanticWeb #informationArchitecture #solutionArchitect #componentLibraries

😳any help and pointers much appreciated. Primarily Oslo hybrid.

CSS “@ scope”: An Alternative to Naming Conventions and Heavy Abstractions, by @smashingmagSmashing Magazine:

https://www.smashingmagazine.com/2026/02/css-scope-alternative-naming-conventions/

#css #scope #naming

Did you know? CSS Naked Day will see its 20th edition on the 9th of April 2026!

Wanna play? https://css-naked-day.org/

#css #cssNakedDay #webStandards

Dew Drop Weekly Newsletter 470 - Week Ending February 13, 2026

https://zc.vg/nxZJ4?m=0

#dewdrop #newsletter #aspnetcore #javascript #azure #css #xaml #windowsdev #dotnet #csharp #cpp #ai #mcp #devops #agile #appdev #dotnetmaui #podcasts #IoT #m365 #powershell #sqlserver #data

CSS Clicker via @confusedalex https://lobste.rs/s/jagwef #css
https://lyra.horse/css-clicker/

Found by Nick Bromley on the A11y Slack:

“In browse mode in web browsers, NVDA no longer treats controls with 0 width or height as invisible. This may make it possible to access previously inaccessible ‘screen reader only’ content on some websites.”
https://www.nvaccess.org/post/in-process-10th-february/

No reason to panic. Just be aware in case your project has legacy / weird hiding techniques

#NVDA #accessibility #a11y #CSS

#CSS の progress() 関数知らなかったな。面白い！

progress() | CSS-Tricks
https://css-tricks.com/almanac/functions/p/progress/

💡 CSS Tip!

Percentage heights are always a nightmare, but what if we can solve all of the problems with one line of code?

https://css-tip.com/percentage-height/

It may look strange and unreadable, but it will be a lifesaver and probably your new favorite CSS trick in the future!

#CSS #HTML

デザイナーとして #CSS とか #frontend のコードを直接書きたい系の自分が #Figma に感じるフラストレーションを、#VibeDesign みたいなツールを使う人も感じているということはあまり予想していなかった

追記：
まあでも実際のコードで実装されたものをデザイン的に触れるようになれば、当然、実装の写像としての Figma に不満とか不要かもと思う気持ちが出てくるのは当然か

#CSS ってこれからいろんな機能が追加されて、最新のベストプラクティスも結構変わってくるんじゃないかという気がしてるんだけど、そういう現実にあまりサンプルがまだ少ない分野って今後 LLM にどう学習させるんだろう

Customizable Nice <select> https://lobste.rs/s/9vtidf #css #web
https://nerdy.dev/nice-select

A CSS-only elastic hover effect, because why not?

https://css-tip.com/elastic-hover/

A chrome-only experiment using shape(), sibling-index(), linear(), etc.

#CSS #HTML

Wild how far you can push "customizable select" with just #CSS

https://nerdy.dev/nice-select

🤔 "Add text-autospace to status content" https://github.com/mastodon/mastodon/pull/37694

From Webkit blog (https://webkit.org/blog/16574/webkit-features-in-safari-18-4/#text-auto-space): "WebKit defaults to `text-autospace: no-autospace` to match the current default behavior of older (currently all) browsers. The CSS specification calls for browsers to switch the default to `text-autospace: normal`…"

It's Baseline 2025 (newly available) on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace

#CSS

Dew Drop Weekly Newsletter 468 - Week Ending January 30, 2026

https://zc.vg/QmL8t?m=0

#dewdrop #newsletter #aspnetcore #javascript #css #xaml #windowsdev #dotnet #csharp #ai #mcp #devops #agile #appdev #podcasts #IoT #m365 #data #sqlserver #azure #powershell

#CSS
/*
#Mastodon v4.3.0. Make the toot editing area usable to show >2 lines on Reply/Edit.
*/
.reply-indicator__content, .reply-indicator__content *
{
visibility: collapse !important;
display: none !important;
}
div .link-footer
{
visibility: collapse !important;
}

---
On MS Windows 10 with 125% zoom of 1920x1080 px resolution of 13.3 in screen, with 20 p[xt] font size in Firefox.

Showing the toot being replied to also makes the experience worse.

#accessibility #tookANoseDive

#CSS
/*
#Mastodon v4.3.0. Reduce vertical space.
*/
div .status__prepend
{
padding: 5px !important;
padding-bottom: 0px !important;
}
div .status
{
padding-top: 8px !important;
}
.content-warning
{
margin: auto !important;
padding: 2px 2px !important;
}
.content-warning *
{
display: inline !important;
}
.content-warning .link-button
{
margin-left: 5px !important;
margin-top: 5px !important;
}
.search
{
margin-bottom: 10px !important;
}

People are debating the masonry layout, and I'm creating strange layouts.

A Pyramidal Grid of Hexagon Shapes! 👀

https://css-tip.com/pyramidal-grid/

A fully responsive implementation powered by modern CSS (corner-shape, sibling-index(), math functions, etc.) and no media queries.

#CSS #HTML

I wrote a new article: “Solving Shrinkwrap: New Experimental Technique”

https://kizu.dev/shrinkwrap-solution/

In this article, I present my new technique for solving a #CSS problem that was deemed impossible — true shrinkwrapping of an element with auto-wrapped content.

By using anchor positioning and scroll-driven animations, we can adjust our element’s outer dimensions by measuring its inner contents, demonstrating that for many cases this can already work and might unlock a future native feature.

Understanding the fundamentals of #CSS Layout: "Have you ever struggled to understand why the browser put the element where it did? Do you think CSS is hard to work with? By getting a better understanding of the fundamentals, you’ll learn to 'see the matrix'." https://polypane.app/blog/understanding-the-fundamentals-of-css-layout/