In this month discoveries you will find some posts and pens regarding CSS and its possibilities. It’s always amazing what can be done with it and what cool solutions can be found on the web.
- Sticky Definition Lists
- How to Detect When a Sticky Element Gets Pinned
- Dark mode in 5 minutes, with inverted lightness variables
- Float an Element to the Bottom Corner
- Neat Parallax Hero Effect
- Underline animation
- Building split text animations
- Intrinsic Typography is the Future of Styling Text on the Web
- CSS morphing
- CSS Tips
Sticky Definition Listsby Chris Coyier
If you want to have an alphabetical definition list on your website, defined by
dd tags, you can give your users a better usability on scrolling through this list by using Chris’ sample.
How to Detect When a Sticky Element Gets Pinnedby David Walsh
A very short but useful JS snippet from David Walsh on how to detect if an element is being pinned by CSS’
Dark mode in 5 minutes, with inverted lightness variablesby Lea Verou
Providing a light and dark mode on websites is almost common today. Lea show us how we can save time on using HSL hue and lightness in CSS.
Float an Element to the Bottom Cornerby Temani Afif
Placing illustration images in the text is a common way to lighten up a web page. Temani shows us how to place such an image at the bottom of a content element.
Neat Parallax Hero Effectby Dominic Magnifico
Underline animationby Aaron Iker
The default underlined links on web pages are really boring. Aaron gives us on his pen an animated alternative, which uses SVG and CSS.
Building split text animationsby Adam Argyle
Animating the title of a web site can be a nice way to add some movement to rigid text. Adam shows us how his approach to animating each character works.
Intrinsic Typography is the Future of Styling Text on the Webby Scott Kellum
Flexible layouts have their pitfalls, especially in terms of adjusting text sizes. In this post, Adam talks about what he calls intrinsic typography, where text is scaled by using a Bézier curve to improve readability.
CSS morphingby Amit Sheen
This pen from Amit is about a pure CSS technique on blending a word into another. Neat effect for countdowns for example.
CSS Tipsby Marko Denic
In this post Marko lists some useful tips on using pure CSS, including Typing Effect, Smooth Scrolling, Truncate text, CSS only modals, custom scrollbars, background-clip text or rounded gradient borders.