What happens when you combine the fact that part after the : for CSS Custom Properties doesn’t need to be valid CSS with window.getComputedStyle()? You get a way of passing data – including Arrays, Objects, and even JSON – from CSS to JavaScript. Psst… Hey kid… Did you know you can pass data from your […]
Tag Archives: css
Overflow In CSS
Ahmad Shadeed is at it again, this time with a guide on Overflow in CSS: In CSS, we can have control over an element when its content is too big to fit in. The property for that is overflow, which is a shorthand for overflow-x and overflow-y properties. For this article, I will give an […]
Combine CSS Grid and clip-path
Reminds me of Eric Meyer’s Flexible Captioned Slanted Images in which he combines Flexbox and CSS clip-path. In that implementation Eric did have to correct the margins to fix the gap between the items. With the grid implementation this looks like to be no problem.
Compound Grid Generator
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 →
“Redefining the Technical Possibilities of CSS” by Rachel Andrew
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. […]
Margin considered harmful
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 […]
Nav Interaction Idea // Animated Slider
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.
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 are […]
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 […]
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 […]