Cool CSS effect
Tags: webdev, css
Published: 2019-03-04 19:08:32

---
title: Cool CSS effect
published: true
description: A cool use case of clip-path
tags: #webdev #css
---

Have you seen the home page of [Dropbox](https://www.dropbox.com)? It is gorgeous! The design is great, the photos are magnificent and it makes use of interesting CSS properties.

One effect that I find neat, but also got me intrigued, was the smooth transition in the fixed navbar. As you can see for yourself, the content of the navbar (logo + links) changes its color according to the background color.

![Dropbox effect](https://thepracticaldev.s3.amazonaws.com/i/9n661z8mzfme1lvlghuh.png)

At first, I thought that there must be some JavaScript or at least some complex CSS involved. But no, the effect is actually simple to pull off.

However, it is quite hard to understand the underlying logic. It took me a solid  hour to get a grasp of what was going on.

That is why I decided to blog about it and explain step by step how to achieve this cool CSS trick.

## Step One: boilerplate
We'll be using [Tailwind](https://tailwindcss.com/docs/what-is-tailwind/). The class names should be self-explanatory, but you can check what they do in the Tailwind docs. 

We have three full-height section, with different background color. Notice how we repeat the header for each section. This is necessary to get the desired effect.

{% codepen https://codepen.io/mornir0/pen/NJrLEr %}


So far nothing special.

## Step Two: fixed navbars
We want our navbars to be fixed when scrolling. So let's make the navbars `position: fixed`. Now all the navs will be stacked in the top-left corner, the last one (with the blue background) being on top. We also add some padding to the `<p>` tag to prevent the content from being masked by the navbar.

We want each navbar to disappear when we scroll past its section. For example, the navbar in the red section should be hidden when scrolling into the green section. This is currently not the case, as you can see in the pen below. I made the first two titles longer, so you can better see what is going on.

{% codepen https://codepen.io/mornir0/pen/PLzyYP %}

## Step Three: stacking contexts
We need to create a new stacking context for each section. There are different ways of achieving this. In this case, we are going to add a position `relative` to each section. Why this way? So we can kill two birds with one stone: in the next step we also need our sections to act as relative containers.
Now each navbar is hidden when scrolled past its respective section. 

{% codepen https://codepen.io/mornir0/pen/ywJRjq %}

## Step Four: clipping regions
We now want to hide the navbar when it is outside of its section. For this, we are going to use the CSS `clip-path` property. We first need to define the visible area. In our case, this area is the whole section to which belongs a navbar. In CSS, this area is defined by adding an overlay over each section (positioned absolutely and pinned to all edges). But now we can no longer interact with the content of the section. We can solve this problem by simply adding `pointer-events: none` to our overlays.
Finally, we need to specify that the nav should only be shown when located in its respective section. This is achieved by adding `clip-path: inset(0px)`. This defines the overlay as our cropped area.

{% codepen https://codepen.io/mornir0/pen/MxeZQp %}

I have to admit that I don't fully understand how `clip-path` works, especially when using percentage instead of pixels. I encourage you to play with this property in the codepen or in the [interactive examples on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path).
For example, try setting its value to `inset(150%)`.
 
⚠️ Although `clip-path: inset(0px)` works fine in Chrome, I recommend using Firefox to experiment with different values.
And while we're talking about browser support, the clip-path property is not supported in IE and Edge. However, for the trick presented in this post, you can still use the deprecated `clip` property: `clip: rect(auto, auto, auto, auto)`


### Learning together
I am far from being an expert at CSS. If I missed something or you have a better solution, feel free to share it with us in the comment section below.
I am really grateful to have found this excellent [answer on stackoverflow](https://stackoverflow.com/questions/48896706/dropbox-website-navigation-bar-effect), which inspired me to write this post.