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
Responsive Hexagon Grid without Media Queries: "Using modern #CSS to create a responsive hexagon grid. corner-shape to create the hexagon shape and sibling-index() combined with math functions to conditionally apply a margin to only the first element of every other row." css-tip.com/hexagon-grid/
Responsive Hexagon Grid without Media Queries
A few lines of modern CSS to create a responsive grid of hexagon shapes (and more!)
css-tip.com
January 23, 2026 at 6:04 PM
Responsive Hexagon Grid without Media Queries: "Using modern #CSS to create a responsive hexagon grid. corner-shape to create the hexagon shape and sibling-index() combined with math functions to conditionally apply a margin to only the first element of every other row." css-tip.com/hexagon-grid/
Reposted by Konstantin Dankov
A few noteworthy new additions to the CSS Almanac...
animation-range:
css-tricks.com/almanac/prop...
view-transition-class:
css-tricks.com/almanac/prop...
superellipse():
css-tricks.com/almanac/func...
Props to @undeadinstitute.bsky.social, @sunkanmifafowora.bsky.social and Saleh Mubasher!
animation-range:
css-tricks.com/almanac/prop...
view-transition-class:
css-tricks.com/almanac/prop...
superellipse():
css-tricks.com/almanac/func...
Props to @undeadinstitute.bsky.social, @sunkanmifafowora.bsky.social and Saleh Mubasher!
January 20, 2026 at 4:47 PM
A few noteworthy new additions to the CSS Almanac...
animation-range:
css-tricks.com/almanac/prop...
view-transition-class:
css-tricks.com/almanac/prop...
superellipse():
css-tricks.com/almanac/func...
Props to @undeadinstitute.bsky.social, @sunkanmifafowora.bsky.social and Saleh Mubasher!
animation-range:
css-tricks.com/almanac/prop...
view-transition-class:
css-tricks.com/almanac/prop...
superellipse():
css-tricks.com/almanac/func...
Props to @undeadinstitute.bsky.social, @sunkanmifafowora.bsky.social and Saleh Mubasher!
Reposted by Konstantin Dankov
This one post says so so much.
January 18, 2026 at 2:46 AM
This one post says so so much.
Upcoming Audiobooks
Jan 27
Expeditionary Force #19
Ground State
Craig Alanson
March 17 Able Bodied Soldier #2
Jason Anspach
March 26
The Children of Time Novels #4
Children of Strife
Adrian Tchaikovsky
April 14
The Captive's War #2
The Faith of Beasts
James S.A. Corey
Jan 27
Expeditionary Force #19
Ground State
Craig Alanson
March 17 Able Bodied Soldier #2
Jason Anspach
March 26
The Children of Time Novels #4
Children of Strife
Adrian Tchaikovsky
April 14
The Captive's War #2
The Faith of Beasts
James S.A. Corey
January 16, 2026 at 8:31 PM
Upcoming Audiobooks
Jan 27
Expeditionary Force #19
Ground State
Craig Alanson
March 17 Able Bodied Soldier #2
Jason Anspach
March 26
The Children of Time Novels #4
Children of Strife
Adrian Tchaikovsky
April 14
The Captive's War #2
The Faith of Beasts
James S.A. Corey
Jan 27
Expeditionary Force #19
Ground State
Craig Alanson
March 17 Able Bodied Soldier #2
Jason Anspach
March 26
The Children of Time Novels #4
Children of Strife
Adrian Tchaikovsky
April 14
The Captive's War #2
The Faith of Beasts
James S.A. Corey
Reposted by Konstantin Dankov
Liked this observation from Addy Osmani:
“Abstractions don’t remove complexity. They move it to the day you’re on call.”
addyosmani.com/blog/21-less...
“Abstractions don’t remove complexity. They move it to the day you’re on call.”
addyosmani.com/blog/21-less...
21 Lessons From 14 Years at Google
Lessons learned from 14 years of engineering at Google, focusing on what truly matters beyond just writing great code.
addyosmani.com
January 4, 2026 at 7:35 PM
Liked this observation from Addy Osmani:
“Abstractions don’t remove complexity. They move it to the day you’re on call.”
addyosmani.com/blog/21-less...
“Abstractions don’t remove complexity. They move it to the day you’re on call.”
addyosmani.com/blog/21-less...
Reposted by Konstantin Dankov
Pure, minimal #CSS responsive hex #grid with no breakpoints 🎇
Live on @codepen.io: codepen.io/thebabydino/...
#Maths
Live on @codepen.io: codepen.io/thebabydino/...
#Maths
January 3, 2026 at 3:37 PM
Pure, minimal #CSS responsive hex #grid with no breakpoints 🎇
Live on @codepen.io: codepen.io/thebabydino/...
#Maths
Live on @codepen.io: codepen.io/thebabydino/...
#Maths
Reposted by Konstantin Dankov
December 31, 2025 at 10:16 PM
Reposted by Konstantin Dankov
Huge shoutout to the Every Layout book, got a ton of mileage out of it. Never thought about this approach but it actually makes so much sense, I'm finally feeling somewhat satisfied with the CSS I'm writing 😁
every-layout.dev
every-layout.dev
Relearn CSS layout
every-layout.dev
December 31, 2025 at 4:16 PM
Huge shoutout to the Every Layout book, got a ton of mileage out of it. Never thought about this approach but it actually makes so much sense, I'm finally feeling somewhat satisfied with the CSS I'm writing 😁
every-layout.dev
every-layout.dev
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/...