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. ...
Building Interactive Figma Widgets

Building Interactive Figma Widgets

Figma has always encouraged collaboration between developers and designers. It strives on an endless treasury of community-made plugins. Need 3D elements? There’s a plugin for that. Need abstract SVGs? There’s a plugin for that, too. That said, the design part of Figma has … Building Interactive Figma Widgets originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Designing for Long-Form Articles

Designing for Long-Form Articles

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 … Designing for Long-Form Articles originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
How stroke-dasharray Patterns Work

How stroke-dasharray Patterns Work

Say you have a line in SVG: <svg<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" /</svg You can use the stroke-dasharray property in CSS to make dashes: line { stroke-dasharray: 5; } That 5 value is a relative unit based … How stroke-dasharray Patterns Work originally published on CSS-Tricks. You should get the newsletter. ...
COLRv1 and CSS font-palette: Web Typography Gets Colorful

COLRv1 and CSS font-palette: Web Typography Gets Colorful

According to Toshi Omagari, the author of Arcade Game Typography, the world’s first multi-colored digital font was created in 1982 for a never-released video game called Insector. Multi-colored fonts, sometimes called chromatic type, are still relatively rare on the … COLRv1 and CSS font-palette: Web Typography Gets Colorful originally published on CSS-Tricks. You should get the newsletter. ...
Adding Custom GitHub Badges to Your Repo

Adding Custom GitHub Badges to Your Repo

If you’ve spent time looking at open-source repos on GitHub, you’ve probably noticed that most of them use badges in their README files. Take the official React repository, for instance. There are GitHub badges all over the README file that communicate important dynamic info, like the latest released … Adding Custom GitHub Badges to Your Repo 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. ...
Making Mermaid Diagrams in Markdown

Making Mermaid Diagrams in Markdown

Mermaid diagrams and flowcharts have been gaining traction, especially with GitHub’s announcement that they are natively supported in Markdown. Let’s take a look at what they are, how to use them, and just as importantly: why. Just like you … Making Mermaid Diagrams in Markdown originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...