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

Change Color of SVG on Hover

There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover, :active, :focus, class name change, etc. — is different.

Let's look at the ways.… Read article

Article

Inline SVG… Cached

I wrote that using inline <svg></svg> icons makes for the best icon system. I still think that's true. It's the easiest possible way to drop an icon onto a page. No network request, perfectly styleable.

But inlining code has some drawbacks, one of which is that it doesn't take advantage of caching. You're making the browser read and process the same code over and over as you browse around. Not that big of a deal. There are much bigger … Read article

Link

Making SVG icon libraries for React apps

Link

Accessible SVG Icons With Inline Sprites

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

Link

Discover The Fatwigoo

Link

Papercons

Link

Preparing and Exporting SVG Icons in Sketch

Link

The Road to SVG and Custom Elements in Clarity Icons

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