I have a new article out!

Super Simple Full-Bleed & Breakout Styles
https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS @chriscoyier told me to be proud of it 😛

#CSS #cssLayout #cssGrid #cssVariables #containerQueries #containerQuery #code #web #webDev #webDevelopment #dev #coding #frontend #Halloween

I have a new article out!

Super Simple Full-Bleed & Breakout Styles
https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS @chriscoyier told me to be proud of it 😛

#CSS #cssLayout #cssGrid #cssVariables #containerQueries #containerQuery #code #web #webDev #webDevelopment #dev #coding #frontend #Halloween

I'm starting to learn static site development and minimal digital publishing. I'm interested in working with Hugo/Jekyll, Markdown, and accessible minimal design, especially for digital humanities projects.

If you have essential resources, examples, or learning paths to recommend, I'd appreciate it. Thanks :)

#staticsites #Hugo #Jekyll #DigitalHumanities #minimalcomputing #html #css #developers

I'm starting to learn static site development and minimal digital publishing. I'm interested in working with Hugo/Jekyll, Markdown, and accessible minimal design, especially for digital humanities projects.

If you have essential resources, examples, or learning paths to recommend, I'd appreciate it. Thanks :)

#staticsites #Hugo #Jekyll #DigitalHumanities #minimalcomputing #html #css #developers

🦖 mask-position
☑️ Newly available (from Dec 2023)

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

The mask-position CSS property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.

#webdev #CSS

Given that I’m going moderately punk with designing my #website, I inevitably stumbled upon #CSS custom cursors (https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) and decided to make my own extremely doodly ones. And it did work nicely, especially after I fucked up the colors and ended up with some pixels broken!

But then I re-read one of the latest @dbushell posts (https://dbushell.com/2025/10/27/custom-cursor-accessibility/), discouraging custom cursors. And yeah, it's not as exciting and fun as I expected it to be, due to #Accessibility and customization mess.

So I removed custom cursors 😢

Springs and bounces in native CSS

https://www.joshwcomeau.com/animation/linear-timing-function/

#HackerNews #Springs #bounces #CSS #animation #webdevelopment #frontenddesign

Given that I’m going moderately punk with designing my #website, I inevitably stumbled upon #CSS custom cursors (https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) and decided to make my own extremely doodly ones. And it did work nicely, especially after I fucked up the colors and ended up with some pixels broken!

But then I re-read one of the latest @dbushell posts (https://dbushell.com/2025/10/27/custom-cursor-accessibility/), discouraging custom cursors. And yeah, it's not as exciting and fun as I expected it to be, due to #Accessibility and customization mess.

So I removed custom cursors 😢

🦖 mask-position
☑️ Newly available (from Dec 2023)

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

The mask-position CSS property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.

#webdev #CSS

It has been `0` days since I wanted to rotate a background-image in #CSS without trickery. More specifically, I just want to set an angle on my gradient, this would be neat: `radial-gradient(200% %0% at 0 0 from 45deg, pink, navy)` and boom, you get an ellipse that's not flat but rotated. Is that a thing?

Seems like https://github.com/w3c/csswg-drafts/issues/6807 is the best path forward but it is a larger feature than just adding an angle to radial gradients, so it'd take time to roll out. Ah well, `::before` it is.

It has been `0` days since I wanted to rotate a background-image in #CSS without trickery. More specifically, I just want to set an angle on my gradient, this would be neat: `radial-gradient(200% %0% at 0 0 from 45deg, pink, navy)` and boom, you get an ellipse that's not flat but rotated. Is that a thing?

Seems like https://github.com/w3c/csswg-drafts/issues/6807 is the best path forward but it is a larger feature than just adding an angle to radial gradients, so it'd take time to roll out. Ah well, `::before` it is.

Just updated my dev rig. Pretty sweet!

#WebDev #CSS #Development

Just updated my dev rig. Pretty sweet!

#WebDev #CSS #Development

Preparing to film the first module of my new #CSS course. There will also be text for the sickos who like to read.

We'll cover the essential features, but we'll also explain how it all fits together (and when it doesn't).

Sign up for updates & early access! https://www.oddbird.net/courses/design-with-code/

Here's Sir Tim kicking things off with an explanation of why Web Design Will Never Happen:

There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.

- It relies on many of the grid-* properties, so `grid` is somewhere in all the options
- We don't use metaphors in CSS names, so `masonry` is not part of any options

https://docs.google.com/forms/d/e/1FAIpQLSdAqh74IyRa_YM81XPj0rjJCDuC4rO-k8krT7TBlEUu2c4QOA/viewform

»Write Code That Runs in the Browser, or Write Code the Browser Runs«
— by @jimniels

🧑‍💻 https://blog.jim-nielsen.com/2025/more-control-equals-less-performance/

#code #browser #webdev #web #coding #js #javascript #rust #rustlang #dev #html #css

Web devs can have a bit of JS, as a treat, but only if you behave.

(this is what behaving looks like)

#WebDev #NoJS #CSS #HTML

I decided I wanted to code a static site for my website myself. I’m using #html #css and #11ty

Not sure if this is crazy but having used Wordpress for years, I wanted to build something from the ground up.

One bonus is that I won’t get so many damn hacking attempts…

There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.

- It relies on many of the grid-* properties, so `grid` is somewhere in all the options
- We don't use metaphors in CSS names, so `masonry` is not part of any options

https://docs.google.com/forms/d/e/1FAIpQLSdAqh74IyRa_YM81XPj0rjJCDuC4rO-k8krT7TBlEUu2c4QOA/viewform