cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <body>
  <div class="canvas">
    <div class="ruler">
      <div class="ruler-copy"></div>
      <div class="ruler-line-1"></div>
      <div class="ruler-line-2"></div>
      <div class="ruler-line-3"></div>
      <div class="ruler-line-4"></div>
      <div class="ruler-line-5"></div>
      <div class="five">5</div>
      <div class="ruler-line-6"></div>
      <div class="ruler-line-7"></div>
      <div class="ruler-line-8"></div>
      <div class="ruler-line-9"></div>
      <div class="ruler-line-10"></div>
      <div class="ten">10</div>
      <div class="ruler-line-11"></div>
      <div class="ruler-line-12"></div>
      <div class="ruler-line-13"></div>
      <div class="ruler-line-14"></div>
      <div class="ruler-line-15"></div>
      <div class="fifteen">15</div>
      <div class="ruler-line-16"></div>
      <div class="ruler-line-17"></div>
      <div class="ruler-line-18"></div>
      <div class="ruler-line-19"></div>
      <div class="ruler-line-20"></div>
      <div class="twenty">20</div>
      <div class="ruler-line-21"></div>
      <div class="ruler-line-22"></div>
      <div class="ruler-line-23"></div>
      <div class="ruler-line-24"></div>
      <div class="ruler-line-25"></div>
      <div class="twenty-five">25</div>
      <div class="ruler-line-26"></div>
      <div class="ruler-line-27"></div>
      <div class="ruler-line-28"></div>
      <div class="ruler-line-29"></div>
      <div class="ruler-line-30"></div>
      <div class="thirty">30</div>
      <div class="ruler-line-31"></div>
      <div class="ruler-line-32"></div>
      <div class="ruler-line-33"></div>
    </div>
  </div>
</body>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Crimson+Text');
body {
  background: linear-gradient(rgba(255, 220, 255, .8), rgba(255, 220, 255, 1));
  font-family: "Crimson Text", serif;
}
.canvas {
  position: relative;
  margin: auto;
  margin-top: 0%;
  margin-bottom: 40%;
  width: 600px;
  height: 600px;
  display: block;
  background: none;
}
.ruler {
  position: absolute;
  top: 42.5%;
  left: 5%;
  width: 90%;
  height: 15%;
  background: linear-gradient(rgba(255, 200, 90, .7), rgba(255, 200, 90, .9));
  border-color: transparent rgba(255, 200, 90, 1) rgba(245, 190, 80, 1) transparent;
  border-style: none solid solid none;
  border-width: 8px;
  -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.5);
}
.ruler-copy {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
}
.ruler-line-1 {
  position: absolute;
  top: 0%;
  left: 2%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.one {
  position: absolute;
  top: 25%;
  left: 2%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-2 {
  position: absolute;
  top: 0%;
  left: 5%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.two {
  position: absolute;
  top: 25%;
  left: 5%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-3 {
  position: absolute;
  top: 0%;
  left: 8%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.three {
  position: absolute;
  top: 25%;
  left: 8%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-4 {
  position: absolute;
  top: 0%;
  left: 11%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.four {
  position: absolute;
  top: 25%;
  left: 11%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-5 {
  position: absolute;
  top: 0%;
  left: 14%;
  width: 1%;
  height: 30%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .9));
  z-index: 2;
}
.five {
  position: absolute;
  top: 35%;
  left: 14%;
  color: rgba(60, 20, 20, .8);
  font-size: 1em;
  font-weight: bold;
}
.ruler-line-6 {
  position: absolute;
  top: 0%;
  left: 17%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.six {
  position: absolute;
  top: 25%;
  left: 17%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-7 {
  position: absolute;
  top: 0%;
  left: 20%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.seven {
  position: absolute;
  top: 25%;
  left: 20%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-8 {
  position: absolute;
  top: 0%;
  left: 23%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.eight {
  position: absolute;
  top: 25%;
  left: 23%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-9 {
  position: absolute;
  top: 0%;
  left: 26%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.nine {
  position: absolute;
  top: 25%;
  left: 26%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-10 {
  position: absolute;
  top: 0%;
  left: 29%;
  width: 1%;
  height: 30%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .9));
  z-index: 2;
}
.ten {
  position: absolute;
  top: 35%;
  left: 28%;
  color: rgba(60, 20, 20, .8);
  font-size: 1em;
  font-weight: bold;
}
.ruler-line-11 {
  position: absolute;
  top: 0%;
  left: 32%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.eleven {
  position: absolute;
  top: 25%;
  left: 31%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-12 {
  position: absolute;
  top: 0%;
  left: 35%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.twelve {
  position: absolute;
  top: 25%;
  left: 34%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-13 {
  position: absolute;
  top: 0%;
  left: 38%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.thirteen {
  position: absolute;
  top: 25%;
  left: 37%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-14 {
  position: absolute;
  top: 0%;
  left: 41%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.fourteen {
  position: absolute;
  top: 25%;
  left: 40%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-15 {
  position: absolute;
  top: 0%;
  left: 44%;
  width: 1%;
  height: 30%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .9));
  z-index: 2;
}
.fifteen {
  position: absolute;
  top: 35%;
  left: 43%;
  color: rgba(60, 20, 20, .8);
  font-size: 1em;
  font-weight: bold;
}
.ruler-line-16 {
  position: absolute;
  top: 0%;
  left: 47%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.sixteen {
  position: absolute;
  top: 25%;
  left: 46%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-17 {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.seventeen {
  position: absolute;
  top: 25%;
  left: 49%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-18 {
  position: absolute;
  top: 0%;
  left: 53%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.eighteen {
  position: absolute;
  top: 25%;
  left: 52%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-19 {
  position: absolute;
  top: 0%;
  left: 56%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.nineteen {
  position: absolute;
  top: 25%;
  left: 55%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-20 {
  position: absolute;
  top: 0%;
  left: 59%;
  width: 1%;
  height: 30%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .9));
  z-index: 2;
}
.twenty {
  position: absolute;
  top: 35%;
  left: 58%;
  color: rgba(60, 20, 20, .8);
  font-size: 1em;
  font-weight: bold;
}
.ruler-line-21 {
  position: absolute;
  top: 0%;
  left: 62%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.twenty-one {
  position: absolute;
  top: 25%;
  left: 61%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-22 {
  position: absolute;
  top: 0%;
  left: 65%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.twenty-two {
  position: absolute;
  top: 25%;
  left: 64%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-23 {
  position: absolute;
  top: 0%;
  left: 68%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.twenty-three {
  position: absolute;
  top: 25%;
  left: 67%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-24 {
  position: absolute;
  top: 0%;
  left: 71%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.twenty-four {
  position: absolute;
  top: 25%;
  left: 70%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-25 {
  position: absolute;
  top: 0%;
  left: 74%;
  width: 1%;
  height: 30%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .9));
  z-index: 2;
}
.twenty-five {
  position: absolute;
  top: 35%;
  left: 73%;
  color: rgba(60, 20, 20, .8);
  font-size: 1em;
  font-weight: bold;
}
.ruler-line-26 {
  position: absolute;
  top: 0%;
  left: 77%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.twenty-six {
  position: absolute;
  top: 25%;
  left: 76%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-27 {
  position: absolute;
  top: 0%;
  left: 80%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.twenty-seven {
  position: absolute;
  top: 25%;
  left: 79%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-28 {
  position: absolute;
  top: 0%;
  left: 83%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.twenty-eight {
  position: absolute;
  top: 25%;
  left: 82%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-29 {
  position: absolute;
  top: 0%;
  left: 86%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.twenty-nine {
  position: absolute;
  top: 25%;
  left: 85%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-30 {
  position: absolute;
  top: 0%;
  left: 89%;
  width: 1%;
  height: 30%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .9));
  z-index: 2;
}
.thirty {
  position: absolute;
  top: 35%;
  left: 88%;
  color: rgba(60, 20, 20, .8);
  font-size: 1em;
  font-weight: bold;
}
.ruler-line-31 {
  position: absolute;
  top: 0%;
  left: 92%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.thirty-one {
  position: absolute;
  top: 25%;
  left: 91%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-32 {
  position: absolute;
  top: 0%;
  left: 95%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.thirty-two {
  position: absolute;
  top: 25%;
  left: 94%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
.ruler-line-33 {
  position: absolute;
  top: 0%;
  left: 98%;
  width: 1%;
  height: 20%;
  background: linear-gradient(rgba(60, 20, 20, .6), rgba(60, 20, 20, .8));
  z-index: 2;
}
.thirty-three {
  position: absolute;
  top: 25%;
  left: 97%;
  color: rgba(60, 20, 20, .6);
  font-size: .75em;
}
            
          
!
999px
Loading ..................

Console