Skip to main content
CSS is fun and cool and I like it.
Article

Using “box shadows” and clip-path together

Let's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this case, it'll be applying a shadow to a shape.… Read article

Article

An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods

Map, reduce, and filter are three very useful array methods in JavaScript that give developers a ton of power in a short amount of space. Let’s jump right into how you can leverage (and remember how to use!) these super handy methods.… Read article

Article

Blurred Borders in CSS

Say we want to target an element and just visually blur the border of it. There is no simple, single built-in web platform feature we can reach for. But we can get it done with a little CSS trickery.… Read article

Article

The Many Ways to Change an SVG Fill on Hover (and When to Use Them)

SVG is a great format for icons. Vector formats look crisp and razor sharp, no matter the size or device — and we get tons of design control when using them inline.

SVG also gives us another powerful feature: the ability to manipulate their properties with CSS. As a result, we can make quick and simple interactions where it used to take crafty CSS tricks or swapping out entire image files.

Those interactions include changing color on hover states. It … Read article

Article

Apply a Filter to a Background Image

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 … Read article

Article

Level up your .filter game

.filter is a built-in array iteration method that accepts a predicate which is called against each of its values, and returns a subset of all values that return a truthy value.

That is a lot to unpack in one statement! Let's take a look at that statement piece-by-piece.… Read article

Article

The backdrop-filter CSS property

I had never heard of the backdrop-filter property until yesterday, but after a couple of hours messing around with it I’m positive that it’s nothing more than magic. This is because it adds filters (like changing the hue, contrast or blur) of the background of an element without changing the text or other elements inside.… Read article

Article

Solved with CSS! Colorizing SVG Backgrounds

This post is the first in a series about the power of CSS.

Article Series:

  1. Colorizing SVG Backgrounds (this post)
  2. Dropdown Menus
  3. Logical Styling Based On the Number of Given Elements

CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging. The possibilities are still being explored on what CSS can do to make writing UI’s simpler, and that’s exciting!

One of those is … Read article

Article

Using SVG to Create a Duotone Effect on Images

Creatives everywhere welcomed the 2016 new year with the spark of a colorizing technique popularized by Spotify’s 2015 Year in Music website (here is last year’s) which introduced bold, duotone images to their brand identity.

Well, thanks to the potentially life-saving powers of SVG, we can create these Photoshop-like “adjustment layers” with SVG filters.

icon-link icon-logo-star icon-search icon-star