Scooped Selector | CSS-only cut-out tab navigation | @keyframers 1.16.0

index.html

<input type="radio" name="choice" id="nav-1" checked>
<input type="radio" name="choice" id="nav-2">
<input type="radio" name="choice" id="nav-3">

<div id="app">
  <nav class="ui-nav">
    <div class="ui-bg">
      <div class="ui-cutout"></div>
      <div class="ui-dot"></div>
    </div>
    <label for="nav-1" class="ui-label">
      <span class="ui-icon">
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>newspaper</title>
<path d="M28 8v-4h-28v22c0 1.105 0.895 2 2 2h27c1.657 0 3-1.343 3-3v-17h-4zM26 26h-24v-20h24v20zM4 10h20v2h-20zM16 14h8v2h-8zM16 18h8v2h-8zM16 22h6v2h-6zM4 14h10v10h-10z"></path>
</svg>
</span>
    </label>
    <label for="nav-2" class="ui-label">
      <span class="ui-icon">
        
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>folder-plus</title>
<path d="M18 8l-4-4h-14v26h32v-22h-14zM22 22h-4v4h-4v-4h-4v-4h4v-4h4v4h4v4z"></path>
</svg>
        
      </span>
    </label>
    <label for="nav-3" class="ui-label">
      <span class="ui-icon">
        
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>office</title>
<path d="M0 32h16v-32h-16v32zM10 4h4v4h-4v-4zM10 12h4v4h-4v-4zM10 20h4v4h-4v-4zM2 4h4v4h-4v-4zM2 12h4v4h-4v-4zM2 20h4v4h-4v-4zM18 10h14v2h-14zM18 32h4v-8h6v8h4v-18h-14z"></path>
</svg>
        
      </span>
    </label>
  </nav>
  
  <div class="ui-pages">
    <article class="ui-page" data-page="1">Page 1</article>
    <article class="ui-page" data-page="2">Page 2</article>
    <article class="ui-page" data-page="3">Page 3</article>
  </div>
</div>

scooped-selector-css-only-cut-out-tab-navigation-keyframers-1-16-0.markdown

Scooped Selector | CSS-only cut-out tab navigation | @keyframers 1.16.0

David Khourshid and Stephen Shaw scoop out a section of a navigation while building a CSS-only tab navigation. Challenged by @josephrexme, the @keyframers rose to the occasion and amazed thousands with their astounding abilities... Or at least managed to make a decent approximation of the animation with only CSS.

• ⏰ Streamed live on July 23, 2018 at https://twitch.tv/keyframers
• 💡 Inspiration: https://dribbble.com/shots/4844696-Tab-bar-interaction-with-animated-icons
• 📺 Video: https://youtu.be/McrMC3SXhUU
• 💻 Code: https://cdpn.io/pen/djWOwz

Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!

• Like & Subscribe on YouTube
• Follow & Tweet us at twitter.com/keyframers.
• Join the live streams & Subscribe on Twitch http://twitch.tv/keyframers
• Support us on Patreon at https://patreon.com/keyframers

A Pen by @keyframers on CodePen.

License.

style.scss

/* ---------------------------------- */

*, *:before, *:after {
  position: relative;
  box-sizing: border-box;
  transition: all .3s cubic-bezier(.5, 0, .5, 1);
}

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #C9D2DE;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------------------------------- */


#app {
  height: 87vh;
  width: 46vh;
  transform: scale(0.8);
  border-radius: 2rem;
  background-color: #BEC9D6; //#fff;
  box-shadow: 0px 2vh 10vh rgba(0,0,0,.3);
  overflow: hidden;
  border: 1vh solid #F0F0F0;
}

.ui-nav {
  overflow: hidden;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  height: 10vh;
  display: flex;
  align-items: stretch;
  text-align: center;
  border-radius: .75rem .75rem 1.25rem 1.25rem;
  z-index: 3;
}

$cutout-size: 9vh;

.ui-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .ui-dot {
    $size: $cutout-size;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: #F0F0F0;
    border-top: solid 2px #FFF;
    position: absolute;
    left: calc((33.3333% - #{$size}) / 2);
    top: 0%;
    z-index: 2;
    transform: scale(.85);
    box-shadow: 0px 0.5vh 1vh rgba(0,0,0,.3);
  }

  > .ui-cutout {
    $size: $cutout-size;
    width: $size;
    height: $size;
    left: calc((33.3333% - #{$size}) / 2);
    z-index: 3;
    border-radius: 50%;
    box-shadow:
      $size / 2 $size / 2 0 #F0F0F0,
      -$size / 2 $size / 2 0 #F0F0F0,
      0 $size 0 #F0F0F0;

    &:before, &:after {
      content: '';
      position: absolute;
      width: 400%;
      height: 130%;
      background-color: #fff;
      top: 30%;
      background: #F0F0F0;
      border-top: solid 2px #FFF;
    }

    &:before {
      right: 100%;
      border-top-right-radius: 1vh;
    }

    &:after {
      left: 100%;
      border-top-left-radius: 1vh;
    }
  }
}

.ui-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  top: 20%;
  font-size: $cutout-size / 2.5;

  svg { 
    width: 1em; 
    height: 1em; 
    fill: #5B6D7F;
    transition-duration: .2s;
    transition-timing-function: linear;
  }
}

/* ---------------------------------- */

.ui-pages {
  display: flex;
  width: 100%;
  height: 100%;
}

.ui-page {
  width: 100%;
  margin-right: -100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-family: monospace;
  text-shadow: 0 1px 0px rgba(0,0,0,0.3);
}

[data-page="1"] { background-color: #76B471; }
[data-page="2"] { background-color: #BEC9D6; }
[data-page="3"] { background-color: #586B7D; }

/* ---------------------------------- */

input[name="choice"] { 
  position: absolute; 
  top: 0; 
  opacity: 0;
}

#nav-1:checked ~ * label[for="nav-1"],
#nav-2:checked ~ * label[for="nav-2"],
#nav-3:checked ~ * label[for="nav-3"]
{ 
  transform: translateY(-20%);
  svg { fill: #76B371; }
}

[data-page] { 
  opacity: 0; 
  transform: translateX(-100%); 
}

#nav-1:checked ~ * [data-page="1"],
#nav-2:checked ~ * [data-page="2"],
#nav-3:checked ~ * [data-page="3"]
{ 
  opacity: 1; 
  transform: translateX(0%); 

  ~ [data-page] { transform: translateX(100%); }
}

/* ---------------------------------- */

.ui-bg { 
  transform: translateX(calc(var(--x) * 33.3333%)); 
}
@for $i from 1 through 3 {
  #nav-#{$i}:checked ~ #app {
    --x: #{$i - 1};
  }
}

/* ---------------------------------- */