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. ...
Interpolating Numeric CSS Variables

Interpolating Numeric CSS Variables

We can make variables in CSS pretty easily: :root { --scale: 1; } And we can declare them on any element: .thing { transform: scale(--scale); } Even better for an example like this is applying the variable on a user … Interpolating Numeric CSS Variables originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project

Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project

If a utility class only does one thing, chances are you don’t want it to be overridden by any styles coming from elsewhere. One approach is to use !important to be 100% certain the style will be applied, regardless of … Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project 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. ...
Converting Speech to PDF with NextJS and ExpressJS

Converting Speech to PDF with NextJS and ExpressJS

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, … Converting Speech to PDF with NextJS and ExpressJS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Cool Hover Effects That Use CSS Text Shadow

Cool Hover Effects That Use CSS Text Shadow

In my last article we saw how CSS background properties allow us to create cool hover effects. This time, we will focus on the CSS text-shadow property to explore even more interesting hovers. You are probably wondering how adding shadow … Cool Hover Effects That Use CSS Text Shadow originally published on CSS-Tricks. You should get the newsletter. ...
Creating the DigitalOcean Logo in 3D With CSS

Creating the DigitalOcean Logo in 3D With CSS

Howdy y’all! Unless you’ve been living under a rock (and maybe even then), you’ve undoubtedly heard the news that CSS-Tricks, was acquired by DigitalOcean. Congratulations to everyone! 🥳 As a little hurrah to commemorate the occasion, I wanted to … Creating the DigitalOcean Logo in 3D With CSS originally published on CSS-Tricks. You should get the newsletter. ...