The CSS :has() pseudo class is rolling out in many browsers with Chrome and Safari already fully supporting it. It’s often referred to it as “the parent selector” — as in, we can select style a parent element from a child selector — but there is so much more that :has() can help us solve. One of those things is re-inventing the clickable card pattern many of us love to use from time to time. We’ll take a look at how :has() can help us handle linked cards, b..

• 0 Comment

As front-end developers, we’ve wished for a lot of things over the years — ways to center things in CSS, encapsulate styles, set an element’s aspect ratio, get finer-grained control over our colors, select an element based on its children’s properties, manage layers of specificity, allow elements to respond to the width of their parents… the list goes on and on. And now that we got all we wished for and more, some of us are asking — do we now have too much CSS?..

• 0 Comment

Welcome to Part 2 of this three-part series! We are still decorating images without any extra elements and pseudo-elements. I hope you already took the time to digest Part 1 because we will continue working with a lot of gradients to create awesome visual effects. We are also going to introduce the CSS mask property for more complex decorations and hover effects. Fancy Image Decorations series Single Element MagicMasks and Advanced Hover Effects (you are here!)Outlin..

• 0 Comment

I love it when there’s a sense of synergy in the blogosphere. First, I caught Nick Heer’s coverage of Meta ending support for Instant Articles, its proprietary format for stripped-down performant news articles. He also compares it to the similar demise of AMP, Google’s answer to Instant Articles. Then I came across a new one from Chris Coyier where he goes on to discuss the big issue with proprietary models of content syndication, whether it’s Meta Instant Articles..

• 0 Comment

Before I career jumped into development, I did a bunch of motion graphics work in After Effects. But even with that background, I still found animating on the web pretty baffling. Video graphics are designed within a specific ratio and then exported out. Done! But there aren’t any “export settings” on the web. We just push the code out into the world and our animations have to adapt to whatever device they land on. So let’s talk responsive animation! How do we b..

• 0 Comment

When you put something — say a regular sheet of paper — in a manilla folder, a part of that thing might peek out of the folder a little bit. The same sort of thing with a wallet and credit cards. The cards poke out just a smidge so you can get a quick glance of which cards you’re carrying. Credit: Stephen Phillips on Unsplash I call this sort of thing a “slit”. A slit is where we create the illusion of an opening through which we can tease a visual elem..

• 0 Comment

By way of a post by Manuel Matuzović which is by way of a demo by Temani Afif. .wrapper { margin-inline: max(0px, ((100% - 64rem) / 2)); } You’d be doing yourself a favor to read Manuel’s breakdown of all what’s happening here, but it basically works out to the equivalent of this longer syntax: .wrapper { max-width: 64rem; margin: 0 auto; width: 100%; } …where: max() acecepts a comma-separated list of CSS numeric values, where the applied ..

• 0 Comment

Are you a Bezier curve lover like I am? CodePen Embed Fallback Besides being elegant, Bezier curves have nice mathematical properties due to their definition and construction. No wonder they are widely used in so many areas: As a drawing/design tool: They are often refered to as “paths” in vector drawing software.As a format of representing curves: They are used in SVG, fonts and many other vector graphic formats.As a mathematical function: Often used to control ..

• 0 Comment

Well, hey, welcome back to Behind the CSScenes! These posts are like little check-ins we’re doing each month to give you a peek behind what we’re doing here at CSS-Tricks, as well as a chance for us to pause and celebrate a few things. Last month, we shared a small taste of a redesign for this very site. Thanks to all the folks who wrote in to comment on it! Seems the overwhelming response is pretty dang positive, though the background color was a mixed bag of reaction..

• 0 Comment

As the title says, we are going to decorate images! There’s a bunch of other articles out there that talk about this, but what we’re covering here is quite a bit different because it’s more of a challenge. The challenge? Decorate an image using only the <img> tag and nothing more. That right, no extra markup, no divs, and no pseudo-elements. Just the one tag. Sounds difficult, right? But by the end of this article — and the others that make up this little ..

• 0 Comment