A rather geeky/technical weblog, est. 2001, by Bramus
During Google I/O, Learn CSS! — An evergreen CSS course and reference to level up your web styling expertise — was launched. Broken down in 23 chapters, you’ll learn the fundamentals of CSS. You’ll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you’ll learn …
Continue reading “Learn CSS! — A free course that guides you through CSS fundamentals”
Davor Suljic created a fork of my Smooth Scrolling Sticky ScrollSpy Navigation that — instead of using IntersectionObserver — uses some background magic to highlight the active navigation items. The result is a “Pure CSS” implementation: If you turn on an outline on one of the content sections it becomes clear how it exactly works: …
Continue reading “Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds”
Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect. GSAP not required to achieve the core effect, but it does polish the whole thing … #sweatingthedetails Dynamic CSS Masks with Custom Properties and GSAP →
color-mix(), and CSS color-contrast()
Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview: Relative color syntax, e.g. .bg-primary-100 { background-color: hsl(from var(–theme-primary) h s 90%); } .bg-primary-200 { background-color: hsl(from var(–theme-primary) h s 80%); } .bg-primary-300 { background-color: hsl(from var(–theme-primary) h s 70%); } … CSS color-contrast, e.g. .text-contrast-primary { color: color-contrast(var(–theme-primary) vs white, …
Temani Afif shares this clever trick to float an element to the bottom corner of a container. The solution is threefold: Float a full-height wrapper (which contains the image) to the right Use flexbox to place the image at the bottom inside that wrapper Use shape-outside to clip the wrapper Clever! Float an Element to …
Continue reading “CSS: Float an Element to the Bottom Corner”
Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results. This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled …
Continue reading “Container Queries are Actually Coming / Say Hello To CSS Container Queries”