[GoLUG] CSS tips YouTube channel - really nifty pure CSS effects

Ron / BCLUG admin at bclug.ca
Sat Oct 12 03:46:10 EDT 2024


I just found this channel and it's got great info:

 > These CSS PRO Tips & Tricks Will Blow Your Mind!

https://www.youtube.com/watch?v=PL3Odw-k8W4


Several new-to-me techniques.

Glassmorphism looks nice in this example. Normally I don't like 
transparencies but these are nice, and the people who like them like 
them a lot.


Resizing all elements could be handy.


Doubling the box-shadows for an enhanced lighting effect is pretty.


:not() and :has() are essential pseudo selectors.


Also, dark mode in CSS *only*.  Rewatched it, will re-watch again. That 
single technique is worth twice the cost of the 8 minutes the video took.

Hmmm, okay for one page, needs browser's local storage via JS to 
persist; still, very cool.


Gradient filled text is cool. Since it can't be done via color:, adding 
the gradient to the background, masking the text, then making text 
transparent is clever.


Counter-reset, counter-increment variables in CSS - FINALLY. Dynamic 
paragraph numbering, etc. all in CSS!



Snap scrolling? Gotta know this trick. scroll-snap-type: x mandatory + 
scroll-snap-align.


rb



More information about the GoLUG mailing list