Discoveries

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.

Drop-Shadow: The Underrated CSS Filter

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…

css.gg - 700+ CSS Icons

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.

SVGBox - API for Web Icons

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.

Change Color of SVG on Hover

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…

CSS filter generator to convert from black to target hex color

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.

Responsive && Configurable SVG Waves

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.

Balloon.css

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?

How to Build a CSS-only Organizational Chart

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.

Shifty

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.

Brad Traversy's 50 Projects 50 Days

Related