CSS-Trickz! also ready to join Digital Ocean

You probably want CSS-Tricks

Quick Tip: Clear VS Code Cache for Open Files

Written by: Geoff Graham

If you use VS Code, you might have enabled the setting for re-opening a previously open file next time the app launches. I do. I like that.

Continue reading "Quick Tip: Clear VS Code Cache for Open Files" at CSS-Tricks

Designing for Long-Form Articles

Written by: Daniel Schwarz

Designing a beautiful “article” is wrought with tons of considerations. Unlike, say, a homepage, a long-form article is less about designing an interface than it is designing text in a way that creates a relaxed and comfortable reading experience. That’s because articles deal with long-form content which, in turn, tends to be valued by a […]

Continue reading "Designing for Long-Form Articles" at CSS-Tricks

Committing CSS Crimes

Written by: Bradley Kouchi

The time for CSS-Tricks is over. Now is the time for CSS Crimes! In this current landscape of content service providers, users are often limited to expressing themselves in text, links, and images. Sanitization rules tend to strip out HTML, JavaScript, and various attributes. Social media service Cohost allows users to have greater freedom with […]

Continue reading "Committing CSS Crimes" at CSS-Tricks

Zooming Images in a Grid Layout

Written by: Temani Afif

Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off. Say you want to add some fancy hover effect to the images where they grow and zoom beyond the rows and columns where they sit? […]

Continue reading "Zooming Images in a Grid Layout" at CSS-Tricks

How I Added Scroll Snapping To My Twitter Timeline

Written by: Šime Vidas

CSS Scroll Snap allows websites to snap the web page or any other scroll container to a specific scroll position when the user performs a scrolling operation. This feature has been supported in all modern browsers for over two years, but many websites that could benefit from it are still not using it. Scroll snapping […]

Continue reading "How I Added Scroll Snapping To My Twitter Timeline" at CSS-Tricks

Actually, the San Francisco Typeface Does Ship as a Variable Font

Written by: Geoff Graham

Apple unveiled an expanded version of its San Francisco system font at WWDC 2022. Then, last month, Jim Nielsen zeroed in on the font’s variations, explaining how the font provides a spectrum of variations based on the width and weight. It’s a remarkable read if you haven’t checked it.

Continue reading "Actually, the San Francisco Typeface Does Ship as a Variable Font" at CSS-Tricks

Converting Speech to PDF with NextJS and ExpressJS

Written by: Onuorah Bonaventure Chukwudi

With speech interfaces becoming more of a thing, it’s worth exploring some of the things we can do with speech interactions. Like, what if we could say something and have that transcribed and pumped out as a downloadable PDF? Well, spoiler alert: we absolutely can do that! There are libraries and frameworks we can cobble […]

Continue reading "Converting Speech to PDF with NextJS and ExpressJS" at CSS-Tricks

Implicit Grids, Repeatable Layout Patterns, and Danglers

Written by: Geoff Graham

Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content we throw at it? The specific situation is when a layout grid expects an even number of items, but is supplied with an odd number instead. We’re left […]

Continue reading "Implicit Grids, Repeatable Layout Patterns, and Danglers" at CSS-Tricks

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers

Written by: Temani Afif

When working with CSS Grid, the first thing to do is to set display: grid on the element that we want to be become a grid container. Then we explicitly define the grid using a combination of grid-template-columns, grid-template-rows, and grid-template-areas. And from there, the next step is to place items inside the grid. This […]

Continue reading "Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers" at CSS-Tricks

Scroll Shadows? Pure CSS Parallax? Game Back On.

Written by: Geoff Graham

Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with some clever background-attachment magic. The result is a slick scrolling interaction that gives users a hint that additional content is available in a scrollable container. Just one problem: it broke in […]

Continue reading "Scroll Shadows? Pure CSS Parallax? Game Back On." at CSS-Tricks

Recreating MDN’s Truncated Text Effect

Written by: Geoff Graham

It’s no secret that MDN rolled out a new design back in March. It’s gorgeous! And there are some sweet CSS-y gems in it that are fun to look at. One of those gems is how card components handle truncated text.

Continue reading "Recreating MDN’s Truncated Text Effect" at CSS-Tricks

Why I Chose Angular to Build a URL Shortener

Written by: Obumuneme Nwabude

URL Shorteners are tools we use to make links shorter than they actually are. With a URL Shortener, you can transform a long link (maybe for a registration form or article) into a shorter version. Behind the scenes, the long and short versions of a given link have been stored in some database. Then when […]

Continue reading "Why I Chose Angular to Build a URL Shortener" at CSS-Tricks