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 Barkerhttps://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ësiahttps://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 Coyierhttps://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 Sonntaghttps://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 Tompkinshttps://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 Holandahttps://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 Galyenhttps://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 Traversyhttps://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.

You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
In case your blog software can't send Webmentions, you can use this form:
Webmentions
No Webmentions yet...
Comments