Tag: css

Making an element sticky with CSS is really simple nowadays, however things can get a bit messy when we have the element deep into the DOM tree. In this tutorial I'll show you how to make sure to stick your element to the parent container even if there are multiple other elements in between. The basics In order to make a sticky element there's only two things to keep in mind: First make sure the parent element contains a scroll Make sure the children is set as sticky and the position top is the Continue reading

In this tutorial I'm going to show you how to create a Hero header with a fixed image as the background and an overlay gradient on top. The image will have cover the whole screen with some text and a call to action in the middle. As always, we are going to use tailwind for this! You can take a look at the final result here: See the Pen Fixed Hero Header by Crysfel (@crysfel) on CodePen. Defining the markup The first thing we are going to do is to define the markup for the header, as a rule of Continue reading

Over the last 12 years I've been building Single Web Applications (SPAs). I've seen how the CSS landscape has changed, from the introduction of SASS, BEM, Bootstrap like frameworks, css modules, style components, etc. All of them trying to bring some sanity to the CSS madness! Definately some improvements over the years, but still all of these solution fail at some point. In the summer of 2018, I learned about a new utility framework called tailwind, the approach is completely different from Continue reading

A few days ago I had to implement a sticky banner at work, at first I thought it would be a simple task but it took me quite some time to figure everything out. On the bright side, I've learned a few new things about CSS in the process. Here are the requirements: The component might be present sometimes depending on some custom logic on the backend. When present, it had to push all the content down and when closed by the user, it had to disappear with a slide up animation. Effectively animating Continue reading