Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ add another resource

JavaScript

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

Packages

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.

Behavior

Auto Save

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.

HTML

              
                <!-- text is from http://www.fillerati.com/ -->
<hr />
<div>
  <h1>A Princess of Mars, by Edgar Burroughs</h1>
  <hr />
  <p>On the seventh day following the battle with the air craft we again took up the march toward Thark, all probability of another attack being deemed remote by Lorquas Ptomel.</p>
  <hr />
  <p>During the days just preceding our departure I had seen but little of Dejah Thoris, as I had been kept very busy by Tars Tarkas with my lessons in the art of Martian warfare, as well as in the training of my thoats.  The few times I had visited her quarters she had been absent, walking upon the streets with Sola, or investigating the buildings in the near vicinity of the plaza.  I had warned them against venturing far from the plaza for fear of the great white apes, whose ferocity I was only too well acquainted with.  However, since Woola accompanied them on all their excursions, and as Sola was well armed, there was comparatively little cause for fear.</p>
  <hr />
  <p>On the evening before our departure I saw them approaching along one of the great avenues which lead into the plaza from the east.  I advanced to meet them, and telling Sola that I would take the responsibility for Dejah Thoris' safekeeping, I directed her to return to her quarters on some trivial errand.  I liked and trusted Sola, but for some reason I desired to be alone with Dejah Thoris, who represented to me all that I had left behind upon Earth in agreeable and congenial companionship. There seemed bonds of mutual interest between us as powerful as though we had been born under the same roof rather than upon different planets, hurtling through space some forty-eight million miles apart.</p>
  <hr />
  <p>That she shared my sentiments in this respect I was positive, for on my approach the look of pitiful hopelessness left her sweet countenance to be replaced by a smile of joyful welcome, as she placed her little right hand upon my left shoulder in true red Martian salute.</p>
  <hr />
  <p>"Sarkoja told Sola that you had become a true Thark," she said, "and that I would now see no more of you than of any of the other warriors."</p>
  <hr />
  <p>"Sarkoja is a liar of the first magnitude," I replied, "notwithstanding the proud claim of the Tharks to absolute verity."</p>
  <hr />
  <p>Dejah Thoris laughed.</p>
  <hr />
  <p>"I knew that even though you became a member of the community you would not cease to be my friend; 'A warrior may change his metal, but not his heart,' as the saying is upon Barsoom."</p>
  <hr />
  <p>"I think they have been trying to keep us apart," she continued, "for whenever you have been off duty one of the older women of Tars Tarkas' retinue has always arranged to trump up some excuse to get Sola and me out of sight.  They have had me down in the pits below the buildings helping them mix their awful radium powder, and make their terrible projectiles.  You know that these have to be manufactured by artificial light, as exposure to sunlight always results in an explosion.  You have noticed that their bullets explode when they strike an object? Well, the opaque, outer coating is broken by the impact, exposing a glass cylinder, almost solid, in the forward end of which is a minute particle of radium powder.  The moment the sunlight, even though diffused, strikes this powder it explodes with a violence which nothing can withstand.  If you ever witness a night battle you will note the absence of these explosions, while the morning following the battle will be filled at sunrise with the sharp detonations of exploding missiles fired the preceding night.  As a rule, however, non-exploding projectiles are used at night."  [I have used the word radium in describing this powder because in the light of recent discoveries on Earth I believe it to be a mixture of which radium is the base.  In Captain Carter's manuscript it is mentioned always by the name used in the written language of Helium and is spelled in hieroglyphics which it would be difficult and useless to reproduce.]</p>
  <hr />
  <p>While I was much interested in Dejah Thoris' explanation of this wonderful adjunct to Martian warfare, I was more concerned by the immediate problem of their treatment of her.  That they were keeping her away from me was not a matter for surprise, but that they should subject her to dangerous and arduous labor filled me with rage.</p>
</div>
<hr />
              
            
!

CSS

              
                @import "compass/css3";

$z-offset: 32px;

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: sans-serif;
  font-size: 16px;
  perspective: 306px;
  background: #aaa;
}

div {
  position: relative;
  width: 50%;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  z-index: 0;
  transform-style: preserve-3d;
  
  &::before, &::after {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translateZ($z-offset);
  }
  
  &::before {
    content: "";
    left: -100%;
  }
  &::after {
    content: "";
    right: -100%;
  }

}

h1 {
  text-align: center;
}

p {
  font-size: 16px;
}

p, h1 {
  position: relative;
  padding: 20px;
  margin: 0;
  background-color: #ccc;
  transition: transform $z-offset;
  transform-style: preserve-3d;

  /* double colon syntax for pseudo elements because IE8 doesn't need to see them (no transforms) */
  &::before, &::after {
    position: absolute;
    width: 100%;
    height: $z-offset;
    left: 0;
    background: #888;
    transform-style: preserve-3d;
  }
  &::before {
    content:"";
    top: 0;
    transform-origin: 0% 0%;
    transform: rotateX(90deg);
  }
  &::after {
    content:"";
    bottom: 0;
    transform-origin: 100% 100%;
    transform: rotateX(-90deg);
  }
}

hr {
  position: relative;
  border: 0;
  margin: 0;
  height: 40px;
  background: #fff;
  transform: translateZ($z-offset);
  z-index: 1;
}

/* hide pseudo elements in IE9 and IE10 (no 3D transforms) */
@media screen and (min-width:0\0) {  
  p::before, p::after {
    display: none;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console