css

16 Articles

CSS On The ESP32

June 25, 2026 by 14 Comments

There are lots of graphics libraries available for the ESP32, and lots of ways to program one to boot. Even still, most of us wouldn’t immediately think to CSS when it comes to embedded products — yet that’s now a thing on the Espressif platform, apparently.

The Gea stack allows one to compose CSS and TypeScript code that is then turned into generated C++ code that compiles to native firmware. The team behind Gea have demoed this ability by running a 3D cube animation on an ESP32 at up to 60 FPS. This isn’t some ugly, low-res wireframe demo, either. It’s a full-color animation running on a 410×502 AMOLED screen. It’s very fluid, and can even handle transparency on the cube faces (albeit with a performance penalty).

It’s worth noting that this isn’t a full browser engine. As you might expect, some concessions had to be made to get it running on the ESP32. Namely, it doesn’t handle “:hover” states because it’s designed for touchscreen use, fonts are rasterized, and the UI tree is limited to just 512 nodes. Regardless, it shows that using CSS and TypeScript to develop for the ESP32 is entirely possible without some crazy loss of performance. If you want to build easy interfaces on an ESP32 while leaning on web dev experience, this could be very useful indeed.

There are lots of fun ways to write code for the ESP32; you can even try MicroPython if you like.

Continue reading “CSS On The ESP32” →

Hackaday Links Column Banner

Hackaday Links: March 29, 2026

March 29, 2026 by 8 Comments

Whether it’s a new couch or a rare piece of hardware picked up on eBay, we all know what it feels like to eagerly await a delivery truck. But the CERN researchers involved in a delivery earlier this week weren’t transporting anyone’s Amazon Prime packages, they were hauling antimatter.

Moving antimatter, specifically antiprotons, via trucks might seem a bit ridiculous. But ultimately CERN wants to transfer samples between various European laboratories, and that means they need a practical and reliable way of getting the temperamental stuff from point A to B. To demonstrate this capability, the researchers loaded a truck with 92 antiprotons and drove it around for 30 minutes. Of course, you can’t just put antiprotons in a cardboard box, the experiment utilized a cryogenically cooled magnetic containment unit that they hope will eventually be able to keep antimatter from rudely annihilating itself on trips lasting as long as 8 hours.

Speaking of deliveries, anyone building a new computer should be careful when ordering components. Shady companies are looking to capitalize on the currently sky high prices of solid-state drives by counterfeiting popular models, and according to the Japanese site AKIBA PC Hotline, there are some examples in the wild that would fool  all but the most advanced users. They examine a bootleg drive that’s a nearly identical replica of the Samsung 990 PRO —  the unit and its packaging are basically a mirror image of the real deal, the stated capacity appears valid, and it even exhibits similar performance when put through a basic benchmark test.

Continue reading “Hackaday Links: March 29, 2026” →

CSS, Now It’s Got Your 8086

February 27, 2026 by 12 Comments

The modern web browser is now far more than a thing for rendering web pages, it’s a multi-faceted environment that can provide a home for almost any application you could imagine. But why should JavaScript or Wasm have all the fun? CSS is Turing complete now, right? Why not, as [Lyra Rebane] has done, write an 8086 emulator in pure CSS?

The web page at the link above may contain an 8086, but missing MMU aside, don’t expect it to run Linux just yet. Instead it has limited resources, just enough to run a demo program. It needs a Chrome-adjacent browser because it uses some CSS functions not available in for example Firefox, but we’ll forgive it that oddity. Its clock is provided by a small piece of JavaScript not because CSS can’t provide one, but because the JS version is more stable.

On one hand this is of little practical use, but to dismiss it as such is to entirely miss the point. It’s in the fine spirit of experimentation, and we love it. Perhaps a better way to look at it is to see what could be done more efficiently with the same idea. A 1970s CISC microprocessor might not be the best choice, but would for example a minimalist and optimized RISC design be more capable? We’re looking forward to where others take this thread.

It’s not the first unexpected computing environment we’ve found, who could forget the DOOM calculator!

Header: Thomas Nguyen, CC BY-SA 4.0.

Octos background with hackaday website pulled up

Open Source Interactive Wallpapers For Windows

August 30, 2025 by 20 Comments

It’s late at night, and you’re avoiding work that was supposed to be done yesterday. You could open an application on your desktop to keep your attention, or what about the desktop itself? [Underpig1] has you covered with Octos. Octos is an open-source application created to allow interactive wallpapers based on HTML, CSS, or JS for Windows 10 and 11.

There are many wallpaper applications made to spruce up your desktop, but Octos stands out to us here at Hackaday from the nature of being open source. What comes along with the project is a detailed API to reference when creating your own wallpaper. Additionally, this allows for detailed and efficient visualization techniques that would otherwise be difficult to display, perfect for procrastination.

Included demos range from an interactive solar system to Conway’s Game of Life. Customization options allow for basic manipulation of the backdrops in the application itself, but we’re sure you could allow for some fun options with enough tinkering.

If you want to try Octos out for yourself, it’s incredibly easy. Octos can be found on the Microsoft Store, and additional backdrops can be added within the application. Open-source applications allow for incredibly easy additions to your personal device, but it’s not always that way. Kindle has been a prime example of a fairly locked down system; however, that never stops a clever hacker!

Thanks to [Joshua Throm] for the tip!

Minecraft Clone Manages With Nothing But HTML + CSS

June 25, 2025 by 5 Comments

Can a 3D Minecraft implementation be done entirely in CSS and HTML, without a single line of JavaScript in sight? The answer is yes!

True, this small clone is limited to playing with blocks in a world that measures only 9x9x9, but the fact that [Benjamin Aster] managed it at all using only CSS and pure HTML is a fantastic achievement. As far as proofs of concept go, it’s a pretty clever one.

The project consists of roughly 40,000 lines of HTML radio buttons and labels, combined with fewer than 500 lines of CSS where the real work is done. In a short thread on X [Benjamin] explains that each block in the 9x9x9 world is defined with the help of tens of thousands of <label> and <input type="radio"> elements to track block types and faces, and CSS uses that as a type of display filter. Clicking a block is clicking a label, and changing a block type (“air” or no block is considered a type of block) switches which labels are visible to the user.

Viewing in 3D is implemented via CSS animations which apply transforms to what is displayed. Clicking a control starts and stops the animation, resulting in a view change. It’s a lot of atypical functionality for plain HTML and CSS, showing what is possible with a bit of out-of-the-box thinking.

[Simon Willison] has a more in-depth analysis of CSS-Minecraft and how it works, and the code is on GitHub if you want a closer look.

Once you’re done checking that out and hungry for more cleverness, don’t miss Minecraft in COBOL and Minecraft Running in… Minecraft.

Blurry Image Placeholders, Generated With Minimal CSS

May 1, 2025 by 9 Comments

Low-quality image placeholders (LQIPs) have a solid place in web page design. There are many different solutions but the main gotcha is that generating them tends to lean on things like JavaScript, requires lengthy chunks of not-particularly-human-readable code, or other tradeoffs. [Lean] came up with an elegant, minimal solution in pure CSS to create LQIPs.

Here’s how it works: all required data is packed into a single CSS integer, which is decoded directly in CSS (no need for any JavaScript) to dynamically generate an image that renders immediately. Another benefit is that without any need for wrappers or long strings of data this method avoids cluttering the HTML. The code is little more than a line like <img src="…" style="--lqip:567213"> which is certainly tidy, as well as a welcome boon to those who hand-edit files.

The trick with generating LQIPs from scratch is getting an output that isn’t hard on the eyes or otherwise jarring in its composition. [Lean] experimented until settling on an encoding method that reliably delivered smooth color gradients and balance.

This method therefore turns a single integer into a perfectly-serviceable LQIP, using only CSS. There’s even a separate tool [Lean] created to compress any given image into the integer format used (so the result will look like a blurred version of the original image). It’s true that the results look very blurred but the code is clean, minimal, and the technique is easily implemented. You can see it in action in [Lean]’s interactive LQIP gallery.

CSS has a lot of capability baked into it, and it’s capable of much more than just styling and lining up elements. How about trigonometric functions in CSS? Or from the other direction, check out implementing a CSS (and HTML) renderer on an ESP32.

BritCSS: Write CSS With British English Spellings

March 13, 2025 by 37 Comments

Everyone knows that there is only one proper English, with the rest being mere derivatives that bastardize the spelling and grammar. Despite this, the hoodlums who staged a violent uprising against British rule in the American colonies have somehow made their uncouth dialect dominant in the information technologies that have taken the world by storm these past decades. In this urgent mission to restore the King’s English to its rightful place, we fortunately have patriotic British citizens who have taken it upon themselves to correct this grave injustice. Brave citizens such as [Declan Chidlow], whose BritCSS project is a bright beacon in these harrowing times.

Implemented as a simple, 14 kB JavaScript script to be included in an HTML page, it allows one to write CSS files using proper spelling, such as background-colour and centre. Meanwhile harsh language such as !important is replaced with the more pleasant !if-you-would-be-so-kind. It is expected that although for now this script has to be included on each page to use BritCSS, native support will soon be implemented in every browser, superseding the US dialect version. [Declan] has also been recommended to be awarded the Order of the British Empire for his outstanding services.