links.lmorchard.com - #css

Pure CSS halftone patterns: dots, lines, circles

Fri, 04 Sep 2026 15:59:25 +0000

A project overdue. As an 80's/90's kid, I was obsessed with printing technology - and especially halftone patterns. I've long theorized that these pat

Tags: #css #nifty #webdev

argyleink/prop-for-that: what JS knows, now CSS knows

Sat, 20 Jun 2026 17:25:33 +0000

Sliders, pointer position, element visibility, viewport size, battery, network, sensors — JavaScript can read all of it; CSS can't. prop-for-that writes that runtime state into --live-* and --const-* custom properties — batched and diffed down to one setProperty per frame — so your CSS can compose and react to it with plain calc() and var().

Tags: #css #js #nifty #webdev

Progressive Web Components | Ariel Salminen

Sat, 02 May 2026 17:44:34 +0000

A Progressive Web Component is a native Custom Element designed in two layers: a base layer of HTML and CSS that renders immediately, without JavaScript, and an enhancement layer of JavaScript that adds reactivity, event handling, and more advanced templating.

Tags: #css #html #webcomponents #webdev

Introduction - Neobrutalism components

Tue, 03 Mar 2026 18:16:09 +0000

Neobrutalism is a mix of regular brutalism in web design and more modern typography, illustration, and animation standards. Neobrutalism refuses the usual components of UX-UI design and embraces uncomfortable design elements, and it is more fearless to use distinctive color palettes.

Tags: #css #design #webdev

How to Make a Damn Website

Tue, 13 Jan 2026 01:08:47 +0000

A lot of people want to make a website but don’t know where to start or they get stuck. That’s in part because our perception of what websites should be has changed so dramatically over the last 20 years.

Tags: #css #html #rss #web #webdev

Using CSS nesting - CSS | MDN

Wed, 03 Dec 2025 18:22:34 +0000

The CSS nesting module allows you to write your stylesheets so that they are easier to read, more modular, and more maintainable. As you are not constantly repeating selectors, the file size can also be reduced. CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor. Also, in CSS nesting, the specificity of the & nesting selector is similar to the :is() function; it is calculated using the highest specificity in the associated selector list.

Tags: #css #webdev

Shuffling a CSS grid using custom properties | Christian Heilmann

Mon, 24 Nov 2025 23:42:39 +0000

The grid above shuffles around on every reload or when you active `shuffle` button. There are many ways to achieve this effect, but this example uses only CSS properties to set the order of the grid items. The HTML is not altered and there is no DOM manipulation other than accessing the CSS properties of the parent element. This should make this highly performant. The JavaScript code rotates the order of the items in the grid by changing the CSS variables that define their order.

Tags: #css #webdev

Getting Creative With shape-outside | CSS-Tricks

Mon, 06 Oct 2025 22:39:50 +0000

There are so many creative opportunities for using shape-outside that I’m surprised I see it used so rarely. So, how can you use it to add personality to a design? Here’s how I do it.

Tags: #css #design #webdev

Custom CSS to give linkding a dark, card-based layout

Mon, 08 Sep 2025 03:38:14 +0000

Tags: #css #linkding #webdev

Split Flap

Mon, 28 Jul 2025 16:24:13 +0000

As an ode to the train stations of my childhood, I bring you a skeuomorph split-flap web component

Tags: #css #js #webcomponents #webdev

It's time for modern CSS to kill the SPA - Jono Alderson

Sat, 26 Jul 2025 19:44:47 +0000

If you’re still building your site as an SPA for the sake of “smoothness,” you’re solving a problem the browser already fixed – and you’re paying for it in complexity, performance, and maintainability.

Tags: #css #react #spa #webdev

vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

Wed, 23 Jul 2025 00:52:26 +0000

Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.

Tags: #css #typescript #webdev

Tailwind is the Worst of All Worlds

Wed, 23 Jul 2025 00:48:53 +0000

Tailwind is the worst of all worlds. It is a regrettable step backwards that takes everything bad about CSS and modern web development and brings it all together in one library.

Tags: #css #html #tailwind #webdev

WebTUI

Fri, 16 May 2025 16:37:50 +0000

WebTUI is a CSS library that brings the beauty of Terminal User Interfaces (TUIs) to the browser

Tags: #css #design #tui #webdev

Nicolas Mattia – How to Set WebGL Shader Colors with CSS and JavaScript

Thu, 30 Jan 2025 18:56:19 +0000

WebGL shaders rendered to canvas elements are a great way to add interesting visuals to a website. Unfortunately, unlike HTML, they do not natively integrate with CSS. This post shows a way to work around this limitation and influence WebGL graphics from CSS.

Tags: #css #webdev #webgl