CSS Pixel Ruler

By Xah Lee. Date:
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700

Here's the HTML:

<div class="pixelruler" id="px600">600</div>
<div class="pixelruler" id="px700">700</div>
<div class="pixelruler" id="px800">800</div>
<div class="pixelruler" id="px900">900</div>
<div class="pixelruler" id="px1000">1000</div>
<div class="pixelruler" id="px1100">1100</div>
<div class="pixelruler" id="px1200">1200</div>
<div class="pixelruler" id="px1300">1300</div>
<div class="pixelruler" id="px1400">1400</div>
<div class="pixelruler" id="px1500">1500</div>
<div class="pixelruler" id="px1600">1600</div>
<div class="pixelruler" id="px1700">1700</div>

Here's the CSS:

div.pixelruler {
border-bottom:solid 5px red;
margin-bottom:20px;
text-align:right;
}

#px600 {width:600px}
#px700 {width:700px}
#px800 {width:800px}
#px900 {width:900px}
#px1000 {width:1000px}
#px1100 {width:1100px}
#px1200 {width:1200px}
#px1300 {width:1300px}
#px1400 {width:1400px}
#px1500 {width:1500px}
#px1600 {width:1600px}
#px1700 {width:1700px}
Liket it? Put $1 at patreon.

Or, Buy JavaScript in Depth