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.

            
              <div class="long">
  <h1>Chris Coyier is my Hero&hellip;</h1>
  <blockquote>I just want to say that everything I know about WordPress, I’ve learned from Chris Coyier. He’s taught me a lot about semantic HTML and CSS, too.
    <footer>
      <cite>— <a href="http://designgeekess.com/sweet-site/chris-coyier-is-my-hero/">Niki</a></cite>
    </footer>
  </blockquote>

  <blockquote>Beyond a shadow of a doubt, my single biggest influence in web has been Mr. Chris Coyier, curator of CSS-Tricks. I know this, because there probably isn’t a single website that I’ve constructed since I found CSS-Tricks that hasn’t benefited from the use of something I gleaned from Chris’ website.

    <footer>
    <cite>— <a href="http://blog.duaneneveu.com/2239/my-web-hero-chris-coyier/">Duane Neveu</a></cite>
    </footer>
  </blockquote>

  <blockquote>
    &hellip;he has started some great projects, and for that he has been turned into a “Hero” to web developers and designers...
    <footer><cite>— <a href="http://blog.teamtreehouse.com/kill-your-heroes#comment-24176">Aaron Brewer</a></cite></footer>
  </blockquote>

  <blockquote>
    One of my favorite internet-famous people, Chris Coyier, just became even more of a hero to me.
    <footer><cite>— <a href="http://tinynow.com/blog/chris-coyier-hacker/">Matt</a></cite></footer>
  </blockquote>

  <blockquote>
    Whether he knows it or not, Chris Coyier has to be my CSS Yoda...If you’re out there Chris and you read this…Mucho, Mucho thanks for all that you do in the community. 
    <footer><cite>— <a href="http://blog.grayghostvisuals.com/developers/my-web-heros/">Dennis Gaebel</a></cite></footer>
  </blockquote>

  <hr />
  
  <blockquote>
    <footer>
      <a target="_blank" href="http://codepen.io/somethingkindawierd/pen/uhonc">Click here to view a solution to this scrolling problem using React mixins</a>
    </footer>
  </blockquote>
</div>
<div class="short-wrap scrollY">
  <div class="short">
    <div class="short-content">
      <p>Try scrolling me.</p>
      <p><strong>Desired Behavior</strong></p>
      <p>Once you scroll to the bottom scrolling
        should stop.</p>
      <p><strong>Actual Behavior</strong></p>
      <p>When you scroll to the bottom the background will start scrolling instead.</p>
    </div>
  </div>
</div>
            
          
!
            
              html, body, .app {
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
}

body,
.scrollY {
  overflow-y: auto;
}

.long {
  min-height: 150%;
}

.short-wrap {
  position: fixed;
  top: 0;
  left: 0;
  height: 250px;
  width: 150px;
}
.short {
  width: 100%;
  min-height: 100%;
}

// Demo Styles
// -----------

@import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(http://fonts.googleapis.com/css?family=Cardo:400,400italic);

h1 {
  font-family: 'Abril Fatface', cursive;
  font-size: 48px;
  color: #eee;
}

blockquote {
  font-family: 'Cardo', serif;
  font-size: 24px;
  font-style: italic;
  line-height: 32px;
  color: #ddd;
}

cite, 
a, 
a:active, 
a:hover {
  color: #888;
  font-style: normal;
  text-decoration: none;
}

.long {
  padding: 80px 180px;
  text-shadow: 0 0 3px #000;
  background: #333;
  background-image: url('https://dl.dropboxusercontent.com/u/14898/Photos/NSTexturedFullScreenBackgroundColor.png');
}

.short {
  color: #333;
  background: #ccc;
}

.short-content {
  font-family: Helvetica, sans-serif;
  padding: 24px 12px;
  margin: 0;
  
  p {
    margin: 0;
    padding: 0.5em 0;
  }
}
            
          
!
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