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 Gordiievskihttps://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?
AnimXYZ
by Miles and Mattan Ingramhttps://animxyz.com
AnimXYZ is a CSS library for composing animations, powered by CSS variables. It has Vue and React support.
Magic Animations
by Christian Puccihttps://www.minimamente.com/project/magic
Christian from Italy brings us an animation library with 64 beautiful effects, to get started directly.
transition.css
by Adam Argylehttps://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.
Make Animated Content Placeholders with HTML and CSS
by James Sinkalahttps://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.
Animating Underlines
by Michelle Barkerhttps://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.
New aspect-ratio CSS property
by Una Kravetshttps://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.
How to display language-specific quotes in CSS
by Stefan Judishttps://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.
Making the DETAILS element look and behave like a modal
by Niels Voogthttps://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!
Better Line Breaks for Long URLs
by Reuben Lilliehttps://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.
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 by leaving a good old comment with your GitHub account.
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