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.
- Magic Animations
- 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.cssby Rami Yushuvaev and Lana Gordiievski
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?
AnimXYZby Miles and Mattan Ingram
AnimXYZ is a CSS library for composing animations, powered by CSS variables. It has Vue and React support.
Magic Animationsby Christian Pucci
Christian from Italy brings us an animation library with 64 beautiful effects, to get started directly.
transition.cssby Adam Argyle
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 CSSby James Sinkala
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 Underlinesby Michelle Barker
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 propertyby Una Kravets
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 CSSby Stefan Judis
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 modalby Niels Voogt
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 URLsby Reuben Lillie