DEV Community

Cool CSS effect

Jérôme Pott on March 04, 2019

Have you seen the home page of Dropbox? It is gorgeous! The design is great, the photos are magnificent and it makes use of interesting CSS propert...
Collapse
 
markel profile image
Markel F.

Hey, is there any way to make both (the nav bar and the content) clickable and interactive? Because the pointer-events: none makes a menu impossible :(
Anyway, this is a really neat effect, it has given me a lot of ideas for websites!

Collapse
 
mornir profile image
Jérôme Pott

Good question!
You need to add pointer-events: auto to each nav tag. I've updated the final pen.

Collapse
 
andres profile image
Andrés Pérez

Awesome effect, thanks for sharing!

For those of you who might have issues replicating the effect, it looks like pin-t, pin-y, pin-x and the color properties were changed.

You can replace both pin-y and pin-x with just inset-0, and pin-t with top-0.

As for colors, you can find them here tailwindcss.com/docs/customizing-c...

Collapse
 
gabe profile image
Gabe

Really neat effect - may come in handy when making my next portfolio! Thank you for this.

Collapse
 
mornir profile image
Jérôme Pott

I just found out that step 4 is not working properly in Safari 😭
I'll try and figure out the issue. If anybody knows why, please share your solution 🙇‍♂️

Collapse
 
mornir profile image
Jérôme Pott

Silly me! 😅clip-path is still under a prefix in Safari. I've updated the pen and it now works like a charm in Apple's browser. 😋