Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version

github.com

Post reply on HN
Print view View original

1–10 of 40 posts

Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version

#1

Post by momciloo »

Two clip-paths, over the navigation:

- The first clip-path is a circle (top-left corner) - The second clip-path is a polygon, that acts like a ray (hardcoded, can be improved)

The original work by Iventions Events https://iventions.com/ uses JavaScript, but I found CSS-only approach more fun

Here's a demo and the codebase: https://github.com/Momciloo/fun-with-clip-path

Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version
github.com

Re: Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version

#3

Post by swyx »

one thing i dislike about "good design" in general is that it usually takes away from information density and practical convenience in order to achieve "good design". this feels like a bad tradeoff. i wish that designers cared about making things more accessible and delightful rather than impressing fellow designers.

Re: Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version

#4

Post by orphea »

swyx wrote: post #3

one thing i dislike about "good design" in general is that it usually takes away from information density and practical convenience in order to achieve "good design". this feels like a bad tradeoff. i wish that designers cared about making things more accessible and delightful rather than impressing fellow designers.

Agree. I opened this iventions website, hated every second being there, closed it.

Re: Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version

#6

Post by division_by_0 »

swyx wrote: post #3

one thing i dislike about "good design" in general is that it usually takes away from information density and practical convenience in order to achieve "good design". this feels like a bad tradeoff. i wish that designers cared about making things more accessible and delightful rather than impressing fellow designers.

Agree. Info-dense designs are also more difficult to implement and many designers lack experience in this area. E.g., creating a coherent design system that uses borders instead of excessive padding to separate elements is much more difficult than it may seem.

Re: Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version

#7

Post by falloutx »

swyx wrote: post #3

one thing i dislike about "good design" in general is that it usually takes away from information density and practical convenience in order to achieve "good design". this feels like a bad tradeoff. i wish that designers cared about making things more accessible and delightful rather than impressing fellow designers.

Its not about information but about directing the user in this case. Not everything has to be information dense or even convenient. Sometimes you want users to scroll or make them click step buttons. (checkout is sometimes made to have more steps to give users time to adjust to pain of paying)

Re: Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version

#8

Post by uxcolumbo »

Neat experiment, but this is not good design.

Design is about solving problems.

A menu is suppose to help you to quickly find and get to a specific section of your site.

Why do I have to click on a thing to reveal the menu even though on my laptop there is enough space to show it all? And then I have to move my mouse all to the other side of the screen?

Who is this for?

Nothing wrong with experimenting with CSS, but avoid ‘dribbblizing’ your designs if you intend to ship it to users who use your site for information or to get a job done.

Edit: commenting more on the iventions.com website where this effect is in use.

Re: Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version

#9

Post by hippo22 »

uxcolumbo wrote: post #8

Neat experiment, but this is not good design. Design is about solving problems. A menu is suppose to help you to quickly find and get to a specific section of your site. Why do I have to click on a thing to reveal the menu even though on my laptop there is enough space to show it all? And then I have to move my mouse all to the other side of the screen? Who is this for? Nothing wrong with experimenting with CSS, but…

“I have a cool idea in my head that I’d like to show other people” is a problem that some people need to solve.
Post reply on HN