Discoveries

Discoveries #14

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 Lists

by Chris Coyier 
https://css-tricks.com/sticky-definition-lists

If you want to have an alphabetical definition list on your website, defined by dl, dt and dd tags, you can give your users a better usability on scrolling through this list by using Chris’ sample.

Sticky Definition Lists

How to Detect When a Sticky Element Gets Pinned

by David Walsh 
https://davidwalsh.name/detect-sticky

A very short but useful JS snippet from David Walsh on how to detect if an element is being pinned by CSS’ position:sticky.

How to Detect When a Sticky Element Gets Pinned

Dark mode in 5 minutes, with inverted lightness variables

by Lea Verou 
https://lea.verou.me/2021/03/inverted-lightness-variables/

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.

Dark mode in 5 minutes, with inverted lightness variables

Float an Element to the Bottom Corner

by Temani Afif 
https://css-tricks.com/float-an-element-to-the-bottom-corner/

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.

Float an Element to the Bottom Corner

Neat Parallax Hero Effect

by Dominic Magnifico 
https://codepen.io/magnificode/pen/GpqGOm

This Codepen from Dom shows us, how to shrink an hero image on scrolling a page down with little CSS and JavaScript.

Neat Parallax Hero Effect

Underline animation

by Aaron Iker 
https://codepen.io/aaroniker/pen/pojaBvb

The default underlined links on web pages are really boring. Aaron gives us on his pen an animated alternative, which uses SVG and CSS.

Underline animation

Building split text animations

by Adam Argyle 
https://web.dev/building-split-text-animations/

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.

Building split text animations

Intrinsic Typography is the Future of Styling Text on the Web

by Scott Kellum 
https://css-tricks.com/intrinsic-typography-is-the-future-of-styling-text-on-the-web/

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.

Intrinsic Typography is the Future of Styling Text on the Web

CSS morphing

by Amit Sheen 
https://codepen.io/amit_sheen/pen/xxqYzvm

This pen from Amit is about a pure CSS technique on blending a word into another. Neat effect for countdowns for example.

CSS morphing

CSS Tips

by Marko Denic 
https://markodenic.com/css-tips/

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.

CSS Tips

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