CSS Weekly
  • YouTube Channel
  • Archives
  • Supporters
  • Submit a link
  • Advertise
  • Contact

Issue #574

January 17, 2024

A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()

A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()

Adam Argyle shows how you can add scroll animations that toggle shadows on navbars, reveal images, add scrollytelling, link up carousel elements, and much more using only CSS

Read more

The Complex But Awesome CSS border-image Property

The Complex But Awesome CSS border-image Property

Temani Afif demonstrates different approaches to using border-image to create clever decorative accents and shapes.

Read more

From Our Sponsor

The future of intelligent composable content

The future of intelligent composable content

Contentful brings intelligent digital experiences to life. With generative AI and composable content, the possibilities are as limitless as your team’s creativity.

Get Started

CSS Weekly on YouTube

▶ Chrome DevTools Inception

▶ Chrome DevTools Inception

A quick tip showing how (and why) you can inspect Chrome Developer Tools with Chrome Developer Tools.

Watch video

Articles & Tutorials

5 CSS Snippets Every Front-End Developer Should Know in 2024

Adam Argyle explains that every front-end developer should know how :has() works, the how and why of a subgrid, how to nest with built-in CSS syntax, how to let the browser balance headline text wrapping, and how to use container query units.

Read more

How to use a Custom Easing Function with the Web Animations API (WAAPI)

Bramus Van Damme shows how to use custom easing functions with the Web Animations API.

Read more

CSS Media Query for Scripting Support

Stephanie Stimac gives a short introduction to CSS media query for scripting support.

Read more

Shadow DOM and the Problem of Encapsulation

Nolan Lawson clears up some of the misconceptions about Shadow DOM.

Read more

Accessible Notifications With ARIA Live Regions

Sara Soueidan explains in detail how ARIA live regions work — the accessible notifications system that enables you to make dynamic web content more accessible to screen reader users.

Read more

Promoted Link

Take part in the new Developer Nation survey, open to all front-end devs and UX/UI designers.

Take part in the new Developer Nation survey, open to all front-end devs and UX/UI designers.

Upon completion you will get free access to our Virtual Goody Bag and you’ll enter amazing prize draws.

Start Now

Tools

Experimental Chromium Web Platform Features

A handy list of experimental web platform features that are not yet part of the official web platform specifications and are marked as “experimental” in Chromium.

Check it out

LoaderShip

LoaderShip is the ultimate CSS-only loader configuration tool that allows you to customize and generate stunning loaders for your website effortlessly.

Check it out

Inspiration

CSS Alien Abduction (with Donuts)

CSS Alien Abduction (with Donuts)

Alvaro Montoro created a stunning illustration using only CSS.

Get inspired

Until Next Week

Thank you so much for reading!

If you want to support CSS Weekly and my work, check out:
• CSS Weekly Patreon
• CSS Stickers Set
• CSS Weekly YouTube Channel
• Course Mastering Linting

Happy coding,
Zoran Jambor

Issue #573 Issue #575

CSS Stickers!

CSS Stickers set.

A set of beautiful, cute, and funny CSS stickers to showcase your love for CSS.

Get Your Set Today »

Course Mastering Linting

Get proficient with the best linting tools, Prettier & Stylelint.

Enroll Now »

Follow CSS Weekly

YouTube 11,000 Subscribers X / Twitter 16,700 Followers Bluesky 3,900 Followers TikTok 1,600 Followers Facebook 2,400 Likes Codepen 150 Followers RSS 8,500 Subscribers
YouTube 11,000 Subscribers X / Twitter 16,700 Followers Bluesky 3,900 Followers TikTok 1,600 Followers Facebook 2,400 Likes Codepen 150 Followers RSS 8,500 Subscribers

CSS Weekly is curated, edited,
published and created by Zoran Jambor.