Konstantin Denerz
@konstantindenerz.bsky.social
Consultant & Dev & Designer @ Thinktecture; export const { CSS, 🤖 AI, 🅰️ngular, Material, nvim, UX⚡️UI, Figma, CodePens,🖖... } = ❤️;
🌐 UTC+1
https://konstantin-denerz.com
https://codepen.io/konstantindenerz
🌐 UTC+1
https://konstantin-denerz.com
https://codepen.io/konstantindenerz
Pinned
Just built my new split keyboard with a trackball! ✨⌨️🖱️
#Keyball39 #customkeyboard #jlcpcb #keyball #trackball #splitkeyboard #keyballish #keyball39ish #mechanicalkeyboard #webdev #dev #css #figma
#Keyball39 #customkeyboard #jlcpcb #keyball #trackball #splitkeyboard #keyballish #keyball39ish #mechanicalkeyboard #webdev #dev #css #figma
Reposted by Konstantin Denerz
📙 📗 📘 📕 The History of Themeable User Interfaces: bradfrost.com/blog/post/th...
It was an incredible experience to write this piece. It blurs together the history of computers, video games, the web, design systems, and my own existence on this planet.
It was an incredible experience to write this piece. It blurs together the history of computers, video games, the web, design systems, and my own existence on this planet.
The History of Themeable User Interfaces
A full-ish history of user interfaces that can be themed to meet the opportunities and constraints of the time
bradfrost.com
August 28, 2025 at 5:52 PM
📙 📗 📘 📕 The History of Themeable User Interfaces: bradfrost.com/blog/post/th...
It was an incredible experience to write this piece. It blurs together the history of computers, video games, the web, design systems, and my own existence on this planet.
It was an incredible experience to write this piece. It blurs together the history of computers, video games, the web, design systems, and my own existence on this planet.
Reposted by Konstantin Denerz
🥳 CSS functions have arrived*!!! 🥳
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
una.im | 5 Useful CSS functions using the new @function rule
CSS custom functions are a gamechanger. Here are 5 really useful examples.
una.im
August 13, 2025 at 6:00 PM
🥳 CSS functions have arrived*!!! 🥳
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
Reposted by Konstantin Denerz
July 25, 2025 at 3:32 PM
⛵ 💻 Just published a fun little CLI toy: @konstantindenerz/yacht-animation
Let a yacht sail across your terminal like it’s 1995 ⛵️🌊
```
npm install -g @konstantindenerz/yacht-animation
yacht-animation
```
📦 npm: www.npmjs.com/package/@kon...
#cli #devfun #npm #ascii #yacht #sailing #nautics
Let a yacht sail across your terminal like it’s 1995 ⛵️🌊
```
npm install -g @konstantindenerz/yacht-animation
yacht-animation
```
📦 npm: www.npmjs.com/package/@kon...
#cli #devfun #npm #ascii #yacht #sailing #nautics
June 12, 2025 at 8:54 PM
Reposted by Konstantin Denerz
CSS Weekly #612
🎠 Are CSS Carousels are accessible?
✂️ How margin-trim works
🦉 Should you use an owl selector (* + *)
👾 Retro animations & modern CSS
Featuring @sarasoueidan.com, @jensimmons.bsky.social, @anatudor.bsky.social, @jamessw.com, @konstantindenerz.bsky.social. 🙏
cssw.io/issue-612
🎠 Are CSS Carousels are accessible?
✂️ How margin-trim works
🦉 Should you use an owl selector (* + *)
👾 Retro animations & modern CSS
Featuring @sarasoueidan.com, @jensimmons.bsky.social, @anatudor.bsky.social, @jamessw.com, @konstantindenerz.bsky.social. 🙏
cssw.io/issue-612
CSS Weekly Issue #612
Find out if CSS Carousels are accessible, how to trim margins using margin-trim property, if you should use an owl selector, and more.
cssw.io
May 28, 2025 at 10:40 PM
CSS Weekly #612
🎠 Are CSS Carousels are accessible?
✂️ How margin-trim works
🦉 Should you use an owl selector (* + *)
👾 Retro animations & modern CSS
Featuring @sarasoueidan.com, @jensimmons.bsky.social, @anatudor.bsky.social, @jamessw.com, @konstantindenerz.bsky.social. 🙏
cssw.io/issue-612
🎠 Are CSS Carousels are accessible?
✂️ How margin-trim works
🦉 Should you use an owl selector (* + *)
👾 Retro animations & modern CSS
Featuring @sarasoueidan.com, @jensimmons.bsky.social, @anatudor.bsky.social, @jamessw.com, @konstantindenerz.bsky.social. 🙏
cssw.io/issue-612
Reposted by Konstantin Denerz
10 Cool CodePen Demos from April 2025
alvaromontoro.com/10-cool-code...
Lots of HTML+CSS demos in this edition: 3D product showcases, inspirational CSS Art, scroll-driven animations, engaging HTML and CSS-only components: toggles, accordions, buttons... and more!
#css #html #javascript #webdev
alvaromontoro.com/10-cool-code...
Lots of HTML+CSS demos in this edition: 3D product showcases, inspirational CSS Art, scroll-driven animations, engaging HTML and CSS-only components: toggles, accordions, buttons... and more!
#css #html #javascript #webdev
10 Cool CodePen demos
10 Cool CodePen demos from April 2025
alvaromontoro.com
May 8, 2025 at 3:58 PM
10 Cool CodePen Demos from April 2025
alvaromontoro.com/10-cool-code...
Lots of HTML+CSS demos in this edition: 3D product showcases, inspirational CSS Art, scroll-driven animations, engaging HTML and CSS-only components: toggles, accordions, buttons... and more!
#css #html #javascript #webdev
alvaromontoro.com/10-cool-code...
Lots of HTML+CSS demos in this edition: 3D product showcases, inspirational CSS Art, scroll-driven animations, engaging HTML and CSS-only components: toggles, accordions, buttons... and more!
#css #html #javascript #webdev
Reposted by Konstantin Denerz
Auto layout just got more powerful with Grid
→ Format in a gallery, card or bento layout
→ Items can span multiple cells
#Config2025
→ Format in a gallery, card or bento layout
→ Items can span multiple cells
#Config2025
May 7, 2025 at 4:32 PM
Auto layout just got more powerful with Grid
→ Format in a gallery, card or bento layout
→ Items can span multiple cells
#Config2025
→ Format in a gallery, card or bento layout
→ Items can span multiple cells
#Config2025
🔥
Introducing Figma Sites
Take your designs straight to the web. With code and AI coming soon.
Source: us
youtu.be/BU-yBN799EQ
Take your designs straight to the web. With code and AI coming soon.
Source: us
youtu.be/BU-yBN799EQ
Figma Sites
YouTube video by Figma
youtu.be
May 7, 2025 at 4:45 PM
🔥
Reposted by Konstantin Denerz
In the next video I break down a 3D sphere intersection demo from Codepen and it's going to be absolute cinema.
May 6, 2025 at 10:00 AM
In the next video I break down a 3D sphere intersection demo from Codepen and it's going to be absolute cinema.
Reposted by Konstantin Denerz
And a new version... I like it, but maybe I should get rid of the lightsaber to make it less evil (CSS is inherently evil anyway, but deep down is good).
May 4, 2025 at 2:39 PM
And a new version... I like it, but maybe I should get rid of the lightsaber to make it less evil (CSS is inherently evil anyway, but deep down is good).
Reposted by Konstantin Denerz
Giving anchor-tool.com a much-needed little facelift.
April 29, 2025 at 1:06 AM
Giving anchor-tool.com a much-needed little facelift.
Deep Dive into LLMs like ChatGPT
YouTube video by Andrej Karpathy
www.youtube.com
April 27, 2025 at 10:34 AM
Reposted by Konstantin Denerz
A CSS demo where I use only one additional element besides the body, and lots of dynamically generated gradients using SCSS. ✨🖖
@codepen.io codepen.io/konstantinde...
#CSS #webdev #demo #demoscene #art #gm #space #pixelart
@codepen.io codepen.io/konstantinde...
#CSS #webdev #demo #demoscene #art #gm #space #pixelart
April 24, 2025 at 9:57 PM
A CSS demo where I use only one additional element besides the body, and lots of dynamically generated gradients using SCSS. ✨🖖
@codepen.io codepen.io/konstantinde...
#CSS #webdev #demo #demoscene #art #gm #space #pixelart
@codepen.io codepen.io/konstantinde...
#CSS #webdev #demo #demoscene #art #gm #space #pixelart
Reposted by Konstantin Denerz
Make websites? Are you reading webkit.org? We published 6 articles in the last 5 weeks — aiming for at least one a week from now on. Teaching new tech, proposals for the future, and what’s coming in Safari.
• lh units
• shape()
• text-wrap: pretty
• Safari 18.4
• Item Flow
• Declarative Web Push
• lh units
• shape()
• text-wrap: pretty
• Safari 18.4
• Item Flow
• Declarative Web Push
WebKit
Open Source Web Browser Engine
webkit.org
April 25, 2025 at 3:21 PM
Make websites? Are you reading webkit.org? We published 6 articles in the last 5 weeks — aiming for at least one a week from now on. Teaching new tech, proposals for the future, and what’s coming in Safari.
• lh units
• shape()
• text-wrap: pretty
• Safari 18.4
• Item Flow
• Declarative Web Push
• lh units
• shape()
• text-wrap: pretty
• Safari 18.4
• Item Flow
• Declarative Web Push
Reposted by Konstantin Denerz
Following UA+, here's the next project.
CSS boilerplate: A default CSS structure for projects of any size.
It comes with a detailed explanation how I use cascade layers.
fokus.dev/tools/css-bo...
CSS boilerplate: A default CSS structure for projects of any size.
It comes with a detailed explanation how I use cascade layers.
fokus.dev/tools/css-bo...
CSS boilerplate | fokus
UA+ (User agent plus), a different type of reset style sheet
fokus.dev
April 25, 2025 at 6:08 AM
Following UA+, here's the next project.
CSS boilerplate: A default CSS structure for projects of any size.
It comes with a detailed explanation how I use cascade layers.
fokus.dev/tools/css-bo...
CSS boilerplate: A default CSS structure for projects of any size.
It comes with a detailed explanation how I use cascade layers.
fokus.dev/tools/css-bo...
A CSS demo where I use only one additional element besides the body, and lots of dynamically generated gradients using SCSS. ✨🖖
@codepen.io codepen.io/konstantinde...
#CSS #webdev #demo #demoscene #art #gm #space #pixelart
@codepen.io codepen.io/konstantinde...
#CSS #webdev #demo #demoscene #art #gm #space #pixelart
April 24, 2025 at 9:57 PM
A CSS demo where I use only one additional element besides the body, and lots of dynamically generated gradients using SCSS. ✨🖖
@codepen.io codepen.io/konstantinde...
#CSS #webdev #demo #demoscene #art #gm #space #pixelart
@codepen.io codepen.io/konstantinde...
#CSS #webdev #demo #demoscene #art #gm #space #pixelart
Reposted by Konstantin Denerz
🌰 Writing/Building a 3D geometry engine from scratch, starting at 18:00 CEST on the seminars stream. A great chance to improve your demo-making! 2025.revision-party.net/live/
LIVE
Revision 2025 LIVE
2025.revision-party.net
April 18, 2025 at 3:52 PM
🌰 Writing/Building a 3D geometry engine from scratch, starting at 18:00 CEST on the seminars stream. A great chance to improve your demo-making! 2025.revision-party.net/live/
🔥🔥🔥
Revision 2025 started!
Doors are open!
We’re happy to have you all with us again, either on-site or remote.
Welcome to Revision 2025!
Last minute additions to our timetable.
Wie have two more seminars
2025.revision-party.net/seminars/
2025.revision-party.net/events/speci...
Doors are open!
We’re happy to have you all with us again, either on-site or remote.
Welcome to Revision 2025!
Last minute additions to our timetable.
Wie have two more seminars
2025.revision-party.net/seminars/
2025.revision-party.net/events/speci...
Seminars
Revision 2025 - April 18th to 21st
2025.revision-party.net
April 18, 2025 at 3:20 PM
🔥🔥🔥
✨
Have you ever wished you could make a real-deal complex shape in CSS? The web’s had circle(), ellipse() and polygon() for years. But in order to do anything more SVG-style syntax was required.
Well, no more. Now, you can make complex shapes in CSS!
webkit.org/blog/16794/t...
Well, no more. Now, you can make complex shapes in CSS!
webkit.org/blog/16794/t...
The CSS shape() function
Shapes are an important aspect of graphic design.
webkit.org
April 16, 2025 at 9:26 AM
✨
Reposted by Konstantin Denerz
✍️ New Article: First Look at The Modern attr()
I explored the new attr() capabilities and shared my thoughts about it. Happy reading!
ishadeed.com/article/mode...
I explored the new attr() capabilities and shared my thoughts about it. Happy reading!
ishadeed.com/article/mode...
April 3, 2025 at 1:32 PM
✍️ New Article: First Look at The Modern attr()
I explored the new attr() capabilities and shared my thoughts about it. Happy reading!
ishadeed.com/article/mode...
I explored the new attr() capabilities and shared my thoughts about it. Happy reading!
ishadeed.com/article/mode...
Reposted by Konstantin Denerz
April 4, 2025 at 9:16 PM
Reposted by Konstantin Denerz
#CSS view transitions
I appreciate not caring about a lot of details in this interaction pattern, like if landscape or portrait, grid and the browser continue to take care of everything
cdpn.io/pen/full/dyL...
I appreciate not caring about a lot of details in this interaction pattern, like if landscape or portrait, grid and the browser continue to take care of everything
cdpn.io/pen/full/dyL...
April 1, 2025 at 9:58 PM
#CSS view transitions
I appreciate not caring about a lot of details in this interaction pattern, like if landscape or portrait, grid and the browser continue to take care of everything
cdpn.io/pen/full/dyL...
I appreciate not caring about a lot of details in this interaction pattern, like if landscape or portrait, grid and the browser continue to take care of everything
cdpn.io/pen/full/dyL...
CSS & SVG ✨ @codepen.io codepen.io/konstantinde...
#creativecoding #css #web #svg #demoscene #art #cssart #codepen #gm #animation
#creativecoding #css #web #svg #demoscene #art #cssart #codepen #gm #animation
March 31, 2025 at 6:59 PM
Reposted by Konstantin Denerz
March 26, 2025 at 3:18 PM
Reposted by Konstantin Denerz
in Chrome 135 - Tomorrow Mar 26, 2025
customize all the parts of a
customize all the parts of a
March 24, 2025 at 9:31 PM
in Chrome 135 - Tomorrow Mar 26, 2025
customize all the parts of a
customize all the parts of a