Konstantin Dankov

This will be epic! #bobiverse Thank you @dennisetaylor.bsky.social

💡 CSS Tip! An old design pattern solved by a modern CSS feature. css-tip.com/responsive-s... Learn how Gap Decorations makes it easy to add a separator between items using simple code with no hacks. It works with different alignment settings, and you can easily adjust the shape as well.

@codepen.io Is there a reason I can't see more than one page of my loved pens? codepen.io/kdankov/pens...

New demo: Animated CSS Grid Layout. codepen.io/bramus/pen/o... Here’s the thing: No View Transitions. No JS at all. Instead, it uses Anchor Positioning to anchor the cell contents to the cell. Then, CSS transitions are used to animate the contents to their new location as the grid re-layouts.

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! css-tip.com/node-connect... Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀 Drag the elements and see the magic 🪄

What about a straight line that bends when the circles get closer and stretches when they get farther. It's surely not possible using pure CSS, right? Right!? 👀 css-tip.com/bending-line/ Probably my new favorite demo, powered by the modern features. CSS is awesome! 😍

A new #cssonly carousel demo built around the :scroll-* pseudo-elements. Using: – CSS anchor positioning for centered placement – container style queries to toggle between transition modes A fun experiment with some modern CSS features. See the demo on @codepen.io codepen.io/editor/cbols...

It's been two months since I launched The Layout Maestro interactive CSS course. For Eid, I'm running a $25 discount through Sunday, May 31. If you've been keeping the course on your radar, this is a good week to enroll in the course. thelayoutmaestro.com

For all the folks that ever thought frontend development was "easy" This week on Overcommitted we chatted with @nerdy.dev all about job searching in 2026, career growth, and how and how the heck people figure out CSS in the age of AI. Check it out wherever you listen to podcasts!

It's a great time to get @sarasoueidan.com's Practical Accessibility course (25% off!) if you haven't already... ...and why haven't you already, eh? It's wonderful and worth every penny. practical-accessibility.today#buy

Let’s build a documentation-first, framework-agnostic component library using web standards and solve the combination of problems that would be present if we relied on frameworks, with Scott Riley. piccalil.li/blog/framewo...

Folks like Kevin, who create content for the rest of us to make sense of the web, are a key part of our industry. They help us truly understand the concepts the web is based on, instead of just copying from outdated patterns or AIs. We need them in order to keep pushing the web forward.

In case you missed it, I wrote about the CSS round() function. ishadeed.com/article/css-...

Gap decorations are now in Chromium 149 (stable rollout in 5 days)! Shoutout to the folks at Microsoft Edge for the implementation, post, and demos: developer.chrome.com/blog/gap-dec...

"CSS Only Marching Ants Border Effect" by Niklas Knaack codepen.io/NiklasKnaack...

Scroll-Driven Animations: Exploring the majestic new animation-timeline API www.joshwcomeau.com/animation/sc... Another superb introduction article by @joshwcomeau.com #CSS

I successfully ignored crypto and NFTs, I'm thinking I might just wait until this AI coding thing just blows over… larsfaye.com/articles/age...

“So, in short: you now have an LLM running on your machine, and any website you visit can make use of it, and whatever processing resources it requires.” The definitive piece on Google participating in the web standards process “the way a bear participates in the ‘camping’ process.”, by @wil.to 👏

Anime.js 4.4 is out with CSS transforms and Stagger improvements, plus a new scrambleText() helper to easily create complex text scramble effects! Docs: animejs.com/documentatio... Release notes: github.com/juliangarnie... Examples: codepen.io/collection/P...

Did you know about Clear-Site-Data header? 👀 One HTTP header to clear cookies, storage, or cache for your site. Perfect for logout flows. Learn more 👇 developer.mozilla.org/en-US/docs/...

Blown away by @andremichelle.bsky.social's openDAW, which runs ENTIRELY in the browser! 🤯 opendaw.org So much thought and attention to detail went into this. And it's all Open Source too! github.com/andremichell... The web is AMAZING 🤩 #BTConf

Whimsical Animations launches on Monday and I’m already getting the pre-launch jitters. 😂 I really think this is my best course. Excited to finally get it published! ✨

"Colour loop" by Riley Shaw codepen.io/editor/riley...

2 things about @kevinpowell.co's new CSS Demystified course. 1. I was terrified of layers and the course gives a great intro. No longer terrified. 2. His joy and excitement are contagious -- an instant mood lifter every lesson. For anyone learning CSS: courses.thecascade.dev

If you like such stuff, here is what you might like as well 👇 css.vpon.me

CSS animations just got way more powerful. You can now animate gradients, numbers, and custom properties smoothly. @ property makes it possible.

*Two* of my articles made it into the latest issue of Frontend Focus (@frontendfocus.bsky.social), which is, first of all, an honor, and second, it reminded me that I haven’t shared my article on “Building a UI Without Breakpoints” yet... (👇)

Do you know that you can use `image-set` to serve different background images right in CSS? Now you do and `image-set` is "widely available" since last month! 🎉 https://developer.mozill...

Spent way too long on that SVG sphere component. Added a bit of scroll interaction so people actually realize it’s 3D PS: you can download the sphere SVG from the settings panel rybitten.space

Just another clock… but really an excuse to play with CSS anchor positioning to place time labels along expanding clock-hand rings. JS updates a few CSS custom properties, whilst CSS uses and display the values. The cheese color swapper was just an extra bit of fun. See the demo on @codepen.io

The great CSS expansion. Pavel Laptev tours CSS features replacing JavaScript libraries like Floating UI, Radix, GSAP, and React Select, cutting up to 322 kB of JavaScript. #css #performance blog.gitbutler.com/t...

I've proposed a series of changes to popover=hint. If you use web popovers, I'd love to know if the changes in the first post of this issue make sense, or, more importantly, if these changes would break your current usage of popovers. github.com/whatwg/html/...

After a year of building, The Layout Maestro is officially live! 🎹🥳 An interactive CSS course that teaches you how to think in CSS layouts. 70+ lessons, 7 layouts, 150+ interactive demos! Ready to level up your layout skills? Enroll now👇: thelayoutmaestro.com

Wouldn't it be great to have native image cropping in CSS? It actually exists: object-view-box.

CSSkit, a high-performance CSS toolchain written in Rust. Keith Cirkel’s project combines parsing, minification, linting, formatting, and LSP integration into one zero-config tool inspired by oxc. #css #tools https://csskit.rs

Folded corner with CSS. Kitty Giraudel breaks down a hover effect where an image corner folds over using clip-path, a white triangle, and shadow elements. Plus CSS transitions for smooth animation. #css #animation kittygiraudel.com/20...

True, it’s not always WebKit that’s behind! In fact, here is some data: webstatus.dev/stats#missin... As of today, the number of features blocked by each browser is: - Safari: 55 - Firefox: 50 - Chrome: 12 I’ll let you draw your own conclusions…

Hell yeah new @mass-driver.com! MD UI looks awesome. So happy to have backed MD IO on futurefonts.com all those years ago. mass-driver.com/article/md-u...

Speed up rendering with content-visibility: auto ⚡ This CSS property skips rendering off-screen content until needed, giving massive performance wins on long pages. ⋅ Pairs with contain-intrinsic-size ⋅ Zero-effort lazy rendering Learn more 👇 developer.mozilla.org/en-US/docs/...

The Big Gotcha of Anchor Positioning: "I thought that one of the benefits of #CSS Anchor Positioning is you can position elements relative to others regardless of where they are in the DOM. But no, you can’t. There are limitations which feel inscrutable at first." frontendmasters.com/blog/the-big...

I've decided to have a dabble into the world of making video content. If you're interested in HTML/CSS/JS, AI coding tips and tutorials, and just frontend topics in general, subscribe to my new channel, Frontend Guidelines. www.youtube.com/@FrontendGui...

Building dynamic toggletips using anchored container queries #css

Yay! 🎉 The grid lady (Rachel Andrew) 😉 just announced that subgrid becomes widely available next week! #WebDayOut

TIL about the share_target manifest member, which allows installed Progressive Web Apps to be registered as a share target in the system's share dialog. #WebDayOut developer.mozilla.org/en-US/docs/W...

A little gem for my typography lover friends: a tool to visually explore glyphs from different typefaces designed by David Jonathan Ross glyphs.djr.com/

Everything you never wanted to know about visually-hidden. @dbushell.com traces the history of the pattern, tests a minimal CSS approach, and explains why the platform still lacks a native alternative. #a11y #css dbushell.com/2026/02...

Curious about custom <select>? I wrote about some of my recent demos over at @css-tricks.com! Take a look ✨ css-tricks.com/abusing-cust...

htmxRazor 1.2.0 is out. Toast notifications, pagination, ARIA live regions, CSS cascade layers, View Transitions API support, and hx-on:* attributes for htmx 2.x. All server-rendered. All Tag Helpers. All ASP.NET Core. htmxRazor.com github.com/cwoodruff/htmxRazor