0

I have seen the new models of Material Design and I've checked about a new way to make bottoms navbar on devices. That new Navbar has a hole on center when there is a button on, but I have tried to make this using CSS and I got a question. What is the best or the correct way to make this? Can you help me?

Look the navbar with the hole and the button:

enter image description here

enter image description here

I tried to make this using box-shadow, clip-path, SVG images, css masks... But all of my solutions had some limitations.

Another questions are: The button has the transparent effect when put on the navbar? Or the navbar has a clipped part to put de button?

Thanks!

Vinícius Biavatti
  • 456
  • 4
  • 14
  • If you want I put my soluctions, ask me please! I don't what to ask you to make it to me ok? Just give me the correct way.. – Vinícius Biavatti Aug 16 '18 at 16:45
  • Yes, you should **absolutely** post what you've tried, with a picture of what it looks like and a clear explanation of why they're not acceptable. – divibisan Aug 16 '18 at 17:58
  • 1
    Here is a [fiddle](http://jsfiddle.net/Toufic/czpb8u0f/5/) by [Toufic Batache](http://jsfiddle.net/user/Toufic/fiddles/) that should give you a good starting place for what you are after. – benvc Aug 16 '18 at 18:53

1 Answers1

1

I recommend to go for simplicity here, the thing you want to accomplish is a transparent background, so use background. You can create this effect easily with a gradient background. The gradient background allows you to use different colors as a background and use a shape. You can add this background on the foot-bar.

background: radial-gradient(circle at 150px 0, transparent 50px, #fabada 0) 0 0;

I create an example for you here: https://codepen.io/luarmr/pen/ajgabq

For the icon just use border-radius

Raúl Martín
  • 4,471
  • 3
  • 23
  • 42
  • 1
    Excelent! Thanks Raúl. I didn't know how to control the height localtion of gradient. Congratulations to us! – Vinícius Biavatti Aug 16 '18 at 19:34
  • 1
    If you want to get more resolution in the "Hole" just chenge the zero value of the second gradient effect to 51px. Like this: https://codepen.io/vinibiavatti/pen/KBjrVj – Vinícius Biavatti Aug 16 '18 at 19:42