When it comes to graphical effects on the Web, CSS has already come a long way in the last few years, with the introduction of CSS filters and blend modes a few years back. However, when compared to effects available in graphics editors such as Photoshop and the likes, CSS is still behind, by far. But SVG, on the other hand, is not that far behind.
SVG comes with a set of filter primitives that enable you to recreate Photoshop-grade effects in the browser, using a few lines of code. While the syntax and attributes of these filters may seem intimidating and not very friendly at first, once you get a grasp of how they work, you-ll have a very powerful tool in your arsenal, that allows you to push the boundaries of what is possible on the Web.
In this talk, Sara is going to give you a crash course on SVG filters - why they are awesome, how they work, and examples of powerful effects you can create with them, in an friendly, easy-to-follow approach. Brace yourself, and get ready to set your imagination free and expand your creativity for what-s possible on the Web today.
--
This talk was given at the beyond tellerrand 2018 conference by Sara Soueidan.
Checkout the beyond tellerrand channel for more great talks: https://www.youtube.com/channel/UCTmgiUv2MGSFy7Wt-cMDpOw
This talk is under the creative commons license. freeCodeCamp is not associated with this talk. We're just excited to bring more exposure to to it!
Information about beyond tellerrand:
https://beyondtellerrand.com/
https://twitter.com/btconf
Daniel: 4:30 Another benefit of blur() is that you can hide excessive jpeg compression, which you may want to do to really keep file sizes low. Compressing an already blurry image will result in either a blocky image or a suboptimal file size. Date: 2022-03-14
