A rather geeky/technical weblog, est. 2001, by Bramus
One of the side-effects when drawing things with a Houdini Paint Worklet and relying on Math.random() in your code, is that your layout might be jumpy. Check out my CSS Houdini Paint Worklet that draws colorful circles for example: whenever you resize the available space or change one of its properties — or some of …
Continue reading “Creating random-but-stable effects with the CSS Paint API”
css-houdini-circles — A Houdini Paint Worklet that draws Colorful Background Circles
Last night — inspired by the Paint Worklet demos on Houdini.how — I decided to give Houdini a spin myself and created my own Paint Worklet. The result is css-houdini-circles which draws a bunch of random circles on the background. As a user you can configure the number of circles, the size range, the opacity …
In this video from #ChromeDevSummit 2020, Una walks us through Houdini and the aforementioned houdini.how CSS Houdini is an umbrella term that describes a series of low-level browser APIs and worklets which enable developers to hook into the browser’s rendering engine and extend the styling capabilities of today. Learn about the various Houdini API’s, as …
During #ChromDevSummit, Houdini.how got announced: Houdini.how is a library and reference for Houdini worklets and resources. It provides everything you need to know about CSS Houdini: browser support, an overview of its various APIs, usage information, additional resources, and live paint worklet samples. Each sample on Houdini.how is backed by the CSS Paint API, meaning …
Continue reading “Supercharging your CSS with Houdini Paint Worklets”
Will Boyd: CSS custom properties can hold all sorts of things. Some of these things were not obvious to me, which is why I decided to write this. In short: they can contain just about everything. It’s only until CSS Custom Properties are used in a certain context as a CSS Variable — using var() …
Continue reading “What values can you put in a CSS Custom Property?”
When mentioning CSS Custom Properties here on bram.us I do tend to name them like that — and not CSS Variables — as that’s their official name. I always thought the terms could be used interchangeably — with CSS Variables simply being the unofficial name — but as detailed by Šime Vidas on Web Platform …
prefers-reduced-data
Part of CSS Media Queries Level 5 is the User Preference Media Feature prefers-reduced-data: The prefers-reduced-data CSS media feature is used to detect if the user has requested the web content that consumes less internet traffic. There currently is no browser support at all, but that doesn’t stop Kilian Valkhof from taking a peek under …
Continue reading “Creating websites with prefers-reduced-data“
Here’s a little CSS Grid use case where a list of days is transformed into a calendar: See the Pen Simple Calendar With CSS Grid by Calendar Tricks (@calendartricks) on CodePen. My choice for this CSS calendar tutorial is a list. Why? Because it’s the easiest way to show the amazing capabilities of CSS grid. …
For those thinking about switching from Bootstrap 4 to 5, the good news is that in terms of CSS and default components, not much has changed. The classes and logic are quite similar from 4 to 5. The Bootstrap team seems to have settled on a “stable API” i.e. to not change class names too …
Crazy demo by Julia Miocene, recreating a scene from the wonderful Monument Valley game. Not for Safari though. Apart from my head exploding, I also heard my CPU exploding 🤯 This behind the scenes video from the first Monument Valley is quite nice.