NotesWebGL 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.FeedUnfurl
NotesI recently stumbled on a super cool, well-executed hover effect from the clerk.com website where a bloom of tiny pixels light up, their glow staggering from the center to the edges of its container. With some available free time over this Thanksgiving break, I hacked together my own version of a pixel canvas background shimmer. It quickly evolved into a pixel-canvas Web Component that can be enjoyed in the demo below. The component script and demo code have also been pushed up to a GitHub repo.FeedUnfurl
NotesAs an alternative to Chromatic, Iâve been using Storybookâs Test Runner to power screenshot tests for Microsoft Loop. We configure the test runner to run in CI and take a screenshot of every story. However, the initial implementation based on the official Storybook docs was very flaky due to inconsistent screenshots of the same story. Here are some tips to reduce flakiness in your Storybook screenshot tests.Unfurl
NotesIf you are rendering images in a canvas element and want to keep the pixels square and BLOCKY, you should know about the image-rendering CSS property.Unfurl
NotesFrom Chrome 131 you have more options to style the structure of <details> and <summary> elements. You can now use these elements when building disclosure or accordion widgets.Unfurl
Notesletâs spend some time looking at disclosures (<details> and <summary>), the Dialog API, the Popover API, and more. Weâll look at the right time to use each one depending on your needs. Modal or non-modal? JavaScript or pure HTML/CSS? Not sure? Donât worry, weâll go into all that.FeedEmbedUnfurl
NotesThe @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.FeedUnfurl
NotesThe functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.FeedUnfurl
NotesContainer queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts.FeedUnfurl
NotesThis example section demonstrates a tabs widget that implements the Tabs Pattern. In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus. It is recommended that authors consider implementing automatic activation of tabs only in circumstances where panels can be displayed instantly, i.e., all panel content is present in the DOM.FeedUnfurl
NotesI have attempted to assemble a set of CSS effects to replicate this look mainly by adding three things: screen-door effect, flicker, and color separationFeedUnfurl
NotesA tree view (collapsible list) can be created using only HTML and CSS, without the need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically. Unfurl
NotesReady for the second set of loaders? Yes, it's again me with another collection of 100 CSS loaders. Now you have a total of 200 different loaders!Unfurl
NotesThis is the first post of a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. This first installment walks through various use cases where this technique applies.FeedEmbedUnfurl
NotesWhat weâre trying and do is to turn animations on their head (flip, see? Gosh darnit, Iâm so funneh) and, instead of animating âstraight aheadâ and potentially doing expensive calculations on every single frame we precalculate the animation dynamically and let it play out cheaply.FeedUnfurl
NotesAn element with opacity of zero is still "opaque" to clicks and mouse-overs. This causes serious problems, especially for drop down menus:FeedUnfurl
Notes In the summer of 2010, we created Sand Trap, a game that we entered in a competition on HTML5 games for mobile phones. But most mobile phones either displayed only part of the game or made the game too smallâmaking it completely unplayable. So we took it upon ourselves to make the game fluidly adjust to match any resolution. After a bit of re-programming and using ideas outlined in this article, we had a game that scaled across any modern browser, whether it ran in a desktop or a mobile device. Unfurl
Notes A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a real-world example, check out any of the forms on slid.es. Unfurl
NotesI recently learned a cool technique from Simurai about how to animate PNG sprites with the CSS3 animations' steps() property. The main idea in this technique is to "recreate" some kind of animated GIF but with the tiles of a PNG sprite.FeedEmbedUnfurl
NotesFortunately, CSS3 allows us to create loading icons without images. Theyâre easy to create, scale, re-color, use on any background and donât incur image downloadsFeedUnfurl
NotesIf you do a view-source you find no other script in use, yet it displays in the page. What is this sourcery*? Simple, and it was Mathias Bynens who got me onto it: just display script elements as block and add some generated content to show the âSourceâ text:FeedUnfurl
NotesIt's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. Unfurl
NotesWhile CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.FeedEmbedUnfurl
Notes<blockquote>HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.</blockquote>
Seems like a nifty site to vet media queries on all my devicesUnfurl
NotesInstead, we developed a JavaScript technique for dynamically scaling elements based on the current zoom factor. The technique provides a magic class name device_scale that you can apply to any element you want to remain the same size regardless of zoom.FeedUnfurl
NotesThe data: URI scheme is now supported by the most current version of every major browser, including Internet Explorer. Because of this I wanted to use CSS background images encoded with data: URIs in a current project at Shepherd Interactive. Why? The first rule of High Performance Websites is to Minimize HTTP Requests. By storing background images directly in the stylesheet only one HTTP request is then necessary to fetch the stylesheet and the images all at once. Furthermore, by giving that stylesheet a far-future cache expiration date the browser will never need to request it again.FeedEmbedUnfurl
Nicolas Mattia â How to Set WebGL Shader Colors with CSS and JavaScript
Durable websites | Go Make Things
The Pixel Canvas Shimmer Effect
How to fix Storybook screenshot testing | Tiger Oakes
Sharp canvases | soledad penadés
More options for styling <details> Â |Â Chrome for Developers
</> htmx ~ You Can't Build Interactive Web Apps Except as Single Page Applications... And Other Myths
3D parallax effect on hover
@layer - CSS: Cascading Style Sheets | MDN
CSS Variables (custom properties) in Pseudo-element "content" Property - Stack Overflow
Example of Tabs with Automatic Activation | APG | WAI | W3C
Stripe Dot Dev
Using CSS to create a CRT
Tree views in CSS
Another 100 CSS loaders for your next project - DEV Community đ©âđ»đšâđ»
Aerotwist - FLIP Your Animations
CSS3 transitions using visibility and delay
Case Study: Auto-Resizing HTML5 Games - HTML5 Rocks
DevDocs
This is CSS
Build a Street Fighter Demo with CSS Animations and JavaScript
Markdown.css - make HTML look like plain-text
Demoing and displaying JavaScript at the same time using CSS | Christian Heilmann
Arctext.js - Curving Text with CSS3 and jQuery | Codrops
CSS Media Queries
Device-scale user interface elements in iOS Mobile Safari - (37signals)
Detecting Support for data: URIs | Weston Ruter
