757KB for 54 icons? Yikes. Here's @AdamRackis showing how to subset Font Awesome files to trim out what you don't need.
https://css-tricks.com/subsetting-font-awesome-to-improve-performance/
Hey, nifty little utility from @jekuer to get one of those Add-to-Calendar buttons.
https://css-tricks.com/add-to-calendar-button-ui-widget/
Here's a nice take on an auto-filling CSS grid from @mikeherchel. It never exceeds a maximum number of columns that never go below a minimum width.
https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/
GSAP Flip Plugin for Animation
https://css-tricks.com/gsap-flip-plugin-for-animation/
6 Creative Ideas for CSS Link Hover Effects by Harshil Patel
https://css-tricks.com/css-link-hover-effects/
Why are hyperlinks blue?
https://css-tricks.com/why-are-hyperlinks-blue/
Getting Started With the File System Access API by @devdevcharlie
https://css-tricks.com/getting-started-with-the-file-system-access-api/
A Whistle-Stop Tour of 4 New CSS Color Features
https://css-tricks.com/new-css-color-features-preview/
Developers Speculating About the Long-Distant Future: 2022
https://css-tricks.com/developers-speculating-about-the-long-distant-future-2022/
Some considerations to keep in mind when building a Chrome extension using Next.js by @ThomasWang.
https://css-tricks.com/nextjs-chrome-extension-starter/
SVGcode for “Live Tracing” Raster Images
https://css-tricks.com/svgcode-raster-to-vector/
Here's an interesting tactic from @daveseidman: straightening the text in a slanted container by reversing the direction of the glyphs in the actual font file.
https://css-tricks.com/css-slanted-containers/
RT Adam Argyle
#CSS color is about to be incredible!!!
✅ relative color syntax for deriving palettes from any color
✅ LCH for perceptually equal lightness across palettes
✅ every hue can be a palette
Here's me prototyping Open Props vNext Color (Safari TP only) 👇🏻
https://codepen.io/argyleink/full/VwrKRrY
No Motion Isn’t Always prefers-reduced-motion
https://css-tricks.com/nuking-motion-with-prefers-reduced-motion/
Replace JavaScript Dialogs With the New HTML Dialog Element by @madsstoumann
https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/
Using Different Color Spaces for Non-Boring Gradients
https://css-tricks.com/color-spaces-for-more-interesting-css-gradients/
Nice!
T. Afif @ CSS Challenges: I made @css with CSS 😊
The logo of CSS-Tricks with one element. 👇
It was tricky with only gradients so I used clip-path as well.
Demo:
#CSS
https://codepen.io/t_afif/full/zYPNrOe
This one from @5t3ph is a clever take on presentation slides, pulling together scroll snap, live coding, and... styling the element.
https://css-tricks.com/css-scroll-snap-slide-deck/
RT Adam Argyle
Safari Tech Preview has experimental CSS gradient colorspaces and I had tons of fun playing around last night with it!
```#css
background: linear-gradient(
to right in var(--colorspace),
black, white
);
```
basic black to white can be so different!
https://codepen.io/argyleink/pen/OJObWEW
Block themes? Full-site editing? WordPress 5.9 was a huuuuge release and Ganesh Dahal did a bang-up job explaining what it means for WordPress developers moving forward.
https://css-tricks.com/a-deep-introduction-to-wordpress-block-themes/
