Create a Stage!

No JS. Uses Flexbox.

by Andrew Holloway

HTML

<!-- Create a Stage and present it using CSS, Flex, and no JS -->
<div class="stage">
  <div class="lighting"></div>
  <div class="flap-left curtain-flap "></div>
  <div class="flap-left curtain-flap"></div>
  <div class="flap-left curtain-flap "></div>
  <div class="flap-left curtain-flap"></div>
  <div class="flap-left curtain-flap "></div>
  <div class="flap-right curtain-flap "></div>
  <div class="flap-right curtain-flap "></div>
  <div class="flap-right curtain-flap "></div>
  <div class="flap-right curtain-flap "></div>
  <div class="flap-right curtain-flap "></div>
  <div class="scene">
    <div class="container">Showtime</div>
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="flap-right curtain-flap "></div>
  <div class="flap-right curtain-flap"></div>
  <div class="flap-right curtain-flap "></div>
  <div class="flap-right curtain-flap"></div>
  <div class="flap-right curtain-flap "></div>
  <div class="flap-right curtain-flap "></div>
  <div class="flap-right curtain-flap "></div>
  <div class="flap-right curtain-flap "></div>
  <div class="flap-right curtain-flap "></div>
  <div class="flap-right curtain-flap "></div>
  <div class="floor">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>

SCSS

.stage {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  border: 1px solid black;
  overflow: hidden;
  background-color: black;
  width: 600px;
  .lighting {
    flex: 1 100%;
    height: 10px;
    background-color: black;
    border-bottom: 1px solid #333;
  }
  .floor {
    flex: 1 100%;
    height: 100px;
    .top {
      height: 30%;
      background-image: linear-gradient(0deg, yellow, orange);
    }
    .bottom {
      height: 70%;
      background-color: black;
      background-image: linear-gradient(180deg, white, #cb8000 3%, #4c2400 15%, black 20%);
    }
  }
  .curtain-flap {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 10px;
    height: 250px;
    background-color: #b00;
    transition: all 2240ms linear;
    transform: skewY(2deg) scale(1.08);
    &:nth-child(even) {
      background-color: #be0000;
      transform: skewY(-2deg) scale(1.08);
    }
  }
  .scene {
    transition: all 2240ms ease-in-out;
    flex-basis: 0px;
    width: 0;
    background-color: black;
    .container {
      width: 1px;
      position: absolute;
      margin: auto;
      font-family: fantasy;
      text-align: center;
      transition: color 1100ms ease-in-out 750ms, width 2240ms ease-in-out;
      color: transparent;
      height: 200px;
      line-height: 200px;
      vertical-align: center;
    }
    .top {
      height: 200px;
      color: transparent;
      background-image: linear-gradient(180deg, black, #2a0000);
    }
    .bottom {
      height: 50px;
      background-image: linear-gradient(0deg, orange, #290000 85%, #2a0000);
    }
  }
  &.opened,
  &:hover {
    .scene {
      flex-basis: 400px;
      .container {
        color: white;
        width: 400px;
      }
    }
    .curtain-flap {
      background-color: #a00;
      transform: skewY(15deg) scale(1.08);
      &:nth-child(even) {
        background-color: #c00;
        transform: skewY(-15deg) scale(1.08);
      }
    }
  }
}