Great tip by Umar Hansa: CSS Tip 💡️The place-items property is shorthand for the align-items and justify-items properties. Here's an interactive demo of how it works: https://t.co/4unHqw5R3o — Umar Hansa (@umaar) April 7, 2020 MDN Web Docs: place-items →
Ahmad Shadeed dove into the new Facebook design and noted his findings. I am a curious person who is always interested in opening up the browser DevTools to see how things were made on a website. This is the first time that I blog about something like this. I found some interesting uses of different […]
Nice little demo by Josh W. Comeau in which he uses clip-path to create a folded corner. It even animates on hover 🙂
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 […]
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.
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. […]
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.