Pure CSS Popping Dashboard

index.haml

.wrapper
  %h1 
    Oh, hey there
  %h2
    Go ahead and click on the blocks to watch 'em pop
  -(1..9).each do |i|
    %input{:id => i,:type => 'checkbox'}
    %label{:for => i}
      %div
        .circle
        %span Click me
      %p Congrats, you managed to click the box! Thanks for checking out this pen. Take a look at some of my other stuff too.
      %a{:href => 'http://codepen.io/jcoulterdesign/'} View my other stuff
 
  

Pure-CSS-Popping-Dashboard.markdown

Pure CSS Popping Dashboard

Some kind of dashboard that pops out when you click on the blocks. Done using pure CSS using labels and checkboxs to trigger the transitions.

A Pen by Jamie Coulter on CodePen.

License.

script.js

/* Nope, not today */

style.scss

/* Fonts */

@import url(http://fonts.googleapis.com/css?family=Oswald);

/* Variables */

$color:white;
$font:'Oswald', sans-serif;

/* Styles */

body{
  font-family:$font;
  background: rgb(219, 242, 247);
  margin:0;
  h1{
    font-weight: normal;
    text-transform:uppercase;
    margin:0;
    color: rgb(86, 86, 86);
  }
  h2{
    font-size:18px;
    font-weight: normal;
    margin:0px 0px 50px 0px;
    color: #A9A9A9;
  }
  .wrapper{
    background:white;
    width:800px;
    padding:50px 0px;
    margin:0 auto;
    overflow:hidden;
    text-align:center;
    position:relative;
    label{
      width:200px;
      height:200px;
      background: rgb(146, 178, 205);
      display:inline-block;
      border-radius:2px;
      margin:10px;
      cursor:pointer;
      span{
        color:white;
        font-size:13px;
        position:relative;
        top:10px;
      }
      p{
        margin:25px;
        color:white;
        display:none;
        position:absolute;
        bottom:10px;
        left:0;
        right:0;
        width:150px;
        margin:0 auto;
        top:25px;
        font-size:10px;
      }
      a{
        display:none;
        color:white;
        position:absolute;
        bottom:10px;
        left:0;
        font-size:10px;
        right:0;
        margin:0 auto;
      }
    }
    input[type='checkbox']{
      display:none;
    }
    input[type='checkbox']:checked + label a,input[type='checkbox']:checked + label p{
      display:block;  
    }
    input[type='checkbox']:checked + label span,input[type='checkbox']:checked + label div{
      visibility:hidden;
    }
    input[type='checkbox']:checked + label{
      left:0;
      transform: scale(3.33);
      z-index:122221;
      transition-duration: 0.1s;
      position:relative;
      transition-property: transform;
      top:0;
      background: rgb(93, 133, 161);
    }
    input[type='checkbox']:not(:checked) + label{
      transform:scale(1);
      transition-duration: 0.1s;
      transition-property: transform;
    }

    /* I don't like this, i will probably replace with a sass loop at some point */

    label:nth-of-type(1) {
      transform-origin: 0% 0%;
    }
    label:nth-of-type(2) {
      transform-origin: 50% 0%;
    }
    label:nth-of-type(3) {
      transform-origin: 100% 0%;
    }
    label:nth-of-type(4) {
      transform-origin: 0% 50%;
    }
    label:nth-of-type(5) {
      transform-origin: 50% 50%;
    }
    label:nth-of-type(6) {
      transform-origin: 100% 50%;
    }
    label:nth-of-type(7) {
      transform-origin: 0% 100%;
    }
    label:nth-of-type(8) {
      transform-origin: 50% 100%;
    }
    label:nth-of-type(9) {
      transform-origin: 100% 100%;
    }
    .circle{
      visibility: visible;
      width:40px;
      height:40px;
      border:3px solid white;
      border-radius:100%;
      opacity:0.3;
      margin:60px auto 0px auto;    
      -webkit-animation: circle 1s infinite; /* Chrome, Safari, Opera */
      animation: circle 1s infinite;
    }
  } 
}

/* Animations */ 

@-webkit-keyframes circle{
  0%{transform:scale(1)}
  50%{transform:scale(1.1)}
  100%{transform:scale(1)}
}