Create a transparent border through multiple layers with html and css

Question

I received the design below from a design team and am unsure of what the best way is to create the transparent border/margin between the pink add button and the navigation bar.

Navbar design

My html and css are included below, but instead of using a border with a specific colour, I would like the border to be transparent through the Navbars (if that makes sense). My reason for this is that the Navbars and button will be used on different pages with different background colours, so having a fixed border colour is not ideal.

    /* Remove default html margin */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: linear-gradient(147deg, #6c318f, #262262);
}

/* Place the navbar at the bottom of the page, and make it stick */

.navbar {
    background-color: white;
    overflow: hidden;
    position: fixed;
    box-sizing: border-box;
    bottom: 0;
    width: 100%;
}

/* Style the links inside the navigation bar */

.navbar a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    box-sizing: border-box;
    width: 20%;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}

/* Remove inherent hover color for link */

.navbar a.active {
    color: white;
}

/* Bottom navbar icon */

.bottom-nav-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.4;
}

/* Active/Hover bottom navbar icon */

.bottom-nav-icon.active, .bottom-nav-icon:hover {
    opacity: 1;
}

/* Circular button */

.buy-button {
    position: fixed;
    /* fix the button to the bottom centre and show above other elements*/
    right: 0;
    left: 0;
    bottom: 28px;
    margin-right: auto;
    margin-left: auto;
    z-index: 5;
    /* style the button */
    background-color: #ec008c;
    color: white;
    text-align: center;
    display: inline-block;
    width: 56px;
    height: 56px;
    font-size: 16px;
    border-radius: 50%;

    /* create border around button - this is where I am stuck */
    border: 2px solid #262262;
}

        <!DOCTYPE html>
<html>

<head>
    <title>emoyeni</title>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <button class="buy-button">+</button>

    <div class="navbar">
        <a href="#home" class="active float-left">
            <img src="img/baseline-bar-chart-24-px.svg" class="bottom-nav-icon active">
        </a>
        <a href="#news" class="float-left">
            <img src="img/baseline-textsms-24-px.svg" class="bottom-nav-icon">
        </a>
        <a href="#contact" class="float-right">
            <img src="img/baseline-account-balance-wallet-24-px.svg" class="bottom-nav-icon">
        </a>
        <a href="#contact" class="float-right">
            <img src="img/baseline-notifications-24-px.svg" class="bottom-nav-icon">
        </a>
    </div>

</body>

</html>

Couldn't you have a specific color, which you override on specific pages where needed? — guitarzero, Feb 14 '19 at 09:18

score 2 · Answer 1 · answered Feb 14 '19 at 08:26

Just use the transparent value in the border color:

 border: 2px solid transparent;

.navbar {
  background-color: white;
  overflow: hidden;
  position: fixed;
  box-sizing: border-box;
  bottom: 0;
  width: 100%;
}

.buy-button {
  position: fixed;
  /* fix the button to the bottom centre and show above other elements*/
  right: 0;
  left: 0;
  bottom: 28px;
  margin-right: auto;
  margin-left: auto;
  z-index: 5;
  /* style the button */
  background-color: #ec008c;
  color: white;
  text-align: center;
  display: inline-block;
  width: 56px;
  height: 56px;
  font-size: 16px;
  border-radius: 50%;
  /* create border around button - this is where I am stuck */
  border: 2px solid transparent;
}

<button class="buy-button">+</button>

<div class="navbar">
  <a href="#home" class="active float-left">
    <img src="img/baseline-bar-chart-24-px.svg" class="bottom-nav-icon active">
  </a>
  <a href="#news" class="float-left">
    <img src="img/baseline-textsms-24-px.svg" class="bottom-nav-icon">
  </a>
  <a href="#contact" class="float-right">
    <img src="img/baseline-account-balance-wallet-24-px.svg" class="bottom-nav-icon">
  </a>
  <a href="#contact" class="float-right">
    <img src="img/baseline-notifications-24-px.svg" class="bottom-nav-icon">
  </a>
</div>

I tried this but the problem is that a transparent border is not transparent through the white Navbar behind the button - so the gap between the Navbar and floating button is not visible like it is in the design. — Marcus Bornman, Feb 14 '19 at 08:36
Your code doesn't work well, can you please provide a code with the icons in the correct place? If you can, we'll help you overcome this problem as well... — Itay Gal, Feb 14 '19 at 09:31

madalinivascu · Answer 2 · 2019-02-14T09:06:32.793

You can use a radial background similar to this or a transparent image:

.navbar {
  background:radial-gradient(circle at top, transparent 34px,#fff 34px,#fff 33px);
  overflow: hidden;
  position: fixed;
  box-sizing: border-box;
  bottom:0;
  height:60px;
  width: 100%;
}

.buy-button {
  position: fixed;
  /* fix the button to the bottom centre and show above other elements*/
  left: calc(50% - 20px);
  bottom: 30px;
  margin-right: auto;
  margin-left: auto;
  z-index: 5;
  /* style the button */
  background-color: #ec008c;
  color: white;
  text-align: center;
  display: inline-block;
  width: 56px;
  height: 56px;
  font-size: 16px;
  border-radius: 50%;
  /* create border around button - this is where I am stuck */
  border: 2px solid transparent;
}
img {
height:30px;
width:auto;
} 
body {
background:url(https://images.unsplash.com/photo-1520987623799-101883d6585a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=614&q=80) no-repeat center top;
}

<button class="buy-button">+</button>

<div class="navbar">
  <a href="#home" class="active float-left">
    <img src="https://cdn3.iconfinder.com/data/icons/human-resources-management/512/business_man_office_male-512.png" class="bottom-nav-icon active">
  </a>
  <a href="#news" class="float-left">
    <img src="https://cdn3.iconfinder.com/data/icons/human-resources-management/512/business_man_office_male-512.png" class="bottom-nav-icon">
  </a>
  <a href="#contact" class="float-right">
    <img src="https://cdn3.iconfinder.com/data/icons/human-resources-management/512/business_man_office_male-512.png" class="bottom-nav-icon">
  </a>
  <a href="#contact" class="float-right">
    <img src="https://cdn3.iconfinder.com/data/icons/human-resources-management/512/business_man_office_male-512.png" class="bottom-nav-icon">
  </a>
</div>

Create a transparent border through multiple layers with html and css

2 Answers2