Skip to content

Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

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.

Read more (CSS-Tricks) about Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

Practical uses of the :has() relational pseudo class

has() - The new relational pseudo class

The :has() relational pseudo class has landed in Chrome and Safari and even though it gets less hype than for instance container queries, I believe this little pseudo class contains a lot of improvements to the way we write CSS today.

Read more about Practical uses of the :has() relational pseudo class

Coding on a Chromebook - part 2

No internet dinosaurs coding visual

I purchased a Chromebook for my little coding projects. In the first part I wrote about the basic development setup. In this post, we’re taking a bit of a deeper dive: installing git, node, filezilla, some browsers, Docker and updating the terminal on ChromeOS.

Read more about Coding on a Chromebook - part 2

Coding on a Chromebook - part 1

Chromedino with heart

A few months ago, I purchased a Chromebook for my little side projects. I’m used to working on a Macbook, but I wanted to work with something that has a different feel, to make my little creations on the side feel more relaxing, and less like work. I have gained a lot of love for ChromeOS.

Read more about Coding on a Chromebook - part 1

CSS Day 2022: A small recap

Visual

After a long break because of Covid-19, CSS Day is back. In a new location at the Zuiderkerk in Amsterdam. Once again trying to create the perfect line-up for everything design and CSS, and boy, they delivered just that.

Read more about CSS Day 2022: A small recap

Using best practices to create CSS scroll snapping tabs

Accessible scroll snapping tabs visual

Scroll snapping is hip and while we all have styled numerous sorts of tab panes and scroll boxes, I had an idea of combining them. What started out as a simple “scroll snapping experiment” turned out to be an accessibility study.

Read more about Using best practices to create CSS scroll snapping tabs

Sticky headers: a solution with UX pitfalls?

Sticky headers

Let’s talk about sticky headers. They get used all the time and it seems that they are something we expect on a website. But is adding a sticky header the solution to our UX/UI problems, or just an easy fix?

Read more about Sticky headers: a solution with UX pitfalls?