Tag Archives: houdini

Polyfilling CSS with CSS Parser Extensions

In April I attended #BlinkOn, the conference for web platform contributors in the Chromium open source project. At the conference I gave a presentation about “CSS Parser Extensions”, a wild idea I have to fix CSS polyfilling once and for all.

If you didn’t know, polyfilling CSS features is extremely hard, mainly because the CSS Parser discards what it does not understand. So what if, instead of having authors write their own parser and cascade to polyfill a CSS feature, they could teach the parser some new tricks?

Read Post →

Connect to a Database from CSS

You can’t connect to a database from within CSS, Right? Or can you? Leveraging Houdini and SQL.js — which is SQLite compiled to JavaScript to serve as in-memory DB — you can. Using some Custom Properties, you can pass in queries to be executed. .query-display { background: paint(sql-css); } main { –sql-query: SELECT * FROM …

Continue reading “Connect to a Database from CSS”

Read Post →

CSS Houdini Blobs

Tim Broddin — ubernerd and also my tech colleague at VRT Creative Lab — released a very nice Houdini Paint Worklet that draws some smooth blobs. .css-houdini-blobs { –num-blobs: 40; –seed: 4749; –colors: #71a7ee, #7940c1, #f0e891; –min-opacity: 0.1; –max-opacity: 0.5; background: paint(blobs); } Glad to see Tim used css-houdini-circles as a starting point to work …

Continue reading “CSS Houdini Blobs”

Read Post →

Alpha Paintlet

Dave Rupert created a little lovely Houdini Paint Worklet that allows you set a background color with an alpha on elements. The Worklet’s code is as simple as this: registerPaint(‘alpha’, class { static get inputProperties() { return [‘–bg-alpha’, ‘–bg-color’] } paint(ctx, size, props) { ctx.globalAlpha = props.get(‘–bg-alpha’); ctx.fillStyle = props.get(‘–bg-color’); ctx.fillRect(0, 0, size.width, size.height); } …

Continue reading “Alpha Paintlet”

Read Post →

Generative design with CSS Houdini

Recording of George Francis giving his talk “Generative design with CSS Houdini” at the most recent edition of London CSS Learn how the mystical powers of CSS Houdini can be harnessed to create ever-unique, generative user interfaces — think random patterns, shapes, animations, and more! Related: Random Paint Effects with Houdini

Read Post →

Random Paint Effects with Houdini

 Speaking of George Francis in the previous post: in the latest episode of HTTP 203 Jake talks Surma through recreating these Houdini-powered “Fleck Patterns” George created before. Generative Houdini Stuff! ✨Create always-unique, responsive, “fleck” patterns — all without leaving your CSS 🎨Pass in a seed value, up to 8 colors of your choice, and a …

Continue reading “Random Paint Effects with Houdini”

Read Post →

Drawing Graphics with the CSS Paint API

Over at Codrops, Georgi Nikolov digs into Houdini’s Paint API and the Properties and Values API along with that. Recommended, as it’s all well explained and easy to follow along. Drawing Graphics with the CSS Paint API → Related: css-houdini-circles — A Houdini Paint Worklet that draws Colorful Background Circles →

Read Post →

Animating Text Underlines

Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results. This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled …

Continue reading “Animating Text Underlines”

Read Post →

Building Future UIs

The folks over at Formidable have been experimenting with Houdini and WebGL/Three.js to create futuristic UIs Futuristic sci-fi UIs in movies often support a story where humans, computers, and interfaces are far more advanced than today, often mixed with things like super powers, warp drives, and holograms. What is it about these UIs that feel …

Continue reading “Building Future UIs”

Read Post →