A rather geeky/technical weblog, est. 2001, by Bramus
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 …
Continue reading “Bringing Bounce and Elastic easing to CSS”
!importantWhat happens when you set !important on a Custom Property? It’s not exactly what you think …
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 …
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 …
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 …
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 …
Continue reading “Dynamic Color Manipulation with CSS Relative Colors”
container-query-polyfill, a polyfill for CSS Container QueriesSurma 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 …
Continue reading “A first look at container-query-polyfill, a polyfill for CSS Container Queries”
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, …
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 …
Continue reading “A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH”
grid-auto-rowsRecently 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 …
Continue reading “CSS Full-Height Slideshow with Centered Slides thanks to grid-auto-rows“