Discoveries #6

2020 is over and history. Well, may 2021 be with us. With this post I would like to continue the Discoveries, with new momentum. There was a lot to read over the holidays.

All the finds in this issue have something to do with visual aspects of web design in the broadest sense.

• Drop-Shadow: The Underrated CSS Filter
• css.gg - 700+ CSS Icons
• SVGBox - API for Web Icons
• Change Color of SVG on Hover
• CSS filter generator to convert from black to target hex color
• Responsive && Configurable SVG Waves
• Balloon.css
• How to Build a CSS-only Organizational Chart
• Shifty
• Brad Traversy's 50 Projects 50 Days

---

Drop-Shadow: The Underrated CSS Filter

by Michelle Barker 
https://css-irl.info/drop-shadow-the-underrated-css-filter

There are 2 built-in ways to drop a shadow on a HTML element with CSS. Michelle shows us the difference and the additional features filter: drop-shadow has.

---

css.gg - 700+ CSS Icons

by Astrit Malësia 
https://css.gg

Astrit, a swedish designer, has build this outstanding icon repository, with tons of icons in pure CSS or SVG. Chapeau…

---

SVGBox - API for Web Icons

by ? 
https://svgbox.net

In case css.gg has not the appropriate SVG icon you are looking for, visit this site and explorer 12 icon sets with over 3.000 icons. Whoever brought this to us, thanks.

---

Change Color of SVG on Hover

by Chris Coyier 
https://css-tricks.com/change-color-of-svg-on-hover

Once again Chris, who shows us here, how to colorize a SVG icon in case you use it as a background image by using CSS filter.

---

CSS filter generator to convert from black to target hex color

by Barrett Sonntag 
https://codepen.io/sosuke/pen/Pjoqqp

As Chris Coyer mentioned in the discovery above, you need the appropriate filter values on colorizing SVG’s. Barret has developed a converter in a pen. Useful tool…

---

Responsive && Configurable SVG Waves

by Jhey Tompkins 
https://codepen.io/jh3y/pen/poEvKxo

Seperating content on a web site with some kind of divider is advisable and motion is nice, if you don’t overdo it. Jhey shows us, how to combine both with an animated wave.

---

Balloon.css

by Claudio Holanda 
https://kazzkiq.github.io/balloon.css

Ever needed tooltips for elements, which are not self-describing? Download this pure CSS solution from Claudio und you never search again for something like that.

---

How to Build a CSS-only Organizational Chart

by someone at Envato Tuts+ 
https://codepen.io/tutsplus/pen/MWedpoj

Org charts are important to visualize hierarchies. Why not creating them with nothing else than HTML and CSS?

---

Shifty

by Warren Galyen 
https://wgalyen.github.io/shifty

No one can escape parallax effects on backgrounds. They are just too pleasing. Warren addresses this with his tiny JavaScript library.

---

Brad Traversy's 50 Projects 50 Days

by Brad Traversy 
https://github.com/bradtraversy/50projects50days

There are a lot of doing-a-thing-every-day projects, but Brad is pushing it with his 50 web projects in 50 days. Check out Expanding Cards or Rotating Navigation Animation or Theme Clock. Cool stuff and source code is available.