/CSS

Spinning Diagrams With CSS

- Harold Cooper tl;dr: “Several people expressed surprise that the spinning diagrams don’t use any JavaScript or animated image formats, just HTML and CSS. So I thought I’d explain how they work before I forget.”

featured in #408

6 CSS Snippets Every Front-End Developer Should Know In 2023

- Adam Argyle tl;dr: (1) A container query. (2) Scroll snap. (3) Grid pile (4) Quick circle. (5) Control variants with @layer. (6) Memorize less and reach more with logical properties.

featured in #405

My Favourite 3 Lines Of CSS

- Andy Bell tl;dr:  “The main reason I’ve written this post though, is to send people to it when they ask why I use .flow or use margin, but also, I hope you’ve seen how damn powerful CSS Custom Properties are. They’re certainly more than just CSS variables, that’s for sure.”

featured in #392

3D in CSS

- Brad Woods tl;dr: "Sometimes a thing can be better communicated when shown from multiple perspectives. Below is an wireframe of a web page I used in a presentation. I needed to communicate there are 3 elements in the top-right corner, stacked on top of 1 another. By translating & rotating this wireframe in a 3D-space, I can show it from a 2nd perspective."

featured in #379

The Evolution Of Scalable CSS

tl;dr: "In this post, we’ll develop a deeper understanding of CSS by diving into the underlying issues that make it difficult to scale. We’ll understand the evolution of the various CSS best practices that have emerged and changed over time. By the end, we’ll have a good grasp on past approaches to scaling CSS on large projects, and how popular tools like Tailwind and a range of others address these issues in counter-intuitive ways."

featured in #368

Futuristic CSS

- Sacha Greif tl;dr: Future CSS trends and takes a look at some far-fetched and futuristic CSS features that might one day make their way to the browses, such as CSS toggles, switch function, intrinsic typography. And more. 

featured in #363

The CSS Behind Figma

- Ahmad Shadeed tl;dr: "The purpose of this write-up is to show how powerful flexbox and grid are and to highlight those interesting use-cases for them. There might be a few bits that are focused on subtle UI details which I like very much."

featured in #334

CSS Tips

- Marko Denic tl;dr: "CSS tips and tricks you won’t see in most of the tutorials," such as creating the typing effect with no JS, using the drop-shadow filter function, smooth scrolling with one line of CSS and no JS. And more. 

featured in #309

Yes, I Can Connect To A DB In CSS

- Lee Meichin tl;dr: “As the name might suggest, this is how you connect to a database using CSS. It only works in Chrome, unfortunately, but you can provide any SQLite database you like and query it via CSS.”

featured in #289

Designing Beautiful Shadows In CSS

- Josh Comeau tl;dr: "In this tutorial, we'll learn how to transform typical box-shadows into beautiful, life-like ones."

featured in #254