Just some goofing around with Full Page Sections and Scroll Snapping: [CODEPEN DEMO] 🔗 Related Post:Simple Scroll Snapping Carousel (Flexbox Layout / Grid Layout)
Full Page Scroll-Snapping HTML Sections
Tag Archives: css
The Slideout Footer
Chris Coyier, after seeing the footer on a site called The Markup: The footer is clever, in how it appears to slide out from underneath the content as you scroll to the bottom of the page. Let’s make it! Scroll to the very bottom in this pen to see the footer appear from underneath the …
Chameleonic Header
UPDATE 2021.01.14: Besides using clip-path, a more easy approach is to use mix-blend-mode: difference; if all you’re doing is inverting colors. Ever had a fixed header that had to work with both light and dark content shown underneath it? Keep an eye at the header in the video below to see what I’m talking about: …
CSS Landscape
A landscape, painted with CSS: Click the image to go to the CodePen. Do note it’s quite heavy on resources (hence why I haven’t embedded it here). 👋 Psst, try changing the color of the sun 😉
CSS :nth-of-class selector
The Problem One thing that bothers me with CSS :nth-of-type/:nth-child selectors is that you can’t combine them with CSS classes. The selector below for example won’t work as you’d first expect it to work: .bar:nth-child(2) { color: red; } No, the selector above won’t color the second .bar element red, something I had somehow expected …
Stacked Rainbow Cards
I like how this box animates on hover, thanks to the use of multiple box-shadow effects:
The ultimate guide to CSS Viewport Units
Ahmad Shadeed has done an extensive write-up on Viewport Units: In this article, we will learn about CSS viewport units and how to use them, along with some use-cases and solutions for common issues. Let’s start and dig in! It’s great to see that it’s an all-in-one article, covering use cases such as Viewport Unit …
“Designing Intrinsic Layouts” by Jen Simmons
Twenty-five years after the web began, we finally have a real toolkit for creating layouts. Combining CSS Grid, Flexbox, Multicolumn, Flow layout and Writing Modes gives us the technical ability to build layouts today without the horrible hacks and compromises of the past. In this hour-long talk captured live at An Event Apart DC 2019, …
Continue reading ““Designing Intrinsic Layouts” by Jen Simmons”
A Variable Fonts Primer
Now that Google Fonts has some Variable Fonts in their offering, this primer on Variable Fonts might come in handy: Variable fonts let you add nuance and artistry to your web typography without bogging down your site. Now you can accomplish what used to require several files with a single file and some CSS! The …
Staggered Animations with CSS Custom Properties
Paul Hebert on the Paul Hebert blog: Movement in nature doesn’t happen all at once. Imagine a flock of birds taking off, raindrops splashing on the ground, or trees bending in the wind. The magic of these moments comes from many small movements overlapping and converging. I wanted to bring this natural movement into my …
Continue reading “Staggered Animations with CSS Custom Properties”