CSS Checkerboard Background… But With Rounded Corners and Hover Styles

CSS Checkerboard Background… But With Rounded Corners and Hover Styles

On one hand, creating simple checkered backgrounds with CSS is easy. On the other hand, though, unless we are one of the CSS-gradient-ninjas, we are kind of stuck with basic patterns. At least that’s what I thought while staring at … CSS Checkerboard Background… But With Rounded Corners and Hover Styles originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
More Details on `details`

More Details on `details`

A lot of chatter around the ol’ <details> and <summary> elements lately! I saw Lea Verou recently tweet an observation about the element’s display behavior and that sorta splintered into more observations and usage notes from folks, including a revived … More Details on `details` originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Overlapping Bar Charts

Overlapping Bar Charts

As the name suggests, overlapping charts visualize two different sets of data in a single diagram. The idea is that the overlapping bars allow us to compare data, say, year-over-year. They are also useful for things like tracking progress for … Overlapping Bar Charts originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Hacking CSS Animation State and Playback Time

Hacking CSS Animation State and Playback Time

CSS-only Wolfenstein is a little project that I made a few weeks ago. It was an experiment with CSS 3D transformations and animations. Inspired by the FPS demo and another Wolfenstein CodePen, I decided to build my own version. … Hacking CSS Animation State and Playback Time originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Using Grid Named Areas to Visualize (and Reference) Your Layout

Using Grid Named Areas to Visualize (and Reference) Your Layout

Whenever we build simple or complex layouts using CSS Grid, we’re usually positioning items with line numbers. Grid layouts contain grid lines that are automatically indexed with positive and negative line numbers (that is unless we explicitly name them). … Using Grid Named Areas to Visualize (and Reference) Your Layout originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
When Do You Use CSS Columns?

When Do You Use CSS Columns?

That ain’t rhetorical: I’m really interested in finding great use cases for CSS multi-column layouts. The answer seems straightforward. Use columns when you want to split any content into columns, right? Here is generally the sort of example you’ll find … When Do You Use CSS Columns? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Why (and How) I Write Code With Pencil and Paper

Why (and How) I Write Code With Pencil and Paper

If the thought of handwriting code seems silly, it might surprise you to know that it’s inevitable. If you’re unsure, think about the last job interview you did, and remember how there was no computer around in the interview room … Why (and How) I Write Code With Pencil and Paper originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Zooming Images in a Grid Layout

Zooming Images in a Grid Layout

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 … Zooming Images in a Grid Layout originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
How I Added Scroll Snapping To My Twitter Timeline

How I Added Scroll Snapping To My Twitter Timeline

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, … How I Added Scroll Snapping To My Twitter Timeline originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...