Steps to incorporate the latest Material Design Bottom App Bar into your project

Question

Steps to incorporate the latest Material Design Bottom App Bar into your project

In our company, we are currently utilizing Vue and SCSS for constructing our latest Progressive Web Application. Depending on specific conditions relating to the user's profile, we need to switch out the left drawer with a Bottom App Bar.

Although we are implementing Vue Material, our UX/UI designer has opted to incorporate the most recent version of the Bottom App Bar recently introduced by Google.

Unfortunately, the CSS styles for this particular component have not yet been released and are not included in the VueMaterial components library (which only supports the older version as of now). I am facing challenges in replicating the new bar according to the second version.

Due to restrictions, here is the link to refer to the image visually

I am struggling to comprehend how it would be possible to recreate the inset between the bar and the FAB using just CSS. My attempts involving clip-path and mask-image have not yielded satisfactory outcomes.

If anyone could provide assistance or guidance on this matter, it would be greatly appreciated.

css vue.js sass material-design vue-material

Answer 1

Answer №1

There are several approaches to achieving a transparent cutout with a background image using CSS. Below are three different methods, each with its own pros and cons.

1. Box-shadow on a pseudo element

This method involves using a box-shadow on a pseudo element to create a cutout effect. While it is simple to implement, it does not support rounded corners and lacks flexibility.

body {
  height: 100vh;
  background: url(https://placeimg.com/640/480/nature) center/cover no-repeat;
}

.bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: transparent;
  overflow: hidden;
}

.bar::before {
  content: '';
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1000px;
  width: 64px;
  height: 64px;
  box-shadow: 0px 0px 0px 5000px rebeccapurple;
}

<div class="bar"></div>

2. Loads of clip path points

This approach utilizes the clip-path property with multiple points to create a custom shape cutout. Although it requires more effort to configure, it offers a much better visual effect compared to the box-shadow technique.

body {
  height: 100vh;
  background: url(https://placeimg.com/640/480/nature) center/cover no-repeat;
}

.bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: rebeccapurple;
  clip-path: polygon(0 0, 
    calc(50% - 38px) 0, 
    /* Add more clip-path points for your desired shape */
    0 100%);
}

<div class="bar"></div>

3. SVG clip path

The third method involves using an SVG clip path to define a custom shape cutout. This method allows for creating any shape by modifying the path within the SVG. However, it may require additional scripting for dynamic modifications.

body {
  height: 100vh;
  background: url(https://placeimg.com/640/480/nature) center/cover no-repeat;
}

.bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: rebeccapurple;
  overflow: hidden;
  clip-path: url(#circle);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="circle">
      <path d="M0,64 v-64 h100 a32,32 0,0,0 64,0 h100 v64 z" />
    </clipPath>
  </defs>
</svg>

<div class="bar"></div>

Answer 2

There are several approaches to achieving a transparent cutout with a background image using CSS. Below are three different methods, each with its own pros and cons.

1. Box-shadow on a pseudo element

This method involves using a box-shadow on a pseudo element to create a cutout effect. While it is simple to implement, it does not support rounded corners and lacks flexibility.

body {
  height: 100vh;
  background: url(https://placeimg.com/640/480/nature) center/cover no-repeat;
}

.bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: transparent;
  overflow: hidden;
}

.bar::before {
  content: '';
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1000px;
  width: 64px;
  height: 64px;
  box-shadow: 0px 0px 0px 5000px rebeccapurple;
}

<div class="bar"></div>

2. Loads of clip path points

This approach utilizes the clip-path property with multiple points to create a custom shape cutout. Although it requires more effort to configure, it offers a much better visual effect compared to the box-shadow technique.

body {
  height: 100vh;
  background: url(https://placeimg.com/640/480/nature) center/cover no-repeat;
}

.bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: rebeccapurple;
  clip-path: polygon(0 0, 
    calc(50% - 38px) 0, 
    /* Add more clip-path points for your desired shape */
    0 100%);
}

<div class="bar"></div>

3. SVG clip path

The third method involves using an SVG clip path to define a custom shape cutout. This method allows for creating any shape by modifying the path within the SVG. However, it may require additional scripting for dynamic modifications.

body {
  height: 100vh;
  background: url(https://placeimg.com/640/480/nature) center/cover no-repeat;
}

.bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 56px;
  background: rebeccapurple;
  overflow: hidden;
  clip-path: url(#circle);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="circle">
      <path d="M0,64 v-64 h100 a32,32 0,0,0 64,0 h100 v64 z" />
    </clipPath>
  </defs>
</svg>

<div class="bar"></div>

Answer 3

Answer №2

There are numerous possibilities, but here is a straightforward example:

$size: 45px;

div {
  background: #550000;
  float:left;
}

.bottom {
  height: 45px;
  width: 45px * 2;
}
.left, .right{
  height: 45px * 1.5;
  width: 45px * 2;
}  
.bottom {
  background: #fff;
  border-bottom-left-radius: 45px * 2;
  border-bottom-right-radius: 45px * 2;
}
.top {
  height: 45px*1.28;
  margin-top: 20px;
}
.left {
  border-top-right-radius: 20px;
  margin-top: 10px;
}
.right {
  border-top-left-radius: 20px;
  margin-top: 10px;
}

html:

<div class="left"></div>
<div class="top"><div class="bottom"></div></div>
<div class="right"></div>

Link to the code on CodePen

Answer 4

There are numerous possibilities, but here is a straightforward example:

$size: 45px;

div {
  background: #550000;
  float:left;
}

.bottom {
  height: 45px;
  width: 45px * 2;
}
.left, .right{
  height: 45px * 1.5;
  width: 45px * 2;
}  
.bottom {
  background: #fff;
  border-bottom-left-radius: 45px * 2;
  border-bottom-right-radius: 45px * 2;
}
.top {
  height: 45px*1.28;
  margin-top: 20px;
}
.left {
  border-top-right-radius: 20px;
  margin-top: 10px;
}
.right {
  border-top-left-radius: 20px;
  margin-top: 10px;
}

html:

<div class="left"></div>
<div class="top"><div class="bottom"></div></div>
<div class="right"></div>

Link to the code on CodePen

Steps to incorporate the latest Material Design Bottom App Bar into your project

Answer №1

Answer №2

Similar questions

Is it possible to customize the Menu hover effect in Element Plus and Vue?

Prevent the parent from adjusting to fit the child's content

Can a FontAwesome icon be used as a button in Bootstrap?

Fixing the body tag's margin-top property in Yii2

The image zoom function is malfunctioning when trying to adjust the image position

Simple HTML and CSS tutorial: Creating a vertical menu with a left-popping submenu

What could be causing my inline-block divs to not line up correctly?

What is the best way to implement CSS rules for a hidden submenu?

Shell script for swapping all occurrences of :*; with a comma

What techniques can I use to change multiple sibling elements with CSS when hovering over them?

What is the best way to align an image underneath text?

Ensuring the accuracy of a single field within a form containing multiple fields is made possible through the utilization of

Optimized layout for screen resolutions exceeding 1000 pixels wide

What could be causing this program to continuously add values to the message table whenever the page is refreshed?

How can you assign values to a complex, multi-layered object?

A method using CSS to automatically resize an image in a teaser box as text content increases, ensuring compatibility across various web

Vue.js provides an interesting object that contains observed data

A guide on making Rest Requests with VueJs 2 and Symfony 3

Compatibility of Vue-apexcharts with different versions

What is the best way to display a unique image in a div based on the size of the