Konstantin Denerz

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

📙 📗 📘 📕 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.

una.im | 5 Useful CSS functions using the new @function rule CSS custom functions are a gamechanger. Here are 5 really useful examples.

🥳 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)

"Bookmark" by Konstantin Denerz

codepen.io/konstantinde...

⛵ 💻 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

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.

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

10 Cool CodePen demos 10 Cool CodePen demos from April 2025

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

Auto layout just got more powerful with Grid

→ Format in a gallery, card or bento layout
→ Items can span multiple cells

#Config2025

🔥

In the next video I break down a 3D sphere intersection demo from Codepen and it's going to be absolute cinema.

Awesome! 🤩

Cartoon of the CSS logo holding a lightsaber and saying "I am your father" while the Tailwind logo crouches yelling "NOOOOOOOOOO!"

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).

Giving anchor-tool.com a much-needed little facelift.

YouTube video by Andrej Karpathy Deep Dive into LLMs like ChatGPT

Deep Dive into LLMs like ChatGPT by Andrej Karpathy 🔥

www.youtube.com/watch?v=7xTG...

#llm #genai #ai

Thank you 😍

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

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

CSS boilerplate | fokus UA+ (User agent plus), a different type of reset style sheet

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...

Thanks! 🙂
The objects are fixed in place so I can get the loop right. Full randomness makes the loop less clean and the layout less aesthetic. I use random values from SCSS at transpile time (sass-lang.com/documentatio...) to add some variation. Can’t wait for this: www.w3.org/TR/css-value...

Thank you! 🤩

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

🌰 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/

🔥🔥🔥

✨

1

A figure that shows the attr() syntax.

✍️ 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...

Thank you Adam for your inspiration, passion, and knowledge. I wish you all the best!

"Gooey Stars" by Konstantin Denerz

codepen.io/konstantinde...

#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...

CSS & SVG ✨ @codepen.io codepen.io/konstantinde...

#creativecoding #css #web #svg #demoscene #art #cssart #codepen #gm #animation

@mixin --box { aspect-ratio: 1; inline-size: 100px; block-size: 100px; } .box { @apply --box; }

Time to kick the tires on the #CSS @mixin prototype in Canary

⤷ nerdy.dev/css-mixins-r...