DEV Community: Alvaro Montoro

The 4 Hs of HTML

Alvaro Montoro — Wed, 26 Aug 2026 02:05:52 +0000

There are a few web concepts that appear in every webpage, and they are a recurring source of confusion among designers and developers. Maybe it is because their names are really similar, maybe it is because some have overlapping roles... but they are always causing trouble.

I am talking about the 4 Hs of HTML: Head, Header, Heading, and Headline. Sometimes these names are used interchangeably, but nothing could be further from the truth. Each of them is its own thing and needs to be treated and called appropriately.

It may seem trivial, but clarity is important because semantics, maintainability, and accessibility depend on it... and having a clear definition for them facilitates communication and helps people understand each other faster (and move projects forward just as quickly.)

So, what are the 4 Hs of HTML?

Head: The Document's Brain

The head of a document is the <head> element. It contains machine-readable information about the document itself (metadata) and, because it is designed for machines and not humans, it is not part of the layout and it is not visible on the browser.

A common misunderstanding happens when designers and developers talk about the head of the document to refer to the header of the page or the hero section above the fold. That's not what the head is.

Among other things, the head contains information like:

The page title in the <title> tag.
Links to scripts and style files.
Meta tags with browser instructions and directions.
Social media and SEO tags for web crawlers.

Although some of that information may be visible to the user (the title is displayed on the tab name, or a social media image is shown on posts), generally the data in the <head> is invisible to the site's visitors.

Header: Introductions and Banners

The header of a page is an introduction section usually located at the top that contains things like the title, a short description, navigation, a hero banner, or a search box. It can be represented by the <header> semantic HTML element, and it is very much visible.

While normally every page has a "main header," there can be multiple headers on a page: an <article> may have a header, so may a <section> or the <main> content of the page, as well as an <aside>. So a single page may have several headers, or none at all.

Maybe because designers don't usually deal with the <head> code, or because "head" is a shorter way of saying "header" (and after all, it usually sits on top of the page, but not always), they often use the terms interchangeably. That can be a bit confusing for developers.

Heading: The Content Hierarchy

In essence, a heading is the title of the page or a section. The <h1>-<h6> family of HTML elements represent headings.

They are sometimes called headers, other times called headlines... and they are neither! A header may contain a heading, but doesn't have to (see the feed header in the picture above); And headlines may use a heading, but they are not defined by it, they tend to have other elements too (more about this on the next section).

We use headings to define the outline of the content, providing hierarchy both for humans (text is larger and more identifiable) and machines (labeling each section for better accessibility and SEO results.)

One important thing: use headings for structure, not for layout. Do not use a <h1>-<h6> tag to make text look bigger or bolder. By doing that, we break the hierarchy of the page and it can be really confusing for assistive technology users.

Headline: Editorial Content

Usually, the headline is the big eye-catching text that introduces the page or section... just like on a newspaper! A headline is not an HTML concept, it is an editorial one; but developers often try to interpret it as a header or even just a heading.

And that is where confusion starts: a headline is for message delivery while headers and headings are for structure and hierarchy, respectively. Yes, headlines may contain headings, but they are not defined by the headings. There's more to them: titles, subtitles, calls to action...

There isn't a direct semantic HTML equivalent to a headline. The closest thing would be the <hgroup> element, but it has gone through many semantic changes over time and would only represent a really basic version of a headline (with a heading and a paragraph)

Some designers use "headline" as shorthand for "the big text at the top," even when it's a UI component instead of editorial content. Those cases are more of a combination of a heading and multiple buttons, which in my opinion would follow more into the header category... but I'm just a developer.

Conclusion

And that's it! Those are the 4 Hs of HTML: Head, Header, Heading, and Headline, and what each of them represents.

Here's a quick summary table with all of them:

As you may have noticed, their names are really close, and their functionality, while different, intertwines. They often go together or are combined in some manner.

But it is really important to understand their differences and have clear naming conventions to avoid miscommunications (and extra work) between the design and the development teams.

How about you? Have you ever "argued" or run into miscommunications with a designer or a developer who called a head a header?

comiCSS #255: Yellow

Alvaro Montoro — Mon, 24 Aug 2026 23:10:34 +0000

comiCSS is a side project I've been running for a while. I code (yes, code) comics about HTML and CSS in HTML and CSS. Every week, I publish a new cartoon (or at least I try).

This week's cartoon was inspired by a Jim Benton's cartoon from 20 years ago. It is goofy, it is absurd, but it is funny... or at least I found it funny enough to make a CSS-themed version (actually, two!)

The original hand-drawn version has more character, but I am also fond of like the childish kawaii version I did... even when it doesn't fully make sense in CSS (the yellows are actually the values indicated by the bottles, but #pee isn't a color, and making it #fee wouldn't be obvious as a joke).

I did a second version that I'm putting on the website as alternative. It is more CSS-oriented:

This version came second, but I like it more than the first one. Still goofy and a bit of a potty joke, but not as childish as the other one. And it uses more modern CSS too. So that’s nice.

What do you think? Do you like any of the two versions?

RGB is dead, long live RGB!

Alvaro Montoro — Fri, 21 Aug 2026 18:05:59 +0000

Wait a second! The original sentence is "The king is dead, long live the king!" But in that case, the first king is not the same as the second king. So wouldn't it be better to say something like:

RGB is dead, long live OKLCH!

That's much better. It is clearer that RGB –and the "RGB-based" colors like HEX and even HSL– are no longer the things to use in CSS. There's a new sheriff in town, that's OKLCH, and it's the color format that should be used moving forward.

Except... is that really the case?

OKLCH has many positive features that make it an ideal candidate:

It supports more colors: 50% more displayable colors than standard RGB! And that's a lot.
It handles the lightness in a more consistent way than RGB: two colors with the same L value will have a similar perceived darkness/lightness.
It is more human-readable: definitely true for lightness (refer to previous point), but debatable for hue and chroma.
It is more focused in human perception than in the machine: the way it represents colors is closer to how the human eye perceives them.
More natural transformations between colors: no more unexpected jumps in colors or gray in-betweens.

In summary, OKLCH is amazing. More available colors, better perception, better transformations... It beats RGB in almost any aspect that we compare the two. But does that mean you should ditch RGB and update all your projects into OKLCH?

Well... the answer is "it depends." RGB is not being removed from the standard and will always work in CSS. OKLCH provides brighter and more vibrant colors, but not all designs will require them.

But it also comes with some baggage:

It is widely supported... except by not-so-old browsers: this problem will die down with old browsers but, at this moment, around 7% of the browsers online don't support OKLCH. It is small number, but big enough to consider fallbacks.
It requires heavier calculations than RGB: color spaces like LCH have been around for decades, but they weren't implemented on the web earlier due to hardware limitations. OKLCH was created in late 2020 to solve some of those limitations and rendering issues, but still requires more computation than other color spaces.

The support is changing rapidly as browsers get deprecated, and the heavier computational cost is not a big deal as modern browsers are optimizing this instantly, so it is a low price to pay.

And you may be using OKLCH without knowing! Some browsers use OKLCH to interpolate transition colors because, as mentioned above, the transition between colors is more natural. So, it doesn't matter if you use OKLCH, RGB, Lab, HEX, or HSL... behind the scenes, they'll be converted to OKLCH for color transitions.

In summary, OKLCH is a superior format in many aspects and should be the favorite choice moving forward, especially if you want to get vibrant colors, precise control, and more natural gradient interpolations.

But don't feel obligated to drop the color format that you love to jump into OKLCH! RGB (and all the other color formats in CSS) are here to stay. As with all things in web development, use the tool that you need. And in some cases, OKLCH may not be needed.

I plan to still use RGB and hex in many of my sites to define font or background colors. They may seem old and rusty, but that's just #FFA500 for you! And it just works nicely.

Fancy Clipping with CSS

Alvaro Montoro — Mon, 17 Aug 2026 05:03:03 +0000

I have been using clip-path for ages, especially for CSS Art, but I was today years old when I learned some of the features that are available for the polygon() function in clip-path.

The other day, Temani Afif shared a demo that included some weird (to me) syntax for the polygon() function that allowed creating rounded shapes. It included the keyword round and a length. Something like this:

clip-path: polygon(round 10px, 100% 55%, 0 71%, 71% 0, 55% 100%, 10% 10%);

I have always used polygon() specifying a series of points that were used to clip the element that ended with really sharp edges. So, the first thing I thought was "This must be some Chrome-only experiment or something." And I was partially correct. Yes, it only works on Chrome at the moment, but the rounded behavior is defined in the CSS specification.

If you have code that specifies roundness in the polygon, for example:

div {
  width: 300px;
  height: 300px;
  background: red;
  clip-path: polygon(round 10px, 100% 55%, 0 71%, 71% 0, 55% 100%, 10% 10%);
}

You will get a rounded figure with clip-path. For the code above, it would be this (only on Chrome):

A rounded star in Chrome using clip-path :)

I have to admit, for me this was a mind-blown type of moment. Getting rounded edges before this required masking with SVG, or coming up with relatively complex native CSS, including masks and gradients. (Although thee the shape() function makes this considerably easier now.)

This feature is amazing, especially for the CSS Art that I like coding, but there's a big issue.

Support and Progressive Enhancement

As I have mentioned a few times before, this rounded feature is in the specs but at the moment it is only supported by Chrome. So... what happens when it runs on other browsers like Firefox or Safari?

Unfortunately, the answer is not good: the function is considered invalid and it is completely ignored. Which means that not only do we not get a rounded polygon, we don't get a polygon at all!

The same rounded star on Safari and Firefox :(

In the future we could use the CSS @if and @function at rules to have a rounded-polygon() function that would do this for us, but for now we need to find an alternative to progressively enhance the feature or gracefully degrade if it is not supported.

But there is something that we can currently do: use the @supports at-rule combined with custom properties.

:root {
  --round-clip:;

  @supports (clip-path: polygon(round 1px, 0 0, 0 0)) {
    --round-clip: round 10px,; /* notice the comma! */
  }
}

div {
  ...
  clip-path: polygon(var(--round-clip) 100% 55%, 0 71%, 71% 0, 55% 100%, 10% 10%);
}

Now, by default the variable will be empty, so we will get the "classic" clip-path with pointy edges. But, if rounded clipping is supported, the custom property will have a value that makes the clip-path have rounded edges:

Pointy star by default (left), and rounded star if supported (right) :D

I will not get into the weeds of how the roundness is calculated, but the CSS specification has a section with an explanation and many details on that.

But wait... there's more!

While the rounded paths are not supported by all browsers, there is another feature that I didn't know about and it is actually widely supported, even by Safari and Firefox: fill rules.

When you define a clip-path, all the area inside the path will be selected and visible, but developers can specify different keywords to have some control over that:

nonzero (default): the points inside the path will not be clipped.
evenodd: everything outside the path will be clipped, but within the path, it will depend on the count of lines and path edges around each point. If it's even, it will be clipped; if it's odd, it won't and it will be visible.

This is an oversimplification. The SVG specification has a more detailed explanation of how both keywords work, and I encourage you to read it.

Here's the example of the star from before using nonzero (default, could be omitted) and evenodd fill rules:

.div1 {
  ...
  clip-path: polygon(nonzero, 100% 55%, 0 71%, 71% 0, 55% 100%, 10% 10%);
}

.div2 {
  ...
  clip-path: polygon(evenodd, 100% 55%, 0 71%, 71% 0, 55% 100%, 10% 10%);
}

nonzero clipping (left) vs evenodd clipping (right)

The nonzero and evenodd fill rules would go before the round keyword if we are applying rounded clip paths. No comma separating the two. For example:

div {
  ...
  clip-path: polygon(nonzero round 10px, 100% 55%, 0 71%, 71% 0);
}

The fill-rules syntax not only works for polygon(). It also works with shape() and path(), so it's nice to get acquainted with it.

One of the fascinating things about CSS is how complete (and sometimes complex) it can be. You think you know about it and, boom! There's something different, and not necessarily new that you learn about it... even when you have used it continuously. You have to love that.

Here's an interactive demo that lets you play with the values described above: roundness, fill rules, and fallbacks (will only make a difference on Safari and Firefox). Tweak the controls and see how the star changes.

Don't Use A Class For That!

Alvaro Montoro — Fri, 07 Aug 2026 15:08:14 +0000

Developers love classes. They sprinkle them everywhere: .hidden, .loading, .active... But HTML already gives us attributes that do the job better. Attributes that are semantic, standardized, and supported across browsers. So, why reinvent the wheel? Let the browser handle the heavy lifting, and improve SEO and accessibility in the process.

Instead of adding more and more custom classes, embrace the platform and its versatility: use native attributes. Some times they may seem a little more verbose, but that's not always the case and the benefits justify it.

Here are some common native HTML attributes that can be used instead of classes.

[hidden]

Why defining a .hidden class (globally or per component), when you can just use the hidden attribute? It's built into HTML, supported across browsers, and doesn't need extra CSS. The browser knows exactly what you mean.

In some scenarios, you may need to redefine what [hidden] will do in CSS, but even on those cases, using the native attribute is more semantic and provides additional context than a custom class.

[required]

Form validation is the perfect ground for over-engineering. It is tempting to add a .required class in a label or input; instead, rely on the required attribute. The browser enforces it, screen readers announce it, and you don't need JavaScript to validate it! An element with the required attribute can be easily targeted with CSS using [required] so there's no need to duplicate attribute and class.

If you added the required class to the label associated with the required control, you can still style everything using combinators or the :has() pseudo-class.

[disabled]

Buttons, inputs, and other form controls often get a .disabled class, but the disabled attribute already exists. It prevents interaction, signals state to assistive technologies, and is baked into the platform.

Again, why duplicate efforts and specify that a control is disabled using a non-semantic (class) and a semantic (attribute) option? Simplify the code, and keep only the semantic one.

...or [inert]

If you want to "disable" more than just single controls, the inert attribute is a powerful way to remove interactivity from entire regions. It's cleaner than disabling every child element manually, and easier to style, just using [inert] to target the element.

[switch] or [role="switch"]

Another way to target elements without needing to use classes is relying on roles. For example, instead of creating your own .switch class, use the ARIA "switch" role that can be targeted doing [role="switch"] (or the switch attribute once it's widely supported). Easy to style and it communicates semantics to assistive technologies. A win-win.

Note: As with everything related to accessibility, tread carefully. If done properly, it has many benefits for users and developers; but it can be a pain when not. This applies to roles and ARIA attributes like the ones we'll see next.

[aria-current]

A component that every website has is a main navigation menu. And usually, that menu has a highlighted item that is the current page or section. Many times, developers use an .active class to be able to target that element, but there's an ARIA attribute that could be used to do the same: aria-current. It's semantic, accessible, and works across contexts.

...or [aria-selected="true"]

If you are coding some tabs, instead of using aria-current you can do aria-selected="true" for the current element. It signals which tab is active without relying on random class names.

[aria-busy="true"]

Skeleton loaders and "loading" states often rely on .loading or .skeleton classes. But aria-busy="true" can be used for this. It tells assistive technologies the element is updating, and you can target it directly with [aria-busy="true"] and style it.

[aria-invalid]

Validation errors often get an .error class, But aria-invalid exists for a reason. It communicates the error state to assistive technologies and gives you a styling hook with [aria-invalid="true"]. Why not take advantage of it? This may be useful in radio fieldsets or groups of controls.

Conclusion: Use Native Attributes

Using attributes instead of classes isn't just cleaner, it's more semantic, more accessible, and more future-proof. Classes are arbitrary labels that change from project to project; attributes are part of the language. When you use them, you're speaking HTML fluently instead of hacking around it. And the browser and assistive technologies will thank you for it.

Stop overusing classes. Let the platform do the work.

These are but a sample of all the native attributes that could be used to replace classes. There are many more out there. Do you use attributes like these in your projects to simplify code or improve accessibility? Share them in a comment.

10 Cool CodePen Demos (July 2026)

Alvaro Montoro — Sun, 02 Aug 2026 13:06:08 +0000

Cut Squares Tessellated Pattern - No Div - Pure CSS

Josetxu used some conic and linear gradients along with custom properties to craft this three-dimensional pattern. It's simple and CSS-only. A nice way to practice backgrounds, sizes and positioning.

WindowsXP Files

As part of a CodePen challenge, Zerde Turdybek created this web version of a Windows XP folder in which you can open files. A demo for the nostalgic crew :)

Inversive Geometry

Another demo by Zerde Turdybek. This time using P5.js to create something more interactive: pull the dots around to move the shapes and change the drawing.

A love letter to Pachinko

Liam Egan developed a Pachinko arcade game, but instead of balls falling into slots, it is letters, and you can control how many by clicking a button... even create some chaos by pressing multiple times quickly. And it is fun an entertaining seeing the letters fall and collide with the dots.

Monkey in the water

A minimalist CSS Art by Cassidy. This animated monkey relaxing in water was drawn using only three HTML elements and some CSSS, which is pretty impressive.

SKYDREAMS: A 3D 1K FEVER DREAM

This 90s style game reminds of the classic Sonic mini-games. Frank Forece coded it using just 1024 bytes of JavaSCript! Use the mouse to move right and left and click to jump. Have fun! It's not as easy as it seems.

Line Shadows (CSS)

This animation is fully created with HTML and CSS. Figuring out timings, paths, and layers sounds complicated, but the code is incredibly simple. Although that's not surprising as Amit Sheen is world-class at creating 3D CSS animations.

Water - WebGL Shader

This interactive shader (mouse over to "disturb" the water) by Tamino Martinius feels incredibly realistic. The liquid texture and the waves when moving around seem so natural and smooth. Great job.

testing text-fit

Right now, if you want text to expand and grow its size to occupy the whole line width, you need to do some math or resort to hacks (that generally include math or unnecessary animations). In this demo, Temani Afif showcases a new CSS feature landing on the latest Chrome that will simplify considerably that work: text-fit.

file drawer carousel

Vivi Tseng created this three-dimensional carousel/image gallery that performs really nicely. The transitions are smooth, the code is simple and small, and it can be customized and expanded to fit multiple purposes. I'm not a big fan of carousel, but this is a well-done component.

It's always...

Alvaro Montoro — Thu, 23 Jul 2026 14:48:10 +0000

Back after vacation and a short hiatus. Trying to get into speed and back into the routine of drawing comics and cartoons with CSS.

I like this cartoon, I may put it on a t-shirt and wear it at conferences 😄

The Sword of Damocles at Work: The Human Cost of Delayed Layoffs

Alvaro Montoro — Fri, 10 Jul 2026 19:50:17 +0000

Over a decade ago, my employer announced layoffs that would happen in waves. Every few months another round arrived. Nobody knew the criteria, who would be affected next, or when. The uncertainty was exhausting and took a toll on everyone. This week, Xbox announced a similar plan, and it brought those memories back.

Fifteen years ago, the company I worked at announced 38,000 layoffs that would happen in different stages. That was a nerve-wracking experience. They started with 10,000, then months later another 8,000, then months later another 9,000... You never knew the criteria, how or when they would happen.

What I remember from then was the angst of not knowing what was going to happen. The figurative sword of Damocles hanging over our heads, and the helplessness of it all. I don't wish that feeling on anyone.

At one point, adding layoffs, early retirements, and turnover, they reached the magic number of 38,000. When asked if layoffs would stop then, the explanation we received was that the target referred to layoffs, not overall headcount reduction. So layoffs continued while hiring accelerated.

During that period, many teams were involved in onboarding and training new employees and contractors, even as layoffs continued. Two weeks after training the new contractors, nearly my entire department was laid off, including myself. Only one person per project remained.

It was the last batch of layoffs from the original 38,000 they had announced.

My wife was 6-7 months pregnant. We lost our main source of income and the health insurance right at the moment we needed it the most. The company gave me a severance and offered $2,000 for not coming back in two years. I was interviewing internally so I rejected it. In hindsight, that was a mistake.

The internal process was rejected after going through a few good interviews. I never received an explanation. So my only option was taking a severance that was shorter than what it could have been, and looking for a new job.

But that was then.

It was a hot job market for software developers, and I was lucky to get interviews within weeks, a couple of offers in a matter of a month, and start a new job in 2 months.

Today, the situation is different.

This week, Xbox announced 3,200 layoffs. About half took effect immediately, while the remaining cuts are expected to happen over the next 12 months. No one knows when, who, why, or how. And, from experience, delayed layoffs like this are tough. An unnecessary burden.

The current job market for software engineers is... "interesting." While during my layoff I wasn't especially worried about finding a job (it was more of a matter of "when" than "if", and we had a baby waiting around the corner), the Xbox layoffs (as many of the current layoffs) come at a time in which "when" or "if" are blurry. There are jobs... but they are tougher to get and come with many conditions and changes.

Layoffs are always painful. But spreading them over months, creates a different kind of burden: uncertainty. It builds angst and stress that no one should have to endure, and that doesn't help anyone. Not the people who leave, and not the people who stay.

To all impacted, I'm sorry you're going through this. Best of luck to everyone.

10 Cool CodePen Demos (June 2026)

Alvaro Montoro — Sun, 05 Jul 2026 15:29:27 +0000

Sand bottle - WebGPU

Remember those bottles filled with colored sand that you can find in many souvenir stores? Liam Egan created a digital version using JavaScript WebGPU API. Click to drop sand, use the arrows to tilt and shake the bottles, and relax while enjoying this sandy demo.

Button State Builder

Margarita shared this button builder that allows to customize a control with icons, text, color, shape... even all the behavior in the different states of the button. Then you can easily get the HTML, CSS, and JS code to put it on any website. Pretty cool.

WebGL Switch Button

In this demo, the whole page turns into a giant three-dimensional toggle switch that can be activated clicking anywhere on the viewport. Explore the component: mouse over to make the component tilt or scroll to zoom in and out. A nice job by Toc.

Animated radial gradient mask over text

This demo is exactly what the title says: a radial gradient applied as a mask to some text. Cassidy aligned it perfectly with the hole in the O from "Hello" that makes this effect chef's kiss. You will need to uncomment the animation property in CSS to see the demo in action.

221.

ycw always creates impressive and original content. And this demo delivers. It's not only the effect in itself, but the use of light and shadows, and the perfecto choice of color that adds a timeless atmosphere. Beautiful.

vRLbdoSAIsoSQvisac

Mustafa Enes created different versions of this idea over the past month, all of them are great, but I picked this one as it is more interactive. Click on the screen to regenerate the pattern and move the mouse around to animate the colors. I don't know why, but there's a feeling of peace and joy while doing it.

beach sunset

I saw several demos by Vivi Tseng that caught my attention this month. Really enjoyed the general minimalistic style they all had and finally picked this animated one because it feels simple and pure, almost like a drawing a child would do during a vacation. I really enjoyed it.

Color Name Wheel

Mixing real CSS color names with invented ones (I'd fight for Tangerine Tango to be included in the specs), David Aerne sorts colors based on hue (angle) and lightness (radius) to create this colorful spinning spiral.

Wiggly/Wavy Range Slider

Temani Afif always comes with impressive CSS-only components, and this is an example of them. This demo ingeniously combines view transitions with shapes, offsets, and some properties to generate this squiggly component that should be, at least in theory, impossible. Note: this component only looks like this on Chromium.

Fun, animated link effects using paths and GSAP

If these colors and effects look familiar, that's because you've probably seen some of Josh Dillon's work with toggles before (and if you haven't, check them out!). Interactive and fun text effects that can be easily created with GSAP.

10 Cool CodePen Demos (May 2026)

Alvaro Montoro — Tue, 23 Jun 2026 20:10:37 +0000

Rheinturm Lichtzeitpegel Clock

Niklas Knaack drew this clock using HTML and CSS: gradients, paths, animations... and added a little JavaScript to change the lights so the clock is always in time. An impressive drawing.

Bioluminescent Tree

This virtual tree changes colors and shapes every time it is generated (and you can click on it to generate it faster). The game the colors pop up and illuminate the tree are mesmerizing. Great job by Mustafa Enes.

theSymmetrishQuality

Another generative art piece, this time by Sophia (fractal kitty), that is often in these lists with her demos. This time, the lines that form the spiral move hypnotically and peacefully... they kind of remind me of the wind lines in the news weather forecast on TV. Relaxing.

The Never Ending Story

This infinite scroll experience was crafted by Joe Ben Taylor using Lenis and GSAP. It is interesting because the parallax effect is not just a very high page, it really goes forever and snaps perfectly as you scroll.

Light card

Amit Sheen crafted this floating card using HTML and CSS only (the demo includes a little JS, but it is for updating a CSS custom property). The result is stunning, especially considering that all the lights and shadows are achieved using CSS.

The Witching Hour

More CSS art! This time it is Gemma Croad who coded this peaceful night scene with purple lilies. It is amazing what she can achieve by combining shapes and gradients.

Infinite Animation Speed Control

By using custom properties and the turn unit instead of hardcoded values, Temani Afif is able to spin these figures smoothly in either direction. Try it, mouse over them and check how the spinning changes naturally.

shape() generator

This demo is from a testing account by Miss Fox. It is a simple to use shape generator for the experimental shape() function in CSS. It is easy to use and convenient, and it can be used also to learn and understand the different possibilities of this feature.

FLIP text

Steve Gardner creates amazing things with code. This animated words is an example of that. He expands, collapse, removes, and attaches letters to transform words smoothly with GSAP in this looping animation.

Another world

A fantasy world from a the large windows of a castle or palace, that is as beautiful as it is dark. Created with WebGL, this demo by Liam Egan is impressive and evocative. I wish there was a way to move the camera to see more of the landscape.

@supports Lies: When CSS Says 'Yes' but Browsers Say 'LOL No'

Alvaro Montoro — Sat, 09 May 2026 15:02:44 +0000

According to the CSS Conditional Rules specification, the @supports at‑rule was originally only valid at the top level or inside another conditional group rule. The newer CSS Nesting specification expands this and explicitly allows @supports to appear inside nested style rules as well.

However, even when visually nested, a @supports rule does not inherit the surrounding selector. Browsers still evaluate it as if it were at the top level, which can be confusing:

.my-class {
  @supports (property: value) {
    ...
  }
}

While that @supports rule appears inside a style rule, it is not relative to that selector. It is applied in a general, global way (as if it were written at the root level) even though its placement suggests otherwise. This mismatch between placement and behavior is what makes nested @supports misleading.

Take this example:

li::marker {
  @supports (content: " - ") {
    content: " - ";
    color: red;
  }
}

This works in most browsers. Chrome, Safari, and Firefox support ::marker, and they all support content: " - ". But here's the catch: Safari does not support content inside ::marker.

With the code above, Chrome and Firefox render a red " - ", while Safari renders a red circle instead.

The confusing part is that the @supports condition succeeds even though the declaration is not actually supported in that specific context.

To be fair, this is probably less about browsers "moving" (or more accurately "parsing") nested @supports rules to the top level or in general context, and more about how @supports itself is defined. The feature checks if a declaration is generally valid, not if it is syntactically valid for a specific selector or pseudo-element context.

Maybe one solution would be to extend and (or introduce a new operator or function) so @supports checks can validate combinations rather than independent features. For example:

@supports selector(::marker) and (content: " - ")

@supports selector(::marker) xand (content: " - ")

@supports rule(::marker { content: " - " })

That would allow to test if a declaration truly works within a given rendering context, instead of only checking if the syntax is recognized.

Another (more ideal) solution would be for browsers to evaluate @supports relative to the scope in which it appears. But that may require too much computation... but hey! they said the same about :has(), and look at it go today!

Note: I know container and style queries may be a workaround, but they only have partial support and can only check for custom properties, not declarations (at least at the moment). Their use could help but wouldn't remove the misleading/limited nature of nested @supports.

10 Cool CodePen Demos (April 2026)

Alvaro Montoro — Fri, 08 May 2026 14:26:02 +0000

shimmer accordion

Jhey Tompkins creates beautiful components with perfect micro-interactions. This accordion is no exception with sliding, text appearing, color changes... A great experience as always.

Vintage VHS blank tapes

These VHS tapes CSS Art created by Gemma Croad perfectly evoque the style of the time, with all the colors, lines, and patterns. A taste of nostalgia served with a scoop of CSS gradients and shadows.

Double animation marquee

Normally I wouldn't highlight a marquee, but this one by Natalia is different. It has an ingenious way to use pseudo-elements and a scale transform to move the marquee in two directions (text to the left, colors to the right) while changing sizes. It was fun to explore the code.

Pure CSS Ripple Effect

Text effects on the web normally use JS or SVG, but Nik created this one using exclusively CSS. Combining radial gradients with blur and contrast filters (a technique that helps soften and smooth edges) and animations, makes for a nice ripple effect.

Artemis 2 - scroll to launch #cssonly

Chris Bolson created this CSS Art of the Artemis rocket and added a twist to it: as you scroll down the page, the rocket will launch and separate on its way to space.

Note: because it uses scroll-driven animations, it does not work on Firefox yet.

Puppet Strings - CSS

Another CSS demo, this time by Josetxu. This time it is an interactive puppet that can be rotated or moved by using the strings on top. The author has been playing with 3D CSS lately, I can't wait to see what's coming next.

GameBoy

First was nostalgia with VHS, now it is nostalgia with video-games and consoles. A second CSS Art demo by Gemma Croad in this list, a GameBoy illustration coded only with HTML and CSS.

Air Hockey

Matt Cannon shared this air hockey game coded in JavaScript using an HTML5 canvas. The game is fun, the animations are smooth, and the difficulty is hard... really hard! I don't remember scoring a single goal! You should try it!

Bauhaus countdown

I love the Bauhaus style that Stijn Van Minnebruggen used to code this countdown numbers. They are slick, colorful, and smooth. The only thing that would make this demo even better would be doing the countdown in pure CSS instead of JavaScript, but I can see how that would be a pain in the neck.

Looped Day / Night Blob Toggle

Margarita combines SVG, CSS, and JavaScript to create an animated toggle that goes from day to night (and vice versa). I like how the JavaScript controls the animation so toggling preserves the state, continuing from the point it was triggered.