A little UI I made for a checklist app that works nicely. The pie-chart is a conic-gradient with the start and end colors sharing the same degrees which makes a hard edge.

Unfortunately, at this time, you can't animate a conic-gradient value in CSS.

Another shape made easy using the new shape() function.

https://css-tip.com/heart/

I think I just found my new favorite CSS feature.

I'm looking for some more friends who are interested in front end design
#css #design #frontEnd

Excited about next week's CSS Layouts Workshop with everyone!

Via email someone asked: Is this workshop about building a website from scratch?

The answer is no. We'll focus on CSS skills like grid & alignment & container queries that can be applied in any context! #css

https://www.oddbird.net/workshops/cascading-layouts/

I have updated my squircle icon example to use the new `shape()` function (supported by latest Safari and Chrome versions), finally making the clip path responsive. #CSS #Clipping #Shape #Squircle

https://codepen.io/mrcgrtz/pen/gOxyJvy
https://developer.chrome.com/blog/css-shape

New Kitten release

https://kitten.small-web.org

• New: Lovely new icons¹ and new callouts in Kitten Settings²

• New: Markdown now supports attributes and bracketed spans³

• New: client-side `kitten` global with `trigger` function for triggering events on the server from the client. (Useful when streaming client-side JavaScript when using Kitten’s Streaming HTML⁴ workflow. e.g., when you have to use a client-only web API like the Clipboard API but you want to keep all your logic on your server-side page.⁵)

• Fixed: The bound render function returned by `KittenComponent` class’s `component` getter now correctly awaits asynchronous templates. (In Kitten, you don’t have to care whether your templates contain promises. Kitten handles all that for you.)

Enjoy!

¹ https://kitten.small-web.org/reference/#icons

² https://mastodon.ar.al/@aral/114381983893061099

³ https://kitten.small-web.org/reference/#markdown-support (also see https://mastodon.ar.al/@aral/114381462302862256)

⁴ https://kitten.small-web.org/tutorials/streaming-html/

⁵ e.g., See how I use this to implement a copy to clipboard button in the database page of Kitten’s Settings: https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/db/index.page.js#L33 Of course, you don’t have to use this and you can just write client-side JavaScript or use the built-in Alpine.js integration. e.g., how I do it on the (older) settings/identity page: https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/identity/index.page.js#L7

I did it! I managed to squeeze an animated .html "demo" into just 256 bytes (text string size).

You can view it here:
https://hlnet.neocities.org/256b

Can anyone else make a better one?

This is the whole source:

<style>*{display:grid;height:100%;background:repeating-radial-gradient(1Q.01Q at calc(50%*(1 - sin(var(---)*pi)))calc(50%*(1 - cos(var(---)*pi))),tan,red);animation:a 9s 9}@property ---{syntax:"<number>";inherits:true;initial-value:0}@keyframes a{to{---:2;

Randomly trying out the new CSS-customizable <select>, and… randomly found a bug that will hang and crash the page https://codepen.io/cheeaun/pen/jEEqpeR

#Development #Pitfalls
All browsers get this wrong · What DevTools misinterpret about Shadow DOM https://ilo.im/163dax

_____
#Bugs #Specification #WebComponents #ShadowDOM #DevTools #Browser #WebDev #Frontend #DOM #CSS

TIL: `text-emphasis: open sesame`

https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis#values #CSS

A question for the web development experts here on the Fediverse!

I'm building a small static website and would like to use stylesheets from the NPM archive in addition to a Sass file of my own. That is, that I can use directives like @import node_modules/example/styles.css directives in the Sass file, and those referenced stylesheets will be bundled along with the compiled Sass into a single CSS file. That single CSS file is what's distributed on the website and loaded by the user's browser.

My attempts so far have involved using esbuild, which claims to be able to bundle CSS.esbuild-sass-plugin is supposed to expand this to support compiling Sass with dart-sass.

Every way I configure it, I either get esbuild complaining that it can't resolve the @imports, or it just copies the @imports through verbatim without actually bundling the external stylesheets. Articles that I can find online suggest writing JavaScript code to apply the styles and bundling that, which isn't the same thing at all!

Thus comes the question: is what I would like possible with esbuild, and if not, what's the best way of doing it?

cssbun seems to come close, but that still leaves me with Sass compilation and optimization to do separately, and there's no command-line interface. I'd also like to stick with a well-known toolchain if possible.

Thanks in advance!

Bien le bonjour, me voici de retour !
#JeChercheUnTaf – toujours

Je suis spécialisée en design éditorial, CSS-print et développement indie web (HTML, CSS, JS).

Un aperçu de mon travail est dispo ici : https://kajoudesign.eu

Je suis #Freelance ou #FullRemote

Le boost rend heureux·se

#DesignGraphique #DevWeb #CSS-print

Its all HTML

My April IndieWeb blog carnival entry on “renewal”!

I often feel compelled to tweak and redesign my website at the expense of other things I value. I talk about reconnecting with what I most enjoy about composing and coding, and avoiding treating my leisure and projects as if I need to impress someone.

https://reillyspitzfaden.com/posts/2025/04/indieweb-blog-carnival-renewal/

This is cool!

Because Google Fonts isn't #GDPR compliant, someone built "Bunny Fonts" to be a GDPR-compliant alternative.

Drop-in replacement with an identical API!

#WebDev #CSS

https://fonts.bunny.net/

Back when I was learning about #css, there was an amazing resource called CSS Zen Garden. It helped expand my knowledge of what was possible. It was like magic. TIL it's still around (no Internet Archive needed). https://csszengarden.com

I’m fortunate to have worked with a lot of amazing designers over the years. Some were curious about designing in the browser with basic #HTML and #CSS, but weren’t sure where to begin, or felt discouraged by a lot of developer-centric content.

This is the advice I gave that seemed to resonate most: https://cloudfour.com/thinks/designing-in-the-browser-five-tips-for-beginners/

Have you ever wanted to have gap-rules in your #CSS Grid layouts, similar to column-rules? The Gap Decorations specification has its first public working draft! https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/

(“First public working draft” means it’s still being worked on and things in it might change, but the work has been made public and is now part of the historical record. This is a good time for the community [including YOU!] to read it and give feedback. Do **NOT** expect implementations right away.)