Issue #498

March 30, 2022

Friends,

I want to share something incredibly exciting. I started a YouTube channel! I aim to publish weekly and share tutorials on—you guessed it—CSS and frontend development.

The first couple of videos are already up, and it would really mean a lot if you check them out and consider subscribing.

👉 CSS Weekly Youtube Channel

Thank you,
Zoran Jambor

PS. You’ll find videos in the new newsletter section: “From Our YouTube Channel.”

Headlines

Understanding Layout Algorithms

Joshua Comeau outlines the mental model that makes CSS more intuitive and easier to learn.

A Guide To Hover And Pointer Media Queries

Cristian Díaz explains how to adapt your sites to the different scenarios of a device pointer by using media queries hover, pointer, any-hover and any-pointer.

Looking to up your UX design game?

Join us online April 18–20 for An Event Apart Spring Summit 2022 — a 3-day, online web design conference with deep insights into advanced CSS, new design frontiers, container queries, web components, web platform features, SEO + UX, and more.

With 15 sessions presented by experts, you’ll leave inspired and re-energized with new ideas and techniques you can put into practice right away.

See the full agenda and sign up today.

From Our YouTube Channel

Start Using color-scheme CSS Property

An introduction to color-scheme CSS property (and meta tag) which can change how native browser elements are rendered—in light or dark mode.

Watch video

Create Gradient CSS Text Strokes

Learn how to create linear & radial gradient text strokes using -webkit-text-stroke and background-clip CSS properties.

Watch video

Create a Stunning Glassmorphism Effect in CSS

A step-by-step guide to creating immersive background effects and beautiful gradient headlines using backdrop-filter and background-clip CSS properties.

Watch video

Articles & Tutorials

Optimising Largest Contentful Paint

Harry Roberts looks at some more technical and non-obvious aspects of optimizing the Largest Contentful Paint.

How to Use CSS Math Functions

Alex Ivanovs shows how to use the CSS logical functions calc(), clamp(), min() and max().

Resetting Inherited CSS with “Revert”

Scott Vandehey demonstrates how the revert keyword works in CSS.

Tricks to Cut Corners Using CSS Mask and Clip-Path Properties

Temani Afif shows how to create the cut-corners effect using CSS Mask and clip-path properties.

HTML Semantics

Chris Ferdinandi outlines the importance of the HTML elements that you use often—they convey information to people who use screen readers and provide critical functionality to people who navigate the web with a keyboard.

Also prefer fundamental CSS knowledge over hypes?

You’re not alone, and we’ve got just the conference for you. CSS Day is a deep-diving, content-focused CSS conference in Amsterdam, NL. We ask our speakers to treat CSS & design topics that they themselves, as well as our attendees, can geek out on. On June 9th & 10th, after a two-year silence, we’ll host our 8th edition.

See our line-up

Tools

CSSUI

CSSUI is a library of interactive components realized in pure HTML and CSS. It includes frequently used components such as Accordion, Modal, Tabs, and more.

Check it out