Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <div class="wrapper">
  <div class="link"></div> 

    <div class="credit">
      <p>2013 by <a href="">Kevin Gimbel</a>. Feel free to create new things based on it or optimize my work. I'd be happy if you link to this Pen as soon as you use the code in any way. Thanks <span class="red">&hearts;</span></p>
</div> <!-- credit -->


                @import "compass/css3";

/* credits */

.credit {
  margin:50px auto;
  padding:10px 20px;
  box-shadow:0px 0px 4px rgba(0,0,0,0.6);
  -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.6);

a {

a:hover {
.red {color:#7a0208;}
/* END credits*/

$hair           :  rgb(255,238,69);
$hair-orange    :  rgb(189,166,54);
$darkgreen      :  rgb(40,56,27);
$lightgreen     :  rgb(81,108,53);
$lightestgreen  :  rgb(88,181,67);
$face           :  darken(rgb(187,176,130),5%);
$face-light     :  rgb(187,176,130);

$light          :  white;
$eye            :  rgb(3,22,52);
$shoe           :  rgb(69,5,18);
$shoe-dark      :  darken(rgb(69,5,18),10%);
$outline        :  rgb(48,32,6);
$outline-dark   :  darken(rgb(48,32,6),10%);
.wrapper {
 margin:20px auto;

body {
 font-family: Arial, Helvetica, sans-serif;

.link {
  -25px 25px 0px $darkgreen,
  -50px 50px 0px $darkgreen,
  -75px 75px 0px $darkgreen,
  -75px 100px 0px $darkgreen,
  -100px 125px 0px $darkgreen,
  25px 0px 0px $lightgreen,
  50px 0px 0px $lightgreen,
  75px 0px 0px $lightgreen,
  100px 0px 0px $lightgreen,
  0px 25px 0px $lightgreen,
  25px 25px 0px $lightestgreen,
  50px 25px 0px $lightestgreen,
  75px 25px 0px $lightestgreen,
  100px 25px 0px $lightestgreen,
  0px 50px 0px $lightestgreen,
  25px 50px 0px $lightestgreen,
  50px 50px 0px $lightestgreen,
  75px 50px 0px $lightestgreen,
  100px 50px 0px $lightestgreen,
  125px 50px 0px $lightestgreen,
  -25px 75px 0px $lightestgreen,
  0px 75px 0px $lightestgreen,
  25px 75px 0px $lightestgreen,
  50px 75px 0px $lightestgreen,
  75px 75px 0px $lightestgreen,
  100px 75px 0px $lightestgreen,
  125px 75px 0px $lightestgreen,
  150px 75px 0px $lightestgreen,  
  -50px 100px 0px $lightestgreen,
  125px 0px 0px $darkgreen,  
  150px 25px 0px $darkgreen,
  175px 50px 0px $darkgreen,
  200px 75px 0px $darkgreen,
  200px 100px 0px $darkgreen,
  225px 125px 0px $darkgreen,
  175px 75px 0px $lightgreen,
  175px 100px 0px $outline,
  -25px 50px 0px $lightgreen,
  -50px 75px 0px $lightgreen,
  -75px 100px 0px $lightgreen,
  -75px 125px 0px $lightgreen,
  -100px 150px 0px $lightgreen,
  125px 25px 0px $lightgreen,
  150px 50px 0px $lightgreen,
  175px 75px 0px $lightgreen,
  200px 125px 0px $lightgreen,
  225px 150px 0px $lightgreen,  

  -25px 100px 0px $outline,
  0px 100px 0px $hair,
  25px 100px 0px $hair,
  50px 100px 0px $hair,
  75px 100px 0px $hair,
  100px 100px 0px $hair,
  125px 100px 0px $hair,
  150px 100px 0px $hair,
  -25px 125px 0px $hair,
  -50px 125px 0px $outline,
  0px 125px 0px $hair,
  25px 125px 0px $hair,
  50px 125px 0px $hair,
  75px 125px 0px $hair,
  100px 125px 0px $hair-orange,
  125px 125px 0px $outline,
  150px 125px 0px $hair,
  175px 125px 0px $hair,
  -75px 150px 0px $outline,
  -50px 150px 0px $hair,
  -25px 150px 0px $outline,
  0px 150px 0px $hair,
  25px 150px 0px $hair,
  50px 150px 0px $hair,
  75px 150px 0px $hair,  
  100px 150px 0px $outline,
  125px 150px 0px $hair-orange,
  150px 150px 0px $outline,
  175px 150px 0px $hair,
  200px 150px 0px $outline,
  -100px 175px 0px $hair-orange,
  -75px 175px 0px $outline,
  -50px 175px 0px $outline,
  -25px 175px 0px $hair-orange,
  0px 175px 0px $hair,
  25px 175px 0px $hair,
  50px 175px 0px $hair-orange,  
  75px 175px 0px $outline,
  100px 175px 0px $hair-orange,
  125px 175px 0px $face-light,
  150px 175px 0px $outline,
  175px 175px 0px $hair-orange,
  200px 175px 0px $outline,
  225px 175px 0px $hair-orange,
  -75px 200px 0px $outline,
  -50px 200px 0px $hair,
  -25px 200px 0px $face-light,
  0px 200px 0px $face-light,
  25px 200px 0px $outline,
  50px 200px 0px $outline,
  75px 200px 0px $face,
  100px 200px 0px $face-light,
  125px 200px 0px $face-light,
  150px 200px 0px $hair-orange,
  175px 200px 0px $outline,
  200px 200px 0px $hair,
  225px 200px 0px $outline,
  -75px 225px 0px $outline,
  -50px 225px 0px $hair,
  -25px 225px 0px $face,    
  0px 225px 0px $outline,    
  25px 225px 0px $outline,   
  50px 225px 0px $face,   
  75px 225px 0px $face-light,   
  100px 225px 0px $face,   
  125px 225px 0px $outline,
  150px 225px 0px $outline-dark,
  175px 225px 0px $outline,
  200px 225px 0px $hair,
  -75px 250px 0px $hair,
  -50px 250px 0px $face,
  -25px 250px 0px $light,
  0px 250px 0px $eye,    
  25px 250px 0px $outline,    
  50px 250px 0px $face-light,    
  75px 250px 0px $face-light,
  100px 250px 0px $outline,    
  125px 250px 0px $eye,
  150px 250px 0px $light,    
  175px 250px 0px $outline,  
  200px 250px 0px $face,
  -50px 275px 0px $outline-dark,
  -25px 275px 0px $face-light,
  0px 275px 0px $eye,
  25px 275px 0px $light,
  50px 275px 0px $face-light,
  75px 275px 0px $face-light,
  100px 275px 0px $light,
  125px 275px 0px $eye,
  150px 275px 0px $face-light,
  175px 275px 0px $outline-dark,
  -50px 300px 0px $outline-dark,
  -25px 300px 0px $outline,
  0px 300px 0px $face-light,
  25px 300px 0px $face-light,
  50px 300px 0px $face-light,
  75px 300px 0px $face-light,
  100px 300px 0px $face-light,
  125px 300px 0px $face-light,
  150px 300px 0px $outline,
  175px 300px 0px $outline-dark,
  -75px 325px 0px $outline-dark,
  -50px 325px 0px $lightgreen,
  -25px 325px 0px $outline,
  0px 325px 0px $outline,
  25px 325px 0px $face,
  50px 325px 0px $face,
  75px 325px 0px $face,
  100px 325px 0px $face,
  125px 325px 0px $outline,
  150px 325px 0px $outline,
  175px 325px 0px $lightgreen,
  200px 325px 0px $outline-dark,
  -100px 350px 0px $outline-dark,
  -75px 350px 0px $lightgreen,
  -50px 350px 0px $lightgreen,
  -25px 350px 0px $lightgreen,
  0px 350px 0px $darkgreen,
  25px 350px 0px $darkgreen,
  50px 350px 0px $darkgreen,
  75px 350px 0px $darkgreen,
  100px 350px 0px $darkgreen,
  125px 350px 0px $darkgreen,
  150px 350px 0px $lightgreen,
  175px 350px 0px $lightgreen,
  200px 350px 0px $lightgreen,
  225px 350px 0px $outline-dark,
  -125px 375px 0px $outline-dark,
  -100px 375px 0px $face-light,
  -75px 375px 0px $face-light,
  -50px 375px 0px $outline-dark,
  -25px 375px 0px $outline,
  0px 375px 0px $darkgreen,
  25px 375px 0px $darkgreen,
  50px 375px 0px $darkgreen,
  75px 375px 0px $darkgreen,
  100px 375px 0px $darkgreen,
  125px 375px 0px $darkgreen, 
  150px 375px 0px $outline, 
  175px 375px 0px $outline-dark, 
  200px 375px 0px $face-light, 
  225px 375px 0px $face-light, 
  250px 375px 0px $outline-dark,
  -125px 400px 0px $outline-dark,
  -100px 400px 0px $face,
  -75px 400px 0px $face-light,
  -50px 400px 0px $darkgreen,
  -25px 400px 0px $lightgreen,
  0px 400px 0px $outline,
  25px 400px 0px $outline,
  50px 400px 0px $hair,
  75px 400px 0px $hair,
  100px 400px 0px $outline,
  125px 400px 0px $outline,
  150px 400px 0px $lightgreen,
  175px 400px 0px $darkgreen,
  200px 400px 0px $face-light,
  225px 400px 0px $face,
  250px 400px 0px $outline-dark,
  -100px 425px 0px $outline-dark,
  -75px 425px 0px $outline-dark,
  -50px 425px 0px $outline-dark,
  -25px 425px 0px $lightgreen,
  0px 425px 0px $lightgreen,
  25px 425px 0px $darkgreen,
  50px 425px 0px $hair,
  75px 425px 0px $hair,
  100px 425px 0px $darkgreen,
  125px 425px 0px $lightgreen,
  150px 425px 0px $lightgreen,
  175px 425px 0px $outline-dark,
  200px 425px 0px $outline-dark,
  225px 425px 0px $outline-dark,

  -50px 450px 0px $outline-dark,
  -25px 450px 0px $outline-dark,
  0px 450px 0px $darkgreen,
  25px 450px 0px $lightgreen,
  50px 450px 0px $lightgreen,
  75px 450px 0px $lightgreen,
  100px 450px 0px $lightgreen,
  125px 450px 0px $darkgreen,
  150px 450px 0px $outline-dark,
  175px 450px 0px $outline-dark,
  -75px 475px 0px $outline-dark,
  -50px 475px 0px $shoe,
  -25px 475px 0px $shoe-dark,
  0px 475px 0px $outline-dark,
  25px 475px 0px $outline-dark,
  50px 475px 0px $outline-dark,
  75px 475px 0px $outline-dark,
  100px 475px 0px $outline-dark,
  125px 475px 0px $outline-dark,
  150px 475px 0px $shoe-dark,
  175px 475px 0px $shoe,
  200px 475px 0px $outline-dark,
  -75px 500px 0px $outline-dark,
  -50px 500px 0px $shoe,
  -25px 500px 0px $shoe,
  0px 500px 0px $shoe-dark,
  25px 500px 0px $outline-dark,
  100px 500px 0px $outline-dark,
  125px 500px 0px $shoe-dark,
  150px 500px 0px $shoe,
  175px 500px 0px $shoe,
  200px 500px 0px $outline-dark,  
  -50px 525px 0px $outline-dark,
  -25px 525px 0px $outline-dark,
  0px 525px 0px $outline-dark,
  125px 525px 0px $outline-dark,
  150px 525px 0px $outline-dark,
  175px 525px 0px $outline-dark;



Pure CSS3 single element Link from TLOZ

I made this to work around with box-shadow single element drawing. Kind of fun and pain at the same time. Anyway, the original "link" DIV is in the upper left corner of link's head. If you change the background inside the SCSS you'll see.


Inspired by: