A rather geeky/technical weblog, est. 2001, by Bramus
Michelle Barker has used CSS Motion Path to align text along a path: The “Motion Path” name is a little misleading, as it doesn’t only relate to movement. In fact, although the specification still goes by the name “Motion Path”, the property used to define the path was changed from motion-path to offset-path. It’s easy …
clip-path
On Codrops there’s a tutorial on how to create a Cutout Collage Layout using CSS Grid and Clip Path. The result looks quite nice I must say: What I’m not too excited about in this implementation is the fact that it requires you to manually cut up the image into parts beforehand, even though clip-path …
Continue reading “Crafting a Cutout Collage Layout with CSS Grid and clip-path“
Just some goofing around with Full Page Sections and Scroll Snapping: [CODEPEN DEMO] 🔗 Related Post:Simple Scroll Snapping Carousel (Flexbox Layout / Grid Layout)
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 …
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: …
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 😉
: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 …
I like how this box animates on hover, thanks to the use of multiple box-shadow effects:
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 …
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”