Learn how to create smooth cross-document and single-page transitions using the new View Transition API. This comprehensive guide covers CSS animations, JavaScript implementation, staggered effects, and framework support with practical examples.
Learn how to implement dark and light modes on your website using pure HTML and CSS—no JavaScript required! This guide covers automatic color scheme switching based on the user's system preferences, custom toggles with JavaScript, storing preferences in local storage, and best practices for Astro sites.
Creating full-width elements that break out of parent containers can cause horizontal scrollbars. CSS containers provide an easy way to avoid horizontal scrollbars.
Astro uses Shiki syntax highlighting by default. It works great but it's missing one core feature, line numbers. In this article I explain how to add line numbers using CSS only and making it work with TailwindCSS.
Todays browsers support responsive images out of the box and for the best user experience it is necessary to serve images responsively. It's not trivial to implement a more advanced solution. This is the story about why and how I serve a multitude of formats and sizes for images on this blog.