{"id":115,"date":"2024-06-02T06:37:45","date_gmt":"2024-06-02T06:37:45","guid":{"rendered":"https:\/\/webaffair.net\/blog\/?p=115"},"modified":"2024-06-02T06:45:52","modified_gmt":"2024-06-02T06:45:52","slug":"using-svg-filters-in-css","status":"publish","type":"post","link":"https:\/\/webaffair.net\/blog\/code\/basics\/using-svg-filters-in-css\/","title":{"rendered":"Using SVG Filters in CSS"},"content":{"rendered":"\n
Firstly, you’ll need the svg itself. <\/p>\n\n\n\n
1: Like empty images, empty svgs still take up some minimum space by default. If you’re borrowing a filter from an svg image that you’re actually using, that’s not an issue. If you’re just using the svg for filters, the svg itself needs to be hidden but still part of the page. You can do this by making it take up 0px rather than using display:hidden;<\/p>\n\n\n\n
2: If you want to use multiple filters, you can include them all in the <defs> area of a single <svg>, I find this just helps keeps my code organized.<\/p>\n\n\n\n
3: Each <filter> tag needs a completely unique id. (Remember that there should never be more than one element on a page using the same id; this becomes critical any time you’re referring to that id with anything except css.)<\/p>\n\n\n\n
<filter id=\"wavy2\"><\/code><\/pre>\n\n\n\n
On to the CSS<\/h2>\n\n\n\n
You can now apply the filter in your style sheet with the same filter: attribute as the built-in filters:<\/p>\n\n\n\n
1: There can’t be ” around the filter id; that trips me up sometimes since image url() do take quotes around them.<\/p>\n\n\n\n
2: Filters apply to the entire element including contents, and unlike transformations, can’t be undone by applying contradictory styles to a child element.<\/p>\n\n\n\n
If you want to apply the filter only to the background, you will need to have the background (and therefore the filter) separated from the content and positioned behind it, so that the other child elements aren’t affected. You could use a placeholder element of some sort, but :before works just fine:<\/p>\n\n\n\n
The position:relative on the element is needed on the parent to constrain the absolutely positioned element, and on the child elements to bring those into the same stacking context so they don’t get hidden behind the background. If you are already using :before for something else, you could do exactly the same with :after instead, but in that case you’ll also need to add some z-indexes to bring the contents up in front of the background.<\/p>\n\n\n\n<\/figure>\n","protected":false},"excerpt":{"rendered":"
![\"No](\"https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/Screen-Shot-2024-05-29-at-5.21.25-PM-1024x229.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"