Stylish Responsive Lightbox with Pure CSS/CSS3

A pure CSS/CSS3 lightbox component which allows to create a flat styled responsive popup window sliding from the top of the screen using CSS3 transitions and transforms.

How to use it:

Create a form label to open the lightbox.

<label for="lightbox-demo">Launch Lightbox</label>

Create the content for the lightbox with input element which is associated with the form label you just created.

<aside class="lightbox">
  <input type="checkbox" class="state" id="lightbox-demo" />
  <article class="content">
    <header class="header">
      <h3 class="h h3">Lorem Ipsum</h3>
      <label class="button" for="lightbox-demo">&times;</label>
    </header>
    <main class="main">
      <p> Lightbox content goes here</p>
    </main>
    <footer class="footer">
      <button class="button" type="button">Do something</button>
      <label class="button" for="lightbox-demo">Close</label>
    </footer>
  </article>
  <label class="backdrop" for="lightbox-demo"></label>
</aside>

Add the following CSS/CSS3 rules into your document to active the lightbox.

.h { margin-top: 0; }
.state {
  position: absolute;
  top: 0;
  left: -100vw;
}
.state:checked ~ .content {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}
.state:checked ~ .backdrop {
  bottom: 0;
  opacity: 1;
  z-index: 1;
}
.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  padding: 0 20px;
}
.lightbox .content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 2;
  max-width: 500px;
  max-height: 95vh;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  -webkit-transform: translateY(-200%);
  -ms-transform: translateY(-200%);
  transform: translateY(-200%);
  -webkit-transition: 0.3s -webkit-transform ease-in-out;
  transition: 0.3s transform ease-in-out;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.lightbox .header,
.lightbox .footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.lightbox .header .h,
.lightbox .footer .h { margin: 0; }
.lightbox .header .button:not(:first-child),
.lightbox .footer .button:not(:first-child) { margin-left: auto; }
.lightbox .header { padding-bottom: 10px; }
.lightbox .footer { padding-top: 20px; }
.lightbox .main {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow: scroll;
}
.lightbox .backdrop {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 100%;
  left: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.3s opacity ease-in-out;
  transition: 0.3s opacity ease-in-out;
}