Nice scroll effect on the BADASS Films website: The effect is achieved by placing a duplicate (but clipped) list on top of another one, in combination with scroll velocity calculation to define the slant of the list. BADASS →
Tag Archives: css
Breaking the CSS Grid (and how to fix it)
Dave Rupert lists two scenarios in which the CSS Grid can be broken, and how to fix it: Overflow-x Elements break the Grid Form Controls break the Grid To easily fix these, Dave has whipped up a small CSS snippet he calls “Fit Grid”, containing a CSS class you can apply to prevent these issues …
Continue reading “Breaking the CSS Grid (and how to fix it)”
CSS Grid Playground
Inside a super fast CSS Engine: Quantum CSS (aka Stylo)
Great writeup on how Firefox’s new CSS Engine “Quantum CSS” works. Also sports a clear and in-depth explanation of the rendering pipeline, with some nice illustrations to go along. You may have heard of Project Quantum… it’s a major rewrite of Firefox’s internals to make Firefox fast. We’re swapping in parts from our experimental browser, …
Continue reading “Inside a super fast CSS Engine: Quantum CSS (aka Stylo)”
The Difference Between Explicit and Implicit Grids
Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don’t have to specify each track and we don’t have to place every item manually makes the new module even better. Grids are flexible enough to …
Continue reading “The Difference Between Explicit and Implicit Grids”
Masonry Layout with CSS Grid and grid-auto-flow: dense;
By setting grid-auto-flow: dense;, the Grid auto-placement algorithm will attempt to fill in holes earlier in the grid if smaller items come up later, resulting in a Masonry-like layout. (click for demo) (via) 💁♂️ Do note that the result isn’t 100% masonry, but masonry-like. As Rachel Andrew – who else – notes: At first glance …
Continue reading “Masonry Layout with CSS Grid and grid-auto-flow: dense;“
Morphing Page Transition
A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up. Whilst the intro/splash screen is translated vertically over a distance of 200vh the shaped in the SVG at the bottom grows from a few pixels in height to 100vh, creating the gooey effect. <div class="content …
CSS Utility Classes and “Separation of Concerns”
Haha, now this sounds all too familiar: Over the last several years, the way I write CSS has transitioned from a very “semantic” approach to something much more like what is often called “functional CSS.” The author lists 5 stages: Phase 1: “Semantic” CSS Phase 2: Decoupling styles from structure Phase 3: Content-agnostic CSS components …
Continue reading “CSS Utility Classes and “Separation of Concerns””
Removing that ugly :focus ring (and keeping it too)
Update 2021-01-28: Nowadays we can use :focus-visible for this; No JavaScript needed! David Gilbertson: You click a button and see a blue border telling you that you’ve clicked on something that you know perfectly well you’ve just clicked on — because you just clicked on it. So it’s clear: the outline must go. But hold on a …
Continue reading “Removing that ugly :focus ring (and keeping it too)”
GridBugs – A Curated List of CSS Grid Interop Issues
Like Flexbugs, but then for CSS Grid Layout: Inspired by Flexbugs this list aims to be a community curated list of CSS Grid Layout bugs, incomplete implementations and interop issues. Grid shipped into browsers in a highly interoperable state, however there are a few issues – let’s document any we find here. By Rachel Andrew …
Continue reading “GridBugs – A Curated List of CSS Grid Interop Issues”