Pure CSS panels

index.html

<!-- Home Panel  -->
<div class="panel" id="home">
    <div id="particles"></div>

    <h1>Pure CSS panels</h1> 
    <p>by Mattia Astorino</p>
</div>


<div class="panel" id="slice">
    <div class="panel-content">
        <a href="#home">
            Close me.
        </a>
    </div>
</div>


<div class="panel" id="fade">
    <div class="panel-content">
        <a href="#home">Close me.</a>
    </div>
</div>

<!-- Navigation -->
<div class="menu">
  <a class="menu__link" href="#slice" data-hover="Slice">Slice</a>
  <a class="menu__link" href="#fade" data-hover="Fade">Fade</a> 
</div>

pure-css-panels.markdown

Pure CSS panels

This is an example of onepage panels navigation made with only CSS.

A Pen by Mattia Astorino on CodePen.

License.

style.less

/* basic style definition */
/* •••••••••••••••••••••••••••••••• */

body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Roboto Slab', serif; }


h1 {
margin: 0;
user-select: none;
text-align: center;
font-weight: 300; }


p, {
font-weight: 300;
color: #546E7A;
user-select: none;
text-align: center;
margin: 0; }


a { 
text-align: center;
text-decoration: none;
color: #FFF; }

/* Navigation menu */
/* •••••••••••••••••••••••••••••••• */

.menu {
position: fixed;
width: 100vw;
pointer-events: none;
margin-top: 10vh;
text-align: center;
z-index: 2; }

/* Menu link item */
.menu__link {
display: inline-block;
text-decoration: none;
border: 2px solid #263238;
color: #263238; 
pointer-events: auto;
line-height: 40px; 
position: relative;
padding: 0 50px; 
box-sizing: border-box;
margin: 0;
user-select: none;
overflow: hidden;
border-radius: 50px;

  &:before {
  content: attr(data-hover);
  background-color: #263238; 
  color: #FFF;
  position: absolute;
  top: 100%;
  bottom: 0;
  left: 0;
  transition: all 300ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
  right: 0; }
  

  &:hover:before {
  top: 0; }
}

/* Panels Style*/
/* •••••••••••••••••••••••••••••••• */

/* Common panel style */
.panel {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
z-index: 999;
color: #000;
box-sizing: border-box;
background-color: #ECEFF1; }


/* panel content (only for animation delay after open) */
.panel-content {
opacity: 0;
will-change: margin-top;
transition: all 700ms; 
transition-delay: 600ms;
padding: 100px 200px;
margin-top: -5%; }

/* Panel content animation after open */
.panel:target .panel-content {
opacity: 1;
margin-top: 0; }


/*  Specific "Home "panel */
/* •••••••••••••••••••••••••••••••• */

.panel#home {
z-index: 1;
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,#CFD8DC 100%);
  
  /* Particle.js demo */
  canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block; }

}


/*  Specific panel "Slice" */
/* •••••••••••••••••••••••••••••••• */

.panel#slice {
background-color: #E53935;
transition: all 800ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
transform: translate3d( 0, -100%, 0 ); }

.panel#slice:target {
transform: translate3d( 0, 0, 0 ); }

/*  Specific panel "Fade" effect */
/* •••••••••••••••••••••••••••••••• */

.panel#fade {
background-color: #00C853;
opacity: 0;
transition: all 800ms;
pointer-events: none; }

.panel#fade:target {
opacity: 1;
pointer-events: auto; }


/* Sample Particle background */
/* •••••••••••••••••••••••••••••••• */

#particles {
opacity: 0.6; }