This post is the first in a series about the power of CSS.<\/p>\n\n\n\n
CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we\u2019re seeing some really creative solutions emerging. The possibilities are still being explored on what CSS can do to make writing UI\u2019s simpler, and that\u2019s exciting!<\/p>\n\n\n\n
One of those is now one of my favorite CSS features: filters<\/a>. Let\u2019s look at how we can use filters to solve a problem you may have encountered when working with SVG as a background image on an element.<\/p>\n\n\n\n\n\n\n First, let\u2019s start by with an overview of filters. They include the following functions:<\/p>\n\n\n\n These effects can also be achieved with SVG filters or WebGL shaders, but CSS filters are the easiest way to implement basic transformations in the most browser-efficient manner. Because they are shortcuts of SVG filter effects, you can also use I love using the SVG (scalable vector graphics) format for web design. SVG is a great image format for the web, and since it\u2019s based on code, it allows for high-quality responsive and interactive content. When you inject SVG onto the page, you have access to each of its internal elements and their properties, allowing you to animate them, update values (such as color), and dynamically inject additional information. SVG is also a great icon format, especially instead of icon fonts<\/a>, and in smaller UI elements due to its high quality (think: retina screens) and small image size (think: performance).<\/p>\n\n\n\n I find that often, when SVG is used for these smaller elements, or as a large area of illustration, it\u2019s included as a background image for simplicity. The drawback to this is that the SVG is no longer under your control as a developer. You can\u2019t adjust individual properties, like fill color, of an SVG background because it is treated just like any image. This color conundrum can be solved with CSS! Filters to the rescue!<\/em><\/p>\n\n\n The first time I discovered the SVG background challenge was when I was working on a website that had white SVG icons for social share icons that lived on a background determined to match that application. When these icons were moved onto a white background, they were no longer visible. Instead of creating a new icon, or changing the markup to inject inline SVG, you can use With the CSS Filters<\/h3>\n\n\n
blur()<\/code><\/li>brightness()<\/code><\/li>contrast()<\/code><\/li>drop-shadow()<\/code><\/li>grayscale()<\/code><\/li>hue-rotate()<\/code><\/li>invert()<\/code><\/li>opacity()<\/code><\/li>saturate()<\/code><\/li>sepia()<\/code><\/li><\/ul>\n\n\n\nfilter: url()<\/code> and specify a filter effect ID onto any element. If you want to play around with custom filters, I recommend checking out cssfilters.co<\/a>.<\/p>\n\n\nThe Problem: Editing SVG Backgrounds<\/h3>\n\n\n
Adjusting Brightness<\/h4>\n\n\n
filter: brightness()<\/code>. <\/p>\n\n\n\nbrightness<\/code> filter, any value greater<\/em> than 1<\/code> makes the element brighter<\/em>, and any value less<\/em> than 1<\/code> makes it darker<\/em>. So, we can make those light SVG\u2019s dark, and vice versa!<\/p>\n\n\n\n