Skip to content

Instantly share code, notes, and snippets.

@ulope
Created April 19, 2012 17:06
Show Gist options
  • Save ulope/2422343 to your computer and use it in GitHub Desktop.
Save ulope/2422343 to your computer and use it in GitHub Desktop.
CSS A4 page ruler
#page .ruler {
position: absolute;
}
#page .ruler.horz span {
width: 1cm;
height: 297mm;
display: block;
position: absolute;
}
#page .ruler.horz span:nth-child(odd) {
background-color: rgba(70, 0, 0, 0.2);
}
#page .ruler.horz span:nth-child(even) {
background-color: rgba(70, 70, 0, 0.2);
}
.horz span:nth-child(1) {left: 0;}
.horz span:nth-child(2) {left: 1cm;}
.horz span:nth-child(3) {left: 2cm;}
.horz span:nth-child(4) {left: 3cm;}
.horz span:nth-child(5) {left: 4cm;}
.horz span:nth-child(6) {left: 5cm;}
.horz span:nth-child(7) {left: 6cm;}
.horz span:nth-child(8) {left: 7cm;}
.horz span:nth-child(9) {left: 8cm;}
.horz span:nth-child(10) {left: 9cm;}
.horz span:nth-child(11) {left: 10cm;}
.horz span:nth-child(12) {left: 11cm;}
.horz span:nth-child(13) {left: 12cm;}
.horz span:nth-child(14) {left: 13cm;}
.horz span:nth-child(15) {left: 14cm;}
.horz span:nth-child(16) {left: 15cm;}
.horz span:nth-child(17) {left: 16cm;}
.horz span:nth-child(18) {left: 17cm;}
.horz span:nth-child(19) {left: 18cm;}
.horz span:nth-child(20) {left: 19cm;}
.horz span:nth-child(21) {left: 20cm;}
#page .ruler.vert span {
width: 210mm;
height: 1cm;
display: block;
position: absolute;
}
#page .ruler.vert span:nth-child(odd) {
background-color: rgba(0, 0, 70, 0.2);
}
#page .ruler.vert span:nth-child(even) {
background-color: rgba(0, 70, 70, 0.2);
}
.vert span:nth-child(1) {top: 0;}
.vert span:nth-child(2) {top: 1cm;}
.vert span:nth-child(3) {top: 2cm;}
.vert span:nth-child(4) {top: 3cm;}
.vert span:nth-child(5) {top: 4cm;}
.vert span:nth-child(6) {top: 5cm;}
.vert span:nth-child(7) {top: 6cm;}
.vert span:nth-child(8) {top: 7cm;}
.vert span:nth-child(9) {top: 8cm;}
.vert span:nth-child(10) {top: 9cm;}
.vert span:nth-child(11) {top: 10cm;}
.vert span:nth-child(12) {top: 11cm;}
.vert span:nth-child(13) {top: 12cm;}
.vert span:nth-child(14) {top: 13cm;}
.vert span:nth-child(15) {top: 14cm;}
.vert span:nth-child(16) {top: 15cm;}
.vert span:nth-child(17) {top: 16cm;}
.vert span:nth-child(18) {top: 17cm;}
.vert span:nth-child(19) {top: 18cm;}
.vert span:nth-child(20) {top: 19cm;}
.vert span:nth-child(21) {top: 20cm;}
.vert span:nth-child(22) {top: 21cm;}
.vert span:nth-child(23) {top: 22cm;}
.vert span:nth-child(24) {top: 23cm;}
.vert span:nth-child(25) {top: 24cm;}
.vert span:nth-child(26) {top: 25cm;}
.vert span:nth-child(27) {top: 26cm;}
.vert span:nth-child(28) {top: 27cm;}
.vert span:nth-child(29) {top: 28cm;}
.vert span:nth-child(30) {top: 29cm;}
<div class="ruler horz">
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span>
</div>
<div class="ruler vert">
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
<span></span><span></span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment