Konstantin Dankov
@dankov.me
Web Developer since 2002. Focus on UI/UX and front-end development. Teaching HTML, CSS and JavaScript.
Audiobooks, Photography and all things tech.
Based in Sofia, Bulgaria
Audiobooks, Photography and all things tech.
Based in Sofia, Bulgaria
Reposted by Konstantin Dankov
Pure #CSS #3D demo on @codepen.io: polyhedra morphing sequence codepen.io/thebabydino/...
Absolutely no magic numbers, everything computed.
See Pen description for the how behind 😼
#Maths #geometry
Absolutely no magic numbers, everything computed.
See Pen description for the how behind 😼
#Maths #geometry
December 26, 2025 at 9:22 AM
Pure #CSS #3D demo on @codepen.io: polyhedra morphing sequence codepen.io/thebabydino/...
Absolutely no magic numbers, everything computed.
See Pen description for the how behind 😼
#Maths #geometry
Absolutely no magic numbers, everything computed.
See Pen description for the how behind 😼
#Maths #geometry
Reposted by Konstantin Dankov
Reposted by Konstantin Dankov
Inner box has bigger rounded corners than outer. How would you code this with 1 div and no pseudos? No SVG, no images, no JS.
Can you figure out before checking my @codepen.io solution?
Just 7 #CSS declarations. Sizes, padding, border-radius, shadow, background and ? 🤔
codepen.io/thebabydino/...
Can you figure out before checking my @codepen.io solution?
Just 7 #CSS declarations. Sizes, padding, border-radius, shadow, background and ? 🤔
codepen.io/thebabydino/...
December 20, 2025 at 6:50 AM
Inner box has bigger rounded corners than outer. How would you code this with 1 div and no pseudos? No SVG, no images, no JS.
Can you figure out before checking my @codepen.io solution?
Just 7 #CSS declarations. Sizes, padding, border-radius, shadow, background and ? 🤔
codepen.io/thebabydino/...
Can you figure out before checking my @codepen.io solution?
Just 7 #CSS declarations. Sizes, padding, border-radius, shadow, background and ? 🤔
codepen.io/thebabydino/...
Reposted by Konstantin Dankov
Radar!
The ancient version, made ~13 years ago on @codepen.io codepen.io/thebabydino/...
... and the `conic-gradient()` version!
codepen.io/thebabydino/...
#CSS
The ancient version, made ~13 years ago on @codepen.io codepen.io/thebabydino/...
... and the `conic-gradient()` version!
codepen.io/thebabydino/...
#CSS
December 19, 2025 at 6:48 PM
Radar!
The ancient version, made ~13 years ago on @codepen.io codepen.io/thebabydino/...
... and the `conic-gradient()` version!
codepen.io/thebabydino/...
#CSS
The ancient version, made ~13 years ago on @codepen.io codepen.io/thebabydino/...
... and the `conic-gradient()` version!
codepen.io/thebabydino/...
#CSS
Reposted by Konstantin Dankov
👀 Working on the third module of my animations course, where we learn to create advanced cursor interactions.
Having fun with eyes. Not creepy at all. 😅
Having fun with eyes. Not creepy at all. 😅
December 18, 2025 at 10:06 PM
👀 Working on the third module of my animations course, where we learn to create advanced cursor interactions.
Having fun with eyes. Not creepy at all. 😅
Having fun with eyes. Not creepy at all. 😅
Reposted by Konstantin Dankov
December 19, 2025 at 2:59 AM
Reposted by Konstantin Dankov
Remake of an old, old @codepen.io animation with 2025 #CSS codepen.io/thebabydino/...
Now using conic-gradient() + mask instead of an SVG segments ring image. CSS grid for layout. Container query units so ring sizes adapt to number of rings (passed to CSS via a var) & available space. And more 🐱
Now using conic-gradient() + mask instead of an SVG segments ring image. CSS grid for layout. Container query units so ring sizes adapt to number of rings (passed to CSS via a var) & available space. And more 🐱
December 19, 2025 at 4:02 AM
Remake of an old, old @codepen.io animation with 2025 #CSS codepen.io/thebabydino/...
Now using conic-gradient() + mask instead of an SVG segments ring image. CSS grid for layout. Container query units so ring sizes adapt to number of rings (passed to CSS via a var) & available space. And more 🐱
Now using conic-gradient() + mask instead of an SVG segments ring image. CSS grid for layout. Container query units so ring sizes adapt to number of rings (passed to CSS via a var) & available space. And more 🐱
Reposted by Konstantin Dankov
Performance monitoring for web components. Cassondra Roberts shows how the User Timing API tracks lifecycle milestones and reveals metrics important to user experience. #performance #webcomponents
allons-y.llc/posts/2025-1...
allons-y.llc/posts/2025-1...
November 25, 2025 at 4:18 PM
Performance monitoring for web components. Cassondra Roberts shows how the User Timing API tracks lifecycle milestones and reveals metrics important to user experience. #performance #webcomponents
allons-y.llc/posts/2025-1...
allons-y.llc/posts/2025-1...
Reposted by Konstantin Dankov
A little blending demo on @codepen.io: codepen.io/thebabydino/...
If you're interested in the how behind, check out my @css-tricks.bsky.social article Taming Blend Modes: `difference` and `exclusion` css-tricks.com/taming-blend...
#CSS
If you're interested in the how behind, check out my @css-tricks.bsky.social article Taming Blend Modes: `difference` and `exclusion` css-tricks.com/taming-blend...
#CSS
December 18, 2025 at 9:06 AM
A little blending demo on @codepen.io: codepen.io/thebabydino/...
If you're interested in the how behind, check out my @css-tricks.bsky.social article Taming Blend Modes: `difference` and `exclusion` css-tricks.com/taming-blend...
#CSS
If you're interested in the how behind, check out my @css-tricks.bsky.social article Taming Blend Modes: `difference` and `exclusion` css-tricks.com/taming-blend...
#CSS
Reposted by Konstantin Dankov
So you think you know CSS borders, but did you know you could use gradients and images? This article goes in-depth how borders works, and tricks to get around some of their limitations.
andromedagalactic.com/blog/styling...
#css #ui #mvpbuzz
andromedagalactic.com/blog/styling...
#css #ui #mvpbuzz
December 16, 2025 at 2:30 PM
So you think you know CSS borders, but did you know you could use gradients and images? This article goes in-depth how borders works, and tricks to get around some of their limitations.
andromedagalactic.com/blog/styling...
#css #ui #mvpbuzz
andromedagalactic.com/blog/styling...
#css #ui #mvpbuzz
Reposted by Konstantin Dankov
ICYMI, some considerations for how to make CSS Carousels accessible:
developer.chrome.com/blog/accessi...
developer.chrome.com/blog/accessi...
Make accessible carousels | Blog | Chrome for Developers
How the features in CSS Overflow 5 can help you create more accessible carousel patterns.
developer.chrome.com
December 14, 2025 at 9:31 AM
ICYMI, some considerations for how to make CSS Carousels accessible:
developer.chrome.com/blog/accessi...
developer.chrome.com/blog/accessi...
Reposted by Konstantin Dankov
How to Add and Remove Items From a Native #CSS Carousel (…with CSS): "It's already quite impressive you can build a carousel with no JS at all (in Chrome, for now, anyway) and with some checkbox-hack stuff we can control dynamically what is shown." frontendmasters.com/blog/how-to-...
How to Add and Remove Items From a Native CSS Carousel (…with CSS)
It's already quite impressive you can build a carousel with no JS at all (in Chrome, for now, anyway) and with some checkbox-hack stuff we can control dynamically what is shown.
frontendmasters.com
December 10, 2025 at 6:02 PM
How to Add and Remove Items From a Native #CSS Carousel (…with CSS): "It's already quite impressive you can build a carousel with no JS at all (in Chrome, for now, anyway) and with some checkbox-hack stuff we can control dynamically what is shown." frontendmasters.com/blog/how-to-...
Reposted by Konstantin Dankov
Today's Audible daily deal is @aptshadow.bsky.social 's Service Model. This is a standalone tale of Charles, a robot who doesn't quite always get what has gone wrong.
www.audible.co.uk/pd/Service-M...
www.audible.co.uk/pd/Service-M...
Service Model
Check out this great listen on Audible.com. Task List Item No. 1 – Become self-aware . . .A witty tale of robotic murder, rebellion and belonging from the master of science fiction, Service Model is p...
www.audible.co.uk
December 6, 2025 at 11:18 AM
Today's Audible daily deal is @aptshadow.bsky.social 's Service Model. This is a standalone tale of Charles, a robot who doesn't quite always get what has gone wrong.
www.audible.co.uk/pd/Service-M...
www.audible.co.uk/pd/Service-M...
Reposted by Konstantin Dankov
How to use #CSS to fix the irradiation illusion /
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
Using CSS to fix the irradiation illusion · November 29, 2025
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev
November 29, 2025 at 9:52 PM
How to use #CSS to fix the irradiation illusion /
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev/adjust-perce...
Quick little UI Challenge experiment. Circular Apps Menu
codepen.io/kdankov/pen/...
codepen.io/kdankov/pen/...
UI Challenge - Circular Apps Menu
...
codepen.io
November 27, 2025 at 12:30 PM
Quick little UI Challenge experiment. Circular Apps Menu
codepen.io/kdankov/pen/...
codepen.io/kdankov/pen/...
Reposted by Konstantin Dankov
November 24, 2025 at 5:11 AM
Reposted by Konstantin Dankov
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
November 1, 2025 at 6:27 AM
✍️ New Article: Use Cases for Field Sizing
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
A quick look at field-sizing and where it can be used. I hope this will land in Firefox and Safari soon. The good thing? We can use it as an enhancement.
🔗 ishadeed.com/article/fiel...
Reposted by Konstantin Dankov
I had a chat with @nerdy.dev about his somewhat recent job hunt, where he talked a lot about the misalignment between the technical interviews and the roles they were looking to fill... and how even if they tried to fix the interviews, it didn't seem to help 😅
October 30, 2025 at 2:36 PM
I had a chat with @nerdy.dev about his somewhat recent job hunt, where he talked a lot about the misalignment between the technical interviews and the roles they were looking to fill... and how even if they tried to fix the interviews, it didn't seem to help 😅
Reposted by Konstantin Dankov
Simplify: "Honestly, I feel like web devs are constantly being gaslit into thinking complex over-engineered solutions are the only option. When the discourse is dominated by people invested in frameworks, all our default thinking will involve frameworks." adactio.com/journal/22178
Simplify
Reminding myself just how much you can do with CSS these days.
adactio.com
October 27, 2025 at 5:05 PM
Simplify: "Honestly, I feel like web devs are constantly being gaslit into thinking complex over-engineered solutions are the only option. When the discourse is dominated by people invested in frameworks, all our default thinking will involve frameworks." adactio.com/journal/22178
Reposted by Konstantin Dankov
small details that matter 🧑🍳
use CSS pseudoelements to bridge the :hover gap w/ :has() + inset
a:has(+ .dots) a::after,
.dots + a::after {
position: absolute;
content: '';
}
a:has(+ .dots) a::after { inset: 0 -50% 0 100%; }
.dots + a::after { inset: 0 100% 0 -50%; }
use CSS pseudoelements to bridge the :hover gap w/ :has() + inset
a:has(+ .dots) a::after,
.dots + a::after {
position: absolute;
content: '';
}
a:has(+ .dots) a::after { inset: 0 -50% 0 100%; }
.dots + a::after { inset: 0 100% 0 -50%; }
October 22, 2025 at 4:54 PM
small details that matter 🧑🍳
use CSS pseudoelements to bridge the :hover gap w/ :has() + inset
a:has(+ .dots) a::after,
.dots + a::after {
position: absolute;
content: '';
}
a:has(+ .dots) a::after { inset: 0 -50% 0 100%; }
.dots + a::after { inset: 0 100% 0 -50%; }
use CSS pseudoelements to bridge the :hover gap w/ :has() + inset
a:has(+ .dots) a::after,
.dots + a::after {
position: absolute;
content: '';
}
a:has(+ .dots) a::after { inset: 0 -50% 0 100%; }
.dots + a::after { inset: 0 100% 0 -50%; }
Reposted by Konstantin Dankov
Hey, so @wil.to has a new online course called JavaScript for Everyone brought to you by our friends at @piccalil.li.
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
An Introduction to JavaScript Expressions | CSS-Tricks
A thorough but approachable lesson on JavaScript expressions excerpted JavaScript For Everyone, a complete online course offered by our friends at Piccalilli.
css-tricks.com
October 22, 2025 at 7:11 PM
Hey, so @wil.to has a new online course called JavaScript for Everyone brought to you by our friends at @piccalil.li.
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
Can't. Recommend. Enough. 🏆
Anyway, enjoy this free excerpt on JS expressions from the course!
css-tricks.com/an-introduct...
Reposted by Konstantin Dankov
Because this got asked on reddit www.reddit.com/r/css/commen...
Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.
On @codepen.io: codepen.io/thebabydino/...
#CSS #Maths
Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.
On @codepen.io: codepen.io/thebabydino/...
#CSS #Maths
October 8, 2025 at 5:37 PM
Because this got asked on reddit www.reddit.com/r/css/commen...
Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.
On @codepen.io: codepen.io/thebabydino/...
#CSS #Maths
Made a demo with various options for angled grid columns. Uses mathematical computations to ensure all fits just right all the time, regardless of viewport or number of columns.
On @codepen.io: codepen.io/thebabydino/...
#CSS #Maths
Reposted by Konstantin Dankov
just deployed to gradient.style
- better import design
- more resilient parser (understands more syntax)
- supports multi-layered gradient imports
- better import design
- more resilient parser (understands more syntax)
- supports multi-layered gradient imports
October 3, 2025 at 5:55 AM
just deployed to gradient.style
- better import design
- more resilient parser (understands more syntax)
- supports multi-layered gradient imports
- better import design
- more resilient parser (understands more syntax)
- supports multi-layered gradient imports
Reposted by Konstantin Dankov
Reposted by Konstantin Dankov
Un-Sass'ing My CSS: Compiling Multiple #CSS Files into One: "Discover how to transition from Sass to modern CSS, exploring ways we can import multiple CSS files into one sole CSS file." www.alwaystwisted.com/articles/UnS...
Un-Sass'ing My CSS: Compiling Multiple CSS Files into One Always Twisted
Discover how to transition from Sass to modern CSS, exploring ways we can import multiple CSS files into one sole CSS file
www.alwaystwisted.com
September 19, 2025 at 5:04 PM
Un-Sass'ing My CSS: Compiling Multiple #CSS Files into One: "Discover how to transition from Sass to modern CSS, exploring ways we can import multiple CSS files into one sole CSS file." www.alwaystwisted.com/articles/UnS...