Discoveries

Discoveries #8

This month my discoveries are all about CSS … at least almost. See the stunning solutions developers around the world have created and take them to improve yours. Have fun exploring.

  • Charts.css
  • AnimXYZ
  • Magic Animations
  • transition.css
  • Make Animated Content Placeholders with HTML and CSS
  • Animating Underlines
  • New aspect-ratio CSS property
  • How to display language-specific quotes in CSS
  • Making the DETAILS element look and behave like a modal
  • Better Line Breaks for Long URLs

Charts.css

by Rami Yushuvaev and Lana Gordiievski 
https://chartscss.org

Mentioned in hundreds of other blog posts earlier, Chart.css is so good that I have to mention it here too. Pure CSS charts, with animations, responsiveness, customizable and Open Source … what more could a heart desire?

Charts.css

AnimXYZ

by Miles and Mattan Ingram 
https://animxyz.com

AnimXYZ is a CSS library for composing animations, powered by CSS variables. It has Vue and React support.

AnimXYZ

Magic Animations

by Christian Pucci 
https://www.minimamente.com/project/magic

Christian from Italy brings us an animation library with 64 beautiful effects, to get started directly.

Magic Animations

transition.css

by Adam Argyle 
https://github.com/argyleink/transition.css

Another CSS library for animating things on the web. Adam is targeting the transition of an element. Cool and easy to use.

transition.css

Make Animated Content Placeholders with HTML and CSS

by James Sinkala 
https://dev.to/xinnks/make-animated-content-placeholders-with-html-and-css-3ekn

A modern approach to entertain web users while loading some content or images is to show animated placeholders, like Instagram, Facebook and others do. James gives us the instructions how to implement these with pre CSS.

Make Animated Content Placeholders with HTML and CSS

Animating Underlines

by Michelle Barker 
https://css-irl.info/animating-underlines

From the beginning of time, URL’s has shown as underlined text. How boring. Michelle has some ideas to bring some life into links.

Animating Underlines

New aspect-ratio CSS property

by Una Kravets 
https://web.dev/aspect-ratio

Dealing with images in CSS can be a mess sometimes, especially on responsive layouts. Read about the common hacks regarding aspect ratio and the upcoming new CSS feature aspect-ratio.

New aspect-ratio CSS property

How to display language-specific quotes in CSS

by Stefan Judis 
https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css

Doing internationalization right, you have to beware of some pitfalls, like the different quotes in some languages. Germans are using different double quotes for start and end, French are using double arrows and so on. Stefan shows us how to do it right.

How to display language-specific quotes in CSS

Making the DETAILS element look and behave like a modal

by Niels Voogt 
https://codepen.io/NielsVoogt/full/XWjPdjO

In this pen, Niels is playing around with the DETAILS tag and shows how it can be used for a modal dialog with CSS only. Great idea!

Making the DETAILS element look and behave like a modal

Better Line Breaks for Long URLs

by Reuben Lillie 
https://css-tricks.com/better-line-breaks-for-long-urls

Reuben addresses in his post at CSS-Tricks the problem of displaying long URL’s and shows a solution with a little bit JavaScript how to do it right once and for all.

Better Line Breaks for Long URLs

Webmentions

No Webmentions yet...

In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...


Comments

Related