A rather geeky/technical weblog, est. 2001, by Bramus
Dissecting a React Component built by Jamie Kyle, Stefan Judis provides us with an easy to use CSS class that adds a “Natural Shadow” to any element. He does this by inlining the SVG <filter> in a CSS filter. 💁♂️ You can think of this “Natural Shadow” like a “Ambient Lighting” (Ambilight) option on a …
Continue reading “Natural Shadows in CSS with inlined SVG filters”
In this post Louis Hoebregts creates nice tooltips. No, not a typical triangle injected at the bottom but a nice curved one, also letting the image underneath peek through. For it he uses mask-image consisting of two parts: one rectangle overlaying the top part of the image + one SVG arrow overlaying the bottom part. …
Continue reading “Perfect Tooltips With CSS Clipping and Masking”
A simple, consistent open-source icon set designed to be used in a wide variety of digital products. The folks at Mono have released an update to their Icon Set, now totalling 177 icons in total. Available as SVGs (recommended) but can also be included as an icon font. Mono Icons →Mono Icons (GitHub) →
Louis Hoebregts recreated the animation of last Apple’s recent Keynote Event using SVG, Canvas, and GreenSock: See the Pen Apple Keynote animation by Louis Hoebregts (@Mamboleoo) on CodePen. Crazy! 🤯 If you’re curious to see how he’s done it, in the demo below he breaks it down step by step: See the Pen Apple Keynote …
Continue reading “Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock”
Nice little video explaining SVGs and how the d attribute of paths work. The aforementioned SVG Path Visualizer might come in handy too.
In Table of Contents with IntersectionObserver on CSS-Tricks, Chris Coyier talks about sticky table of contents on long pages whose active state updates as you scroll. When talking about those, you can not not mention the wonderful Progress Nav by Hakim El Hattab. Final version of the progress nav! Switched to SVG and made it …
use
Good reminder by Georgi Nikoloff to have one (visually hidden) SVG that contains several layers, which you can then include further down in your code. SVG has a <defs> tag that lets us declare something like our graph footer just once and then simply reference it — using <use> — from anywhere on the page …
Continue reading “Too Many SVGs Clogging Up Your Markup? Try use“
Past weekend Lou Ottens — inventor of the Casette Tape while working at Philips Hasselt (Belgium) — passed away at the age of 95. Sharing this Greensock-powered SVG Animation by Chris Gannon seems very timely. See the Pen Cassette Tape Loader by Chris Gannon (@chrisgannon) on CodePen. Anyone got a pencil? 😅
<feColorMatrix> with SVG Color Matrix Mixer
Easily generate nice looking Color Matrix Filters for your images For use with the <feColorMatrix /> SVG filter. SVG Color Matrix Mixer →
Enter an SVG path data (the string inside the d attribute) to visualize it and discover all its different commands Handy tool! And the cool part is you get shareable URLs along with it 🙂 SVG Path Visualizer →