A rather geeky/technical weblog, est. 2001, by Bramus
Handy tool by Michelle Barker: A little tool to generate compound grids. Enter the number of columns for each of your grids, and they’ll be magically merged into a compound grid. Use the output in your grid-template-columns property when using CSS Grid for layout. Compound Grid Generator →
If you’re looking for a good video on the possibilities of Modern CSS (“CSS X”?), check out this talk by Rachel Andrew. She’ll get you up to speed with things: Over the last few years, rapid browser implementation of advances in CSS have given us the ability to do many of these previously impossible things. …
Continue reading ““Redefining the Technical Possibilities of CSS” by Rachel Andrew”
Max Stoiber: We should ban margin from our components. Hear me out. By banning margin from all components you have to build more reusable and encapsulated components. I think the message is a bit more nuanced though: margins of course still are allowed and used throughout your CSS, but if you want to allow a …
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.
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”
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”
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', …
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.
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 …