Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.

Fluid typography with CSS clamp - Tutorial - Piccalilli

https://twitter.com/JoshWComeau/status/1357392979997184003

“🔥 Playing with some neon-glowing text today.  ⚡️ This implementation uses `-webkit-text-stroke` for the outline, and 4 drop-shadows for the glowing effect. It's real, selectable text! 🌟 Works in all major browsers (except IE). ➡️ Demo: https://t.co/gSPSldpY6y”

Josh W. Comeau: Playing with neon-glowing text

"Minimal snippets for modern CSS layouts and components, created by Stephanie Eckles of ModernCSS.dev"

Avatar List – SmolCSS

https://www.smashingmagazine.com/2021/02/responsive-image-effects-css-gradients-aspect-ratio/

"A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported `aspect-ratio` property in combination with `object-fit` provides a remedy to this headache of the past! Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair."

Create Responsive Image Effects with CSS Gradients & aspect-ratio

I have written a bunch about responsive tables. Maybe too much. I keep trying to give developers the information they need to make informed decisions — ARIA attributes, screen reader & browser pairing results, bugs, and so on. I have spread things out over years of posts. I have filed…

Under-Engineered Responsive Tables

https://bricampgomez.com/blog/how-to-overlap-images-in-css/

This article shows you how to overlap images with CSS Grid and provides a fallback for IE and browsers that do not support CSS Grid.

How to Overlap Images in CSS

https://hankchizljaw.com/wrote/create-a-semantic-breakout-button-to-make-an-entire-element-clickable/

https://piccalil.li/tutorial/create-a-semantic-break-out-button-to-make-an-entire-element-clickable

Create a semantic breakout button to make an entire element clickable - Tutorial - Piccalilli

Ten modern layouts in one line of CSS

https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents

"The website of Hidde de Vries, freelance front-end developer."

More accessible markup with display: contents

https://paco.im/blog/disable-theme-transitions

Prevent element flashing when switching between themes.

Disable transitions on theme toggle

A series examining modern CSS solutions to problems Stephanie Eckles (@5t3ph), a seasoned frontend developer, has been solving for 14+ years.

Modern CSS Solutions

https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/

Display-P3 color space includes vivid colors that aren’t available in sRGB.

Wide Gamut Color in CSS with Display-P3

https://css-tricks.com/the-expanding-gamut-of-color-on-the-web/

CSS was introduced to the web all the way back in 1996. At the time, most computer monitors were pretty terrible. The colors of CSS — whether defined with

The Expanding Gamut of Color on the Web | CSS-Tricks

https://christianheilmann.com/2020/04/22/limiting-input-type-color-to-a-certain-palette-from-an-image/

Limiting input type=”color” to a certain palette (from an image) | Christian Heilmann

Dissecting a React Component built by Jamie Kyle, Stefan Judis provides us with an easy to use CSS class that adds a “Natural Shadow” to any element. He does this by inlining the SVG <filter> in a CSS filter. 💁‍♂️ You can think of this “Natural Shadow” like a “Ambient Lighting” (Ambilight) option on a … Continue reading "Natural Shadows in CSS with inlined SVG filters"

Natural Shadows in CSS with inlined SVG filters

https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/

Review the four best supported CSS math functions, and see how they can be used in both practical and unexpected ways, such as within gradients and color functions and in combination with CSS custom properties.

Practical Uses of CSS Math Functions: calc, clamp, min, max

Browse through Dribbble or Behance, and you’ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise

Grainy Gradients

https://codersblock.com/blog/deep-dive-into-text-wrapping-and-word-breaking/

Let’s talk about the various ways we can control how text wraps (or doesn’t wrap) on a web page. CSS gives us a lot of tools to make sure our text flows the way...

Deep Dive into Text Wrapping and Word Breaking

https://ryanmulligan.dev/blog/css-marquee/

"A responsive looping marquee-style animation using HTML and CSS"

The Infinite Marquee | Ryan Mulligan

https://css-irl.info/breaking-out-of-a-central-wrapper/

CSS { In Real Life } | Breaking Out of a Central Wrapper

https://henry.codes/writing/pure-css-focal-points/

The personal site & portfolio of NYC-based creative technologist Henry Desroches

Infinite scrolling skewed carousel, with a white vignette effect

https://ishadeed.com/article/css-masking/

CSS Masking - Ahmad Shadeed

https://expensive.toys/blog/fancy-css-reveal-effects

Utilizing @property API to create fancy reveal effects by animating masks.

Fancy reveal animations with CSS masks and @property

https://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline

Underlines are hard. Complications quickly arise if you want to do anything fancier than the good ol’ CSS text-decoration: underline. There…

A CSS-only, animated, wrapping underline.

https://linear-easing-generator.netlify.app/

CSS Techniques