Yearly Archives: 2018

You can apply a filter to an entire element quite easily with the filter property. But what if you want to apply a filter just to the background of an element? It’s weirdly tricky.

There are CSS properties that specific to backgrounds, like background-blend-mode — but blending and filters are not the same thing. It sorta seems to be the reason we have backdrop-filter, but not quite. That does filtering as the background interacts with what is behind the …

The post Apply a Filter to a Background Image appeared first on CSS-Tricks.

(This is a sponsored post.)

It’s always fun to watch developers discover Netlify for the first time. It’s so easy. One way to do it is to just literally drag and drop a folder onto them and it will be online. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your site’s build as it does it. …

The post Netlify appeared first on CSS-Tricks.

Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr.

.grid {
display: grid;
grid-template-columns: 1fr 300px;
}

That’s somewhat robust. That 1fr column will take up any remaining space left behind by the fixed 300px column. It’s true that the auto value would do the same, but auto isn’t quite as robust since it’s size is based on the content inside. So, …

The post Preventing a Grid Blowout appeared first on CSS-Tricks.

CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.

We also get the ::before and ::after psuedo elements in CSS, which give us the potential of two more shapes we can …

The post The Shapes of CSS appeared first on CSS-Tricks.