Based on the Dribble Shot “Nav Interaction Idea” by Gil, Kasper De Bruyne created this nice pen: Press the little grid icon to toggle a carousel-like overview which allows you to directly jump to a section. Stunning photos/houses too! ⚠️ The pen is best viewed in a wide screen layout.
Tag Archives: css
Styling Scrollbars with CSS: The Modern Way to Style Scrollbars
Since the early days of the web, customizing the browser’s scrollbar has proven to be very difficult to standardize across major browsers. Fortunately, on September 2018 a W3C Working Draft called CSS Scrollbars was released that looks like a viable way to finally accomplish this! Turns out the ::-webkit-scrollbar-* pseudo selectors (which never were a …
Continue reading “Styling Scrollbars with CSS: The Modern Way to Style Scrollbars”
Playing With Particles Using the Web Animations API
Louis Hoebregts writing for CSS-Tricks When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can. In this post, we’ll make even more particle magic using the Web …
Continue reading “Playing With Particles Using the Web Animations API”
Indicating Scroll Position on a Page With CSS
Scroll-based features tend to involve some bespoke concoction of CSS and JavaScript. But what if we could accomplish something that only uses CSS? Take this ingenious horizontal scrollbar with CSS, for instance. I want to do something similar, but to indicate scrolled sections rather than capture continuous scrolling. In other words, rather than increasing the …
Continue reading “Indicating Scroll Position on a Page With CSS”
classnames-components
– A classnames component wrapper to speed up styling React components
Geoffrey has created a handy package to quickly create React components that are built of an element with some CSS classes applied to them. Handy for when you’re working with CSS libraries such as Tailwind. import cc from 'classnames-components'; // using arguments const Header = cc('h1')('font-sans', 'text-3xl'); // using an array const Intro = cc('p')(['font-serif', …
Multi-line Highlights in CSS
These lines aren’t injected using ::after or the like, but are done via backgrounds. The key CSS property you’re looking for is display: inline; though, as set on the p elements; without it, it won’t work. That last swipe effect also uses box-decoration-break clone; so that each line animates in parallel.
A Practical Overview Of CSS Houdini
Adrian Bece writing for Smashing Magazine: Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell …
Positioning Text Along a Path with CSS
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 …
Crafting a Cutout Collage Layout with CSS Grid and 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
“