The Commodore logo built with pure CSS. Single element, using the CSS shape() function and conic-gradient, no SVG, no assets ✨ 📺 Demo on @codepen.io : codepen.io/editor/konst... #C64 #CSS #RetroComputing #C64U #Commodore #webdev

The Commodore logo built with pure CSS. Single element, using the CSS shape() function and conic-gradient, no SVG, no assets ✨ 📺 Demo on @codepen.io : codepen.io/editor/konst... #C64 #CSS #RetroComputing #C64U #Commodore #webdev

Midi Meets CSS out now! @beyondtellerrand.com 🤘🏻 nerdy.dev/midi-meets-c... www.youtube.com/watch?v=PMx-...

🎉

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

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

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.

Deep Dive into LLMs like ChatGPT by Andrej Karpathy 🔥 www.youtube.com/watch?v=7xTG... #llm #genai #ai

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

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

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/

🔥🔥🔥

✨

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

"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

Time to kick the tires on the #CSS @mixin prototype in Canary ⤷ nerdy.dev/css-mixins-r...

in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of a <select> with #CSS! ⤷ nerdy.dev/customize-a-...

Two gooey CSS @codepen.io experiments using SVG filters: ✨ A morphing ring codepen.io/konstantinde... 🌟 Animated starfield codepen.io/konstantinde... #webdev #css #creativecoding #generativeart #demoscene #gm

Inspired by a design, I created the 3D bookmark with #CSS in a @codepen.io 🍿 codepen.io/konstantinde... 💡 x.com/cerpow/statu... #webdev #dev #gm #animation #creativecoding #codepen #designsystem

There it is! Finally, a real solution for how to style all of the HTML form controls using your own custom CSS to change anything — building on an interoperable UA set of defaults. First, styling the in-page part of controls + the popover for <select>. (Later we’ll do popovers for more things.)

#CSS only carousels arrive in Chrome 135 ⤷ nerdy.dev/css-carousel...

Inspired by a design, I created the 3D bookmark with #CSS in a @codepen.io 🍿 codepen.io/konstantinde... 💡 x.com/cerpow/statu... #webdev #dev #gm #animation #creativecoding #codepen #designsystem

🤩 Scroll-Driven Animations Excitment! Support for Scroll-Driven Animations got enabled by default in Safari Technology Preview 215! webkit.org/blog/16523/r...

Frontend News #12 🦄 attr() use-cases 🤔 Custom properties in shorthand properties 🏞️ Base64 data URLs 🎨 Color accessibility Featuring @chriscoyier.net, @matuzo.at, @coreyginnivan.bsky.social, @konstantindenerz.bsky.social. 🙏 youtu.be/sDctlh_zxk4

#css #light #experiment #gm #codepen @codepen.io codepen.io/konstantinde...

Finally, the perfect AI CSS variable name: --✨ Sparkle mode activated! #ai #aiicon #aivariable #webdev #css #fun

#css #ai #interaction #visualizer ✨ @codepen.io codepen.io/konstantinde... #gm #web #dev

Over the weekend, I made a little game demo, Nano Hexagon ✨, on @codepen.io 🕹️ codepen.io/konstantinde... ⚠️ Intense stroboscopic effects - avoid if sensitive to flashing lights. #game #retro #c64 #arcade #webdev

Rapid prototyping just got a whole lot smarter with Figma AI ✨. It’s awesome for trying out ideas and generating inspiration. #genai #design #uxui #uiux #figma #designsystem #dev #web #generativeai

For #Angular devs using #Neovim: I created a plugin that lets you quickly navigate between Template, Component, Style (SCSS), Spec AND Stories. ✨ github.com/konstantinde...

Inspired by this impressive video, I created a cube animation using #CSS. 🧊 @codepen.io 🍿 Demo & Code: codepen.io/konstantinde... ✨ Inspired by Ivan Dianov: x.com/i_dianov/sta... #creativecoding #genuary #art #webdev

Just received my custom 3D-printed prototype - a case for the Keyball39 #keyball39 #keyballish #keyball #mechanicalkeyboard #3dprinting #jlcpcb #customkeyboard #webdev

✨

Wow, how awesome is this? My #CSS demo ranked 9th in the Top 100 "The Most Hearted 2024" list ❤️‍🔥. Huge thanks for all the feedback and support! ✨ #codepen #community

ICYMI: @surma.dev covered some of the recent goings-on at TC39 on OTMT. offthemainthread.tech/episode/tc39... - Shared structs - mutable structures that can be shared across threads without copying. offthemainthread.tech/episode/tc39... - JS0 and JSSugar - JS features that browsers won't implement

New article: Quickstart for Angular 19 testing with Jest & Neovim. Fast, simple, modern. ✨ 🍿 konstantin-denerz.com/quickstart-a... #angular #nvim #jest #testing #dev

A single-element dark/light toggle inspired on a design by Polina Tysiachenko (linked in the code). Demo on @codepen.io: codepen.io/alvaromontor... #html #css #webdevelopment #ui