CSS-Tricks is joining the DigitalOcean community! We are so excited to be joining forces. Learn more about this change here. As a special welcome offer, enjoy $200 of free credit to try DigitalOcean on us.
So you want an auto-playing looping video without sound? In popular vernacular this is the very meaning of the word GIF. The word has stuck around but the image format itself is ancient and obsolete. Twitter, for example, has …
I like that sorta effect where an image almost looks like it’s an oil painting or an illustration made with a thick, runny ink fountain pen. I got the idea when Scott Vandehey shared his “halftone filter” effect on the …
Did you know that DOM elements with IDs are accessible in JavaScript as global variables? It’s one of those things that’s been around, like, forever but I’m really digging into it for the first time.
If this is the first …
The wave is probably one of the most difficult shapes to make in CSS. We always try to approximate it with properties like border-radius and lots of magic numbers until we get something that feels kinda close. And that’s before …
If we browse the WordPress theme directory, a majority of themes showcase cover images. It is a feature in popular demand. The cover page trend is true even in the block theme directory screenshots as well.
Let’s consider the …
The video of Chris Coyier’s talk at CascadiaJS 2022 is now available. It’s his first in-person talk in more than two years, so it’s great to see our good friend back on stage slinging gems on what makes the web …
SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can change the styles of the SVG on hover …
A style rule is a qualified rule that associates a selector list with a list of property declarations and possibly a list of nested rules. They are also called rule sets in CSS2.
…As the above quote from W3C indicates, it seems
The grid-row-end CSS property is part of the CSS Grid Layout specification, used to indicate the row grid line where a grid item ends in a grid layout. This property — among other line-based placement grid properties — controls …
The grid-row-start CSS property is part of the CSS Grid Layout specification, used to indicate the row grid line where a grid item starts in a grid layout. This property — among other line-based placement grid properties — controls …
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 …
