Bringing Bounce and Elastic easing to CSS

In this episode of HTTP 203, Jake and Surma talk about easing in CSS. You can ease-in, you can ease-out, but CSS doesn’t let you bounce. Jake and Surma chat about a proposal to fix that. After first going down the rabbit hole of creating a (now-abandoned) proposal to define custom easing functions, Jake went …

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 …

Open Props — Supercharged CSS Variables

Adam Argyle released a new project named Open Props. Similar to the aforementioned Pollen, it’s a library that offers nothing but CSS Custom Properties. Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript. Once included, you can use the Custom Properties the …

Responsive Layouts, Fewer Media Queries

Over at CSS-Tricks you can read a min-bending article by Temani Afif Since the introduction of media queries (literally decades ago), CSS has evolved to the points that there are a lot of tricks that can help us drastically reduce the usage of media queries we use. In some cases, I will show you how …

Dynamic Color Manipulation with CSS Relative Colors

In Michelle’s excellent Guide To Modern CSS Colors, I only found one thing missing: CSS Relative Colors. Plugging that hole is this post by Jim Nielsen. CSS relative colors enable the dynamic color manipulation I’ve always wanted in vanilla CSS since Sass’ color functions first came on the scene (darken(), lighten(), etc.). Allow me to …

A first look at container-query-polyfill, a polyfill for CSS Container Queries

Surma has been working on container-query-polyfill, a lightweight polyfill for CSS Container Queries. Let’s take a look at how it works and how it differs from cqfill … What Unlike cqfill —which was covered here before— this Polyfill for Container Queries: Does not require you to declare a separate Custom Property –css-contain that duplicates the …

My Custom CSS Reset

Josh W. Comeau shares (and explains) his CSS Reset. /* Josh’s Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html, body { height: 100%; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, …

A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH

Michelle Barker shares advice on the not-so-obvious things you have to keep in mind when handling colors in CSS today. There’s more to color on the web than meets the eye, and it’s about to get a lot more interesting! Today, we’ll take a look at the best ways to use colors in a design …

CSS Full-Height Slideshow with Centered Slides thanks to grid-auto-rows

Recently I saw this tweet float by: CSS experts, I need your help! 👇 I need a container that vertically centers its children and that can be scrollable if necessary. It should be a single container. Not 2. <div class="container"> <item>Vertically centered</item> <item>Vertically centered</item></div> — Álvaro Trigo 🐦🔥 (@IMAC2) September 24, 2021 Now that sounds …