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="litten"></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;
$black: #1c1b1a;
$gray: #343231;
$gray_light: #bdbfc0;
$red: #db4c4f;
$red_dark: #a52b2e;
$red_light: #d72a2d;
$yellow: #fdc738;
$shiny: #fff;
$bp: 500px;

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

.litten {
  position: relative;
  height: $block;
  width: $block;
  transition: all 1.2s;
  box-shadow:
    calc($block * 2) 0 $gray,
    calc($block * 10) 0 $gray,
    
    $block $block $gray,
    calc($block * 2) $block $gray_light,
    calc($block * 3) $block $gray,
    calc($block * 9) $block $gray,
    calc($block * 10) $block $gray_light,
    calc($block * 11) $block $gray,
    
    $block calc($block * 2) $gray,
    calc($block * 2) calc($block * 2) $gray_light,
    calc($block * 3) calc($block * 2) $gray_light,
    calc($block * 4) calc($block * 2) $gray,
    calc($block * 5) calc($block * 2) $gray,
    calc($block * 6) calc($block * 2) $gray,
    calc($block * 7) calc($block * 2) $gray,
    calc($block * 8) calc($block * 2) $gray,
    calc($block * 9) calc($block * 2) $gray_light,
    calc($block * 10) calc($block * 2) $gray_light,
    calc($block * 11) calc($block * 2) $gray,
    
    $block calc($block * 3) $gray,
    calc($block * 2) calc($block * 3) $gray_light,
    calc($block * 3) calc($block * 3) $gray,
    calc($block * 4) calc($block * 3) $gray,
    calc($block * 5) calc($block * 3) $gray,
    calc($block * 6) calc($block * 3) $red,
    calc($block * 7) calc($block * 3) $gray,
    calc($block * 8) calc($block * 3) $gray,
    calc($block * 9) calc($block * 3) $gray,
    calc($block * 10) calc($block * 3) $gray_light,
    calc($block * 11) calc($block * 3) $gray,
    
    $block calc($block * 4) $gray,
    calc($block * 2) calc($block * 4) $gray,
    calc($block * 3) calc($block * 4) $gray,
    calc($block * 4) calc($block * 4) $gray,
    calc($block * 5) calc($block * 4) $red,
    calc($block * 6) calc($block * 4) $red,
    calc($block * 7) calc($block * 4) $red,
    calc($block * 8) calc($block * 4) $gray,
    calc($block * 9) calc($block * 4) $gray,
    calc($block * 10) calc($block * 4) $gray,
    calc($block * 11) calc($block * 4) $gray,
    
    $block calc($block * 5) $gray,
    calc($block * 2) calc($block * 5) $gray,
    calc($block * 3) calc($block * 5) $gray,
    calc($block * 4) calc($block * 5) $gray,
    calc($block * 5) calc($block * 5) $gray,
    calc($block * 6) calc($block * 5) $red,
    calc($block * 7) calc($block * 5) $gray,
    calc($block * 8) calc($block * 5) $gray,
    calc($block * 9) calc($block * 5) $gray,
    calc($block * 10) calc($block * 5) $gray,
    calc($block * 11) calc($block * 5) $gray,
    
    $block calc($block * 6) $gray,
    calc($block * 2) calc($block * 6) $gray,
    calc($block * 3) calc($block * 6) $gray,
    calc($block * 4) calc($block * 6) $red,
    calc($block * 5) calc($block * 6) $red,
    calc($block * 6) calc($block * 6) $red,
    calc($block * 7) calc($block * 6) $red,
    calc($block * 8) calc($block * 6) $red,
    calc($block * 9) calc($block * 6) $gray,
    calc($block * 10) calc($block * 6) $gray,
    calc($block * 11) calc($block * 6) $gray,
    
    $block calc($block * 7) $gray,
    calc($block * 2) calc($block * 7) $yellow,
    calc($block * 3) calc($block * 7) $red_dark,
    calc($block * 4) calc($block * 7) $yellow,
    calc($block * 5) calc($block * 7) $gray,
    calc($block * 6) calc($block * 7) $red,
    calc($block * 7) calc($block * 7) $gray,
    calc($block * 8) calc($block * 7) $yellow,
    calc($block * 9) calc($block * 7) $red_dark,
    calc($block * 10) calc($block * 7) $yellow,
    calc($block * 11) calc($block * 7) $gray,
    
    $block calc($block * 8) $gray,
    calc($block * 2) calc($block * 8) $yellow,
    calc($block * 3) calc($block * 8) $red_light,
    calc($block * 4) calc($block * 8) $yellow,
    calc($block * 5) calc($block * 8) $gray,
    calc($block * 6) calc($block * 8) $gray,
    calc($block * 7) calc($block * 8) $gray,
    calc($block * 8) calc($block * 8) $yellow,
    calc($block * 9) calc($block * 8) $red_light,
    calc($block * 10) calc($block * 8) $yellow,
    calc($block * 11) calc($block * 8) $gray,
    
    $block calc($block * 9) $gray,
    calc($block * 2) calc($block * 9) $red,
    calc($block * 3) calc($block * 9) $red,
    calc($block * 4) calc($block * 9) $red,
    calc($block * 5) calc($block * 9) $red,
    calc($block * 6) calc($block * 9) $gray,
    calc($block * 7) calc($block * 9) $red,
    calc($block * 8) calc($block * 9) $red,
    calc($block * 9) calc($block * 9) $red,
    calc($block * 10) calc($block * 9) $red,
    calc($block * 11) calc($block * 9) $gray,
    
    0 calc($block * 10) $red_dark,
    $block calc($block * 10) $red,
    calc($block * 2) calc($block * 10) $red_dark,
    calc($block * 4) calc($block * 10) $red,
    calc($block * 3) calc($block * 10) $red,
    calc($block * 5) calc($block * 10) $red,
    calc($block * 6) calc($block * 10) $red,
    calc($block * 7) calc($block * 10) $red,
    calc($block * 8) calc($block * 10) $red,
    calc($block * 9) calc($block * 10) $red,
    calc($block * 10) calc($block * 10) $red_dark,
    calc($block * 11) calc($block * 10) $red,
    calc($block * 12) calc($block * 10) $red_dark,
    
    $block calc($block * 11) $red_dark,
    calc($block * 3) calc($block * 11) $gray,
    calc($block * 4) calc($block * 11) $gray,
    calc($block * 5) calc($block * 11) $gray,
    calc($block * 6) calc($block * 11) $gray,
    calc($block * 7) calc($block * 11) $gray,
    calc($block * 8) calc($block * 11) $gray,
    calc($block * 9) calc($block * 11) $gray,
    calc($block * 11) calc($block * 11) $red_dark,
    
    calc($block * 3) calc($block * 12) $red,
    calc($block * 4) calc($block * 12) $red_dark,
    calc($block * 5) calc($block * 12) $gray,
    calc($block * 6) calc($block * 12) $gray,
    calc($block * 7) calc($block * 12) $gray,
    calc($block * 8) calc($block * 12) $red_dark,
    calc($block * 9) calc($block * 12) $red,
    
    calc($block * 3) calc($block * 13) $gray,
    calc($block * 4) calc($block * 13) $gray,
    calc($block * 5) calc($block * 13) $red_dark,
    calc($block * 7) calc($block * 13) $red_dark,
    calc($block * 8) calc($block * 13) $gray,
    calc($block * 9) calc($block * 13) $gray,
    
    calc($block * 3) calc($block * 14) $red,
    calc($block * 4) calc($block * 14) $red,
    calc($block * 5) calc($block * 14) $gray,
    calc($block * 7) calc($block * 14) $gray,
    calc($block * 8) calc($block * 14) $red,
    calc($block * 9) calc($block * 14) $red,
    
    calc($block * 3) calc($block * 15) $gray,
    calc($block * 4) calc($block * 15) $gray,
    calc($block * 8) calc($block * 15) $gray,
    calc($block * 9) calc($block * 15) $gray;
}

.litten.shiny {
  box-shadow:
    calc($block * 2) 0 $shiny,
    calc($block * 10) 0 $shiny,
    
    $block $block $shiny,
    calc($block * 2) $block $gray_light,
    calc($block * 3) $block $shiny,
    calc($block * 9) $block $shiny,
    calc($block * 10) $block $gray_light,
    calc($block * 11) $block $shiny,
    
    $block calc($block * 2) $shiny,
    calc($block * 2) calc($block * 2) $gray_light,
    calc($block * 3) calc($block * 2) $gray_light,
    calc($block * 4) calc($block * 2) $shiny,
    calc($block * 5) calc($block * 2) $shiny,
    calc($block * 6) calc($block * 2) $shiny,
    calc($block * 7) calc($block * 2) $shiny,
    calc($block * 8) calc($block * 2) $shiny,
    calc($block * 9) calc($block * 2) $gray_light,
    calc($block * 10) calc($block * 2) $gray_light,
    calc($block * 11) calc($block * 2) $shiny,
    
    $block calc($block * 3) $shiny,
    calc($block * 2) calc($block * 3) $gray_light,
    calc($block * 3) calc($block * 3) $shiny,
    calc($block * 4) calc($block * 3) $shiny,
    calc($block * 5) calc($block * 3) $shiny,
    calc($block * 6) calc($block * 3) $red,
    calc($block * 7) calc($block * 3) $shiny,
    calc($block * 8) calc($block * 3) $shiny,
    calc($block * 9) calc($block * 3) $shiny,
    calc($block * 10) calc($block * 3) $gray_light,
    calc($block * 11) calc($block * 3) $shiny,
    
    $block calc($block * 4) $shiny,
    calc($block * 2) calc($block * 4) $shiny,
    calc($block * 3) calc($block * 4) $shiny,
    calc($block * 4) calc($block * 4) $shiny,
    calc($block * 5) calc($block * 4) $red,
    calc($block * 6) calc($block * 4) $red,
    calc($block * 7) calc($block * 4) $red,
    calc($block * 8) calc($block * 4) $shiny,
    calc($block * 9) calc($block * 4) $shiny,
    calc($block * 10) calc($block * 4) $shiny,
    calc($block * 11) calc($block * 4) $shiny,
    
    $block calc($block * 5) $shiny,
    calc($block * 2) calc($block * 5) $shiny,
    calc($block * 3) calc($block * 5) $shiny,
    calc($block * 4) calc($block * 5) $shiny,
    calc($block * 5) calc($block * 5) $shiny,
    calc($block * 6) calc($block * 5) $red,
    calc($block * 7) calc($block * 5) $shiny,
    calc($block * 8) calc($block * 5) $shiny,
    calc($block * 9) calc($block * 5) $shiny,
    calc($block * 10) calc($block * 5) $shiny,
    calc($block * 11) calc($block * 5) $shiny,
    
    $block calc($block * 6) $shiny,
    calc($block * 2) calc($block * 6) $shiny,
    calc($block * 3) calc($block * 6) $shiny,
    calc($block * 4) calc($block * 6) $red,
    calc($block * 5) calc($block * 6) $red,
    calc($block * 6) calc($block * 6) $red,
    calc($block * 7) calc($block * 6) $red,
    calc($block * 8) calc($block * 6) $red,
    calc($block * 9) calc($block * 6) $shiny,
    calc($block * 10) calc($block * 6) $shiny,
    calc($block * 11) calc($block * 6) $shiny,
    
    $block calc($block * 7) $shiny,
    calc($block * 2) calc($block * 7) $yellow,
    calc($block * 3) calc($block * 7) $red_dark,
    calc($block * 4) calc($block * 7) $yellow,
    calc($block * 5) calc($block * 7) $shiny,
    calc($block * 6) calc($block * 7) $red,
    calc($block * 7) calc($block * 7) $shiny,
    calc($block * 8) calc($block * 7) $yellow,
    calc($block * 9) calc($block * 7) $red_dark,
    calc($block * 10) calc($block * 7) $yellow,
    calc($block * 11) calc($block * 7) $shiny,
    
    $block calc($block * 8) $shiny,
    calc($block * 2) calc($block * 8) $yellow,
    calc($block * 3) calc($block * 8) $red_light,
    calc($block * 4) calc($block * 8) $yellow,
    calc($block * 5) calc($block * 8) $shiny,
    calc($block * 6) calc($block * 8) $shiny,
    calc($block * 7) calc($block * 8) $shiny,
    calc($block * 8) calc($block * 8) $yellow,
    calc($block * 9) calc($block * 8) $red_light,
    calc($block * 10) calc($block * 8) $yellow,
    calc($block * 11) calc($block * 8) $shiny,
    
    $block calc($block * 9) $shiny,
    calc($block * 2) calc($block * 9) $red,
    calc($block * 3) calc($block * 9) $red,
    calc($block * 4) calc($block * 9) $red,
    calc($block * 5) calc($block * 9) $red,
    calc($block * 6) calc($block * 9) $shiny,
    calc($block * 7) calc($block * 9) $red,
    calc($block * 8) calc($block * 9) $red,
    calc($block * 9) calc($block * 9) $red,
    calc($block * 10) calc($block * 9) $red,
    calc($block * 11) calc($block * 9) $shiny,
    
    0 calc($block * 10) $red_dark,
    $block calc($block * 10) $red,
    calc($block * 2) calc($block * 10) $red_dark,
    calc($block * 4) calc($block * 10) $red,
    calc($block * 3) calc($block * 10) $red,
    calc($block * 5) calc($block * 10) $red,
    calc($block * 6) calc($block * 10) $red,
    calc($block * 7) calc($block * 10) $red,
    calc($block * 8) calc($block * 10) $red,
    calc($block * 9) calc($block * 10) $red,
    calc($block * 10) calc($block * 10) $red_dark,
    calc($block * 11) calc($block * 10) $red,
    calc($block * 12) calc($block * 10) $red_dark,
    
    $block calc($block * 11) $red_dark,
    calc($block * 3) calc($block * 11) $shiny,
    calc($block * 4) calc($block * 11) $shiny,
    calc($block * 5) calc($block * 11) $shiny,
    calc($block * 6) calc($block * 11) $shiny,
    calc($block * 7) calc($block * 11) $shiny,
    calc($block * 8) calc($block * 11) $shiny,
    calc($block * 9) calc($block * 11) $shiny,
    calc($block * 11) calc($block * 11) $red_dark,
    
    calc($block * 3) calc($block * 12) $red,
    calc($block * 4) calc($block * 12) $red_dark,
    calc($block * 5) calc($block * 12) $shiny,
    calc($block * 6) calc($block * 12) $shiny,
    calc($block * 7) calc($block * 12) $shiny,
    calc($block * 8) calc($block * 12) $red_dark,
    calc($block * 9) calc($block * 12) $red,
    
    calc($block * 3) calc($block * 13) $shiny,
    calc($block * 4) calc($block * 13) $shiny,
    calc($block * 5) calc($block * 13) $red_dark,
    calc($block * 7) calc($block * 13) $red_dark,
    calc($block * 8) calc($block * 13) $shiny,
    calc($block * 9) calc($block * 13) $shiny,
    
    calc($block * 3) calc($block * 14) $red,
    calc($block * 4) calc($block * 14) $red,
    calc($block * 5) calc($block * 14) $shiny,
    calc($block * 7) calc($block * 14) $shiny,
    calc($block * 8) calc($block * 14) $red,
    calc($block * 9) calc($block * 14) $red,
    
    calc($block * 3) calc($block * 15) $shiny,
    calc($block * 4) calc($block * 15) $shiny,
    calc($block * 8) calc($block * 15) $shiny,
    calc($block * 9) calc($block * 15) $shiny;
}

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

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: radial-gradient(ellipse at center, #e97711 0%,#c4431a 100%);
  
  @media screen and (height <= $bp) {
    display: block;
  }
}

.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: $gray;
    text-decoration: none;
    transition: all 0.7s;
    
    &:hover, &:focus {
      color: $yellow;
    }
  }
}

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

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