cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <a href="" class="toggle-shiny js-toggleShiny">Toggle Shiny</a>

<div class="element">
  <div class="rowlet"></div>
</div>

<p class="view-collection">&bull; #codevember &bull; <a href="http://codepen.io/collection/nxZbMW/" target="_blank">View Collection</a> &bull;<br />
  <span>Handcrafted with <span class="love">♥</span> from Austin, TX by <a href="http://twitter.com/fleetingftw">James Fleeting</a></span></p>
            
          
!
            
              @use postcss-simple-vars;
@use postcss-media-minmax;
@use postcss-nested;

$block: 25px;
$tan: #e5c6a8;
$tan_dark: #c1a387;
$white: #f2f5ed;
$green: #069f5e;
$green_dark: #067d4a;
$orange: #ea9e55;
$orange_dark: #c07832;
$black: #120000;
$gray: #959999;
$shiny_green: #82c8ac;
$shiny_green_dark: #66a28e;
$shiny_red: #de403c;
$shiny_red_dark: #b42b28;
$shiny_blue: #24a0a5;
$shiny_blue_dark: #0c7b8a;
$bp: 500px;

.element {
  flex: 0 0 auto;
  width: 300px;
  height: 350px;
  overflow: hidden;
  
  @media screen and (height <= $bp) {
    margin: 25px auto;
  }
}

.rowlet {
  position: relative;
  height: $block;
  width: $block;
  transition: all 1.2s;
  box-shadow:
    calc($block * 2) 0 $tan,
    calc($block * 3) 0 $tan,
    calc($block * 4) 0 $tan,
    calc($block * 5) 0 $tan,
    calc($block * 6) 0 $tan,
    calc($block * 7) 0 $tan,
    calc($block * 8) 0 $tan,
    calc($block * 9) 0 $tan,
    
    $block $block $tan,
    calc($block * 2) $block $tan,
    calc($block * 3) $block $tan,
    calc($block * 4) $block $tan,
    calc($block * 5) $block $tan,
    calc($block * 6) $block $tan,
    calc($block * 7) $block $tan,
    calc($block * 8) $block $tan,
    calc($block * 9) $block $tan,
    calc($block * 10) $block $tan,
    
    0 calc($block * 2) $tan,
    $block calc($block * 2) $tan,
    calc($block * 2) calc($block * 2) $white,
    calc($block * 3) calc($block * 2) $white,
    calc($block * 4) calc($block * 2) $white,
    calc($block * 5) calc($block * 2) $tan,
    calc($block * 6) calc($block * 2) $tan,
    calc($block * 7) calc($block * 2) $white,
    calc($block * 8) calc($block * 2) $white,
    calc($block * 9) calc($block * 2) $white,
    calc($block * 10) calc($block * 2) $tan,
    calc($block * 11) calc($block * 2) $tan,
    
    0 calc($block * 3) $tan,
    $block calc($block * 3) $white,
    calc($block * 2) calc($block * 3) $white,
    calc($block * 3) calc($block * 3) $white,
    calc($block * 4) calc($block * 3) $white,
    calc($block * 5) calc($block * 3) $white,
    calc($block * 6) calc($block * 3) $white,
    calc($block * 7) calc($block * 3) $white,
    calc($block * 8) calc($block * 3) $white,
    calc($block * 9) calc($block * 3) $white,
    calc($block * 10) calc($block * 3) $white,
    calc($block * 11) calc($block * 3) $tan,
    
    0 calc($block * 4) $tan,
    $block calc($block * 4) $white,
    calc($block * 2) calc($block * 4) $white,
    calc($block * 3) calc($block * 4) $gray,
    calc($block * 4) calc($block * 4) $white,
    calc($block * 5) calc($block * 4) $white,
    calc($block * 6) calc($block * 4) $white,
    calc($block * 7) calc($block * 4) $white,
    calc($block * 8) calc($block * 4) $gray,
    calc($block * 9) calc($block * 4) $white,
    calc($block * 10) calc($block * 4) $white,
    calc($block * 11) calc($block * 4) $tan,
    
    0 calc($block * 5) $tan,
    $block calc($block * 5) $white,
    calc($block * 2) calc($block * 5) $white,
    calc($block * 3) calc($block * 5) $black,
    calc($block * 4) calc($block * 5) $white,
    calc($block * 5) calc($block * 5) $white,
    calc($block * 6) calc($block * 5) $white,
    calc($block * 7) calc($block * 5) $white,
    calc($block * 8) calc($block * 5) $black,
    calc($block * 9) calc($block * 5) $white,
    calc($block * 10) calc($block * 5) $white,
    calc($block * 11) calc($block * 5) $tan,
    
    0 calc($block * 6) $tan,
    $block calc($block * 6) $white,
    calc($block * 2) calc($block * 6) $white,
    calc($block * 3) calc($block * 6) $black,
    calc($block * 4) calc($block * 6) $white,
    calc($block * 5) calc($block * 6) $white,
    calc($block * 6) calc($block * 6) $white,
    calc($block * 7) calc($block * 6) $white,
    calc($block * 8) calc($block * 6) $black,
    calc($block * 9) calc($block * 6) $white,
    calc($block * 10) calc($block * 6) $white,
    calc($block * 11) calc($block * 6) $tan,
    
    0 calc($block * 7) $tan,
    $block calc($block * 7) $tan,
    calc($block * 2) calc($block * 7) $white,
    calc($block * 3) calc($block * 7) $white,
    calc($block * 4) calc($block * 7) $white,
    calc($block * 5) calc($block * 7) $orange,
    calc($block * 6) calc($block * 7) $orange,
    calc($block * 7) calc($block * 7) $white,
    calc($block * 8) calc($block * 7) $white,
    calc($block * 9) calc($block * 7) $white,
    calc($block * 10) calc($block * 7) $tan,
    calc($block * 11) calc($block * 7) $tan,
    
    0 calc($block * 8) $tan,
    $block calc($block * 8) $tan,
    calc($block * 2) calc($block * 8) $tan,
    calc($block * 3) calc($block * 8) $tan,
    calc($block * 4) calc($block * 8) $tan,
    calc($block * 5) calc($block * 8) $tan,
    calc($block * 6) calc($block * 8) $tan,
    calc($block * 7) calc($block * 8) $tan,
    calc($block * 8) calc($block * 8) $tan,
    calc($block * 9) calc($block * 8) $tan,
    calc($block * 10) calc($block * 8) $tan,
    calc($block * 11) calc($block * 8) $tan,
    
    0 calc($block * 9) $tan_dark,
    $block calc($block * 9) $tan,
    calc($block * 2) calc($block * 9) $tan,
    calc($block * 3) calc($block * 9) $green,
    calc($block * 4) calc($block * 9) $green,
    calc($block * 5) calc($block * 9) $green,
    calc($block * 6) calc($block * 9) $green,
    calc($block * 7) calc($block * 9) $green,
    calc($block * 8) calc($block * 9) $green,
    calc($block * 9) calc($block * 9) $tan,
    calc($block * 10) calc($block * 9) $tan,
    calc($block * 11) calc($block * 9) $tan_dark,
    
    0 calc($block * 10) $tan_dark,
    $block calc($block * 10) $tan_dark,
    calc($block * 2) calc($block * 10) $green,
    calc($block * 3) calc($block * 10) $green_dark,
    calc($block * 4) calc($block * 10) $green_dark,
    calc($block * 5) calc($block * 10) $white,
    calc($block * 6) calc($block * 10) $white,
    calc($block * 7) calc($block * 10) $green_dark,
    calc($block * 8) calc($block * 10) $green_dark,
    calc($block * 9) calc($block * 10) $green,
    calc($block * 10) calc($block * 10) $tan_dark,
    calc($block * 11) calc($block * 10) $tan_dark,
    
    $block calc($block * 11) $tan_dark,
    calc($block * 2) calc($block * 11) $tan_dark,
    calc($block * 3) calc($block * 11) $white,
    calc($block * 4) calc($block * 11) $white,
    calc($block * 5) calc($block * 11) $white,
    calc($block * 6) calc($block * 11) $white,
    calc($block * 7) calc($block * 11) $white,
    calc($block * 8) calc($block * 11) $white,
    calc($block * 9) calc($block * 11) $tan_dark,
    calc($block * 10) calc($block * 11) $tan_dark,
    
    calc($block * 2) calc($block * 12) $tan_dark,
    calc($block * 3) calc($block * 12) $white,
    calc($block * 4) calc($block * 12) $white,
    calc($block * 5) calc($block * 12) $white,
    calc($block * 6) calc($block * 12) $white,
    calc($block * 7) calc($block * 12) $white,
    calc($block * 8) calc($block * 12) $white,
    calc($block * 9) calc($block * 12) $tan_dark,
    
    0 calc($block * 13) $orange,
    $block calc($block * 13) $orange_dark,
    calc($block * 2) calc($block * 13) $orange,
    calc($block * 3) calc($block * 13) $orange_dark,
    calc($block * 4) calc($block * 13) $white,
    calc($block * 5) calc($block * 13) $white,
    calc($block * 6) calc($block * 13) $white,
    calc($block * 7) calc($block * 13) $white,
    calc($block * 8) calc($block * 13) $orange_dark,
    calc($block * 9) calc($block * 13) $orange,
    calc($block * 10) calc($block * 13) $orange_dark,
    calc($block * 11) calc($block * 13) $orange;
}

.shiny .rowlet {
  box-shadow:
    calc($block * 2) 0 $shiny_green,
    calc($block * 3) 0 $shiny_green,
    calc($block * 4) 0 $shiny_green,
    calc($block * 5) 0 $shiny_green,
    calc($block * 6) 0 $shiny_green,
    calc($block * 7) 0 $shiny_green,
    calc($block * 8) 0 $shiny_green,
    calc($block * 9) 0 $shiny_green,
    
    $block $block $shiny_green,
    calc($block * 2) $block $shiny_green,
    calc($block * 3) $block $shiny_green,
    calc($block * 4) $block $shiny_green,
    calc($block * 5) $block $shiny_green,
    calc($block * 6) $block $shiny_green,
    calc($block * 7) $block $shiny_green,
    calc($block * 8) $block $shiny_green,
    calc($block * 9) $block $shiny_green,
    calc($block * 10) $block $shiny_green,
    
    0 calc($block * 2) $shiny_green,
    $block calc($block * 2) $shiny_green,
    calc($block * 2) calc($block * 2) $white,
    calc($block * 3) calc($block * 2) $white,
    calc($block * 4) calc($block * 2) $white,
    calc($block * 5) calc($block * 2) $shiny_green,
    calc($block * 6) calc($block * 2) $shiny_green,
    calc($block * 7) calc($block * 2) $white,
    calc($block * 8) calc($block * 2) $white,
    calc($block * 9) calc($block * 2) $white,
    calc($block * 10) calc($block * 2) $shiny_green,
    calc($block * 11) calc($block * 2) $shiny_green,
    
    0 calc($block * 3) $shiny_green,
    $block calc($block * 3) $white,
    calc($block * 2) calc($block * 3) $white,
    calc($block * 3) calc($block * 3) $white,
    calc($block * 4) calc($block * 3) $white,
    calc($block * 5) calc($block * 3) $white,
    calc($block * 6) calc($block * 3) $white,
    calc($block * 7) calc($block * 3) $white,
    calc($block * 8) calc($block * 3) $white,
    calc($block * 9) calc($block * 3) $white,
    calc($block * 10) calc($block * 3) $white,
    calc($block * 11) calc($block * 3) $shiny_green,
    
    0 calc($block * 4) $shiny_green,
    $block calc($block * 4) $white,
    calc($block * 2) calc($block * 4) $white,
    calc($block * 3) calc($block * 4) $gray,
    calc($block * 4) calc($block * 4) $white,
    calc($block * 5) calc($block * 4) $white,
    calc($block * 6) calc($block * 4) $white,
    calc($block * 7) calc($block * 4) $white,
    calc($block * 8) calc($block * 4) $gray,
    calc($block * 9) calc($block * 4) $white,
    calc($block * 10) calc($block * 4) $white,
    calc($block * 11) calc($block * 4) $shiny_green,
    
    0 calc($block * 5) $shiny_green,
    $block calc($block * 5) $white,
    calc($block * 2) calc($block * 5) $white,
    calc($block * 3) calc($block * 5) $black,
    calc($block * 4) calc($block * 5) $white,
    calc($block * 5) calc($block * 5) $white,
    calc($block * 6) calc($block * 5) $white,
    calc($block * 7) calc($block * 5) $white,
    calc($block * 8) calc($block * 5) $black,
    calc($block * 9) calc($block * 5) $white,
    calc($block * 10) calc($block * 5) $white,
    calc($block * 11) calc($block * 5) $shiny_green,
    
    0 calc($block * 6) $shiny_green,
    $block calc($block * 6) $white,
    calc($block * 2) calc($block * 6) $white,
    calc($block * 3) calc($block * 6) $black,
    calc($block * 4) calc($block * 6) $white,
    calc($block * 5) calc($block * 6) $white,
    calc($block * 6) calc($block * 6) $white,
    calc($block * 7) calc($block * 6) $white,
    calc($block * 8) calc($block * 6) $black,
    calc($block * 9) calc($block * 6) $white,
    calc($block * 10) calc($block * 6) $white,
    calc($block * 11) calc($block * 6) $shiny_green,
    
    0 calc($block * 7) $shiny_green,
    $block calc($block * 7) $shiny_green,
    calc($block * 2) calc($block * 7) $white,
    calc($block * 3) calc($block * 7) $white,
    calc($block * 4) calc($block * 7) $white,
    calc($block * 5) calc($block * 7) $shiny_red,
    calc($block * 6) calc($block * 7) $shiny_red,
    calc($block * 7) calc($block * 7) $white,
    calc($block * 8) calc($block * 7) $white,
    calc($block * 9) calc($block * 7) $white,
    calc($block * 10) calc($block * 7) $shiny_green,
    calc($block * 11) calc($block * 7) $shiny_green,
    
    0 calc($block * 8) $shiny_green,
    $block calc($block * 8) $shiny_green,
    calc($block * 2) calc($block * 8) $shiny_green,
    calc($block * 3) calc($block * 8) $shiny_green,
    calc($block * 4) calc($block * 8) $shiny_green,
    calc($block * 5) calc($block * 8) $shiny_green,
    calc($block * 6) calc($block * 8) $shiny_green,
    calc($block * 7) calc($block * 8) $shiny_green,
    calc($block * 8) calc($block * 8) $shiny_green,
    calc($block * 9) calc($block * 8) $shiny_green,
    calc($block * 10) calc($block * 8) $shiny_green,
    calc($block * 11) calc($block * 8) $shiny_green,
    
    0 calc($block * 9) $shiny_green_dark,
    $block calc($block * 9) $shiny_green,
    calc($block * 2) calc($block * 9) $shiny_green,
    calc($block * 3) calc($block * 9) $shiny_blue,
    calc($block * 4) calc($block * 9) $shiny_blue,
    calc($block * 5) calc($block * 9) $shiny_blue,
    calc($block * 6) calc($block * 9) $shiny_blue,
    calc($block * 7) calc($block * 9) $shiny_blue,
    calc($block * 8) calc($block * 9) $shiny_blue,
    calc($block * 9) calc($block * 9) $shiny_green,
    calc($block * 10) calc($block * 9) $shiny_green,
    calc($block * 11) calc($block * 9) $shiny_green_dark,
    
    0 calc($block * 10) $shiny_green_dark,
    $block calc($block * 10) $shiny_green_dark,
    calc($block * 2) calc($block * 10) $shiny_blue,
    calc($block * 3) calc($block * 10) $shiny_blue_dark,
    calc($block * 4) calc($block * 10) $shiny_blue_dark,
    calc($block * 5) calc($block * 10) $white,
    calc($block * 6) calc($block * 10) $white,
    calc($block * 7) calc($block * 10) $shiny_blue_dark,
    calc($block * 8) calc($block * 10) $shiny_blue_dark,
    calc($block * 9) calc($block * 10) $shiny_blue,
    calc($block * 10) calc($block * 10) $shiny_green_dark,
    calc($block * 11) calc($block * 10) $shiny_green_dark,
    
    $block calc($block * 11) $shiny_green_dark,
    calc($block * 2) calc($block * 11) $shiny_green_dark,
    calc($block * 3) calc($block * 11) $white,
    calc($block * 4) calc($block * 11) $white,
    calc($block * 5) calc($block * 11) $white,
    calc($block * 6) calc($block * 11) $white,
    calc($block * 7) calc($block * 11) $white,
    calc($block * 8) calc($block * 11) $white,
    calc($block * 9) calc($block * 11) $shiny_green_dark,
    calc($block * 10) calc($block * 11) $shiny_green_dark,
    
    calc($block * 2) calc($block * 12) $shiny_green_dark,
    calc($block * 3) calc($block * 12) $white,
    calc($block * 4) calc($block * 12) $white,
    calc($block * 5) calc($block * 12) $white,
    calc($block * 6) calc($block * 12) $white,
    calc($block * 7) calc($block * 12) $white,
    calc($block * 8) calc($block * 12) $white,
    calc($block * 9) calc($block * 12) $shiny_green_dark,
    
    0 calc($block * 13) $shiny_red,
    $block calc($block * 13) $shiny_red_dark,
    calc($block * 2) calc($block * 13) $shiny_red,
    calc($block * 3) calc($block * 13) $shiny_red_dark,
    calc($block * 4) calc($block * 13) $white,
    calc($block * 5) calc($block * 13) $white,
    calc($block * 6) calc($block * 13) $white,
    calc($block * 7) calc($block * 13) $white,
    calc($block * 8) calc($block * 13) $shiny_red_dark,
    calc($block * 9) calc($block * 13) $shiny_red,
    calc($block * 10) calc($block * 13) $shiny_red_dark,
    calc($block * 11) calc($block * 13) $shiny_red;
}

a.toggle-shiny {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 14px 45px;
  color: $white;
  text-decoration: none;
  transition: all 0.4s;
  background: $tan_dark;
  
  &:hover {
    top: 17px;
    color: $white;
    background: $green;
  }
}

.shiny a.toggle-shiny {
  &:hover {
    top: 17px;
    color: $white;
    background: $shiny_blue;
  }
}

html, body {
  height: 100%;
  
  @media screen and (height <= $bp) {
    height: auto;
  }
}

body {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center; 
  background: $green_dark;
  transition: all 1.3s;
  
  @media screen and (height <= $bp) {
    display: block;
  }
  
  &.shiny {
    background: $shiny_blue_dark;
  }
}

.view-collection {
  flex: 0 0 auto;
  margin: 40px 0 0;
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  
  @media screen and (height <= $bp) {
    margin: 25px auto;
  }
  
  span {
    font-size: 13px;
  }
  
  .love {
    color: #cc0000;
  }
  
  a {
    color: $orange;
    text-decoration: none;
    transition: all 0.7s;
    
    &:hover, &:focus {
      color: $orange_dark;
    }
  }
}

            
          
!
            
              let toggleShiny = document.querySelector('.js-toggleShiny');
let pokemon = document.querySelector('body');

if(toggleShiny) {    
  toggleShiny.addEventListener('click', function(event) {
    event.preventDefault();
    
    pokemon.classList.toggle('shiny');
  });
};
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console