If it pops, it belongs in HTML and CSS! Lately, I had a lot of fun playing around with this upcoming feature. The first version is being developed and it’s starting to look pretty good. It’s time to handle our basic popovers without the explicit need of JavaScript.
Read more about Open UI and the Popover API
Animating elements while a user scrolls the page is a popular practice on the web. With animation-timeline and the scroll() function available in Chrome Canary, we get a nice preview on how these scrolling animations in pure CSS will work. The perfect time to create some demos and play around with it.
Read more about For the love of scroll-timeline animations in CSS
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
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
Fluid typography is getting a lot more popular, especially since the clamp() math function is available in every evergreen browser. But if we’re honest, it’s still a lot of mathematics to achieve this. You can use tools such as utopia.fyi, which are fantastic. But in large projects, it can get messy pretty fast. So let's make this easy with Sass.
Read more (Smashing Magazine) about Easy Fluid Typography With clamp() Using Sass Functions
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
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
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
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
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?