Created
October 31, 2012 17:30
-
-
Save andij/3988504 to your computer and use it in GitHub Desktop.
CSS Ruler Tool
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>CSS Ruler Tool - Drew Jones (andij.com)</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0 auto; | |
| max-width: 1200px; | |
| overflow-y: scroll; | |
| font-family: Helvetica, Arial, sans-serif; | |
| color: #222; | |
| } | |
| .content blockquote { | |
| padding: 30px; /* this padding was added to show off the rulers */ | |
| } | |
| /* Drop this CSS into your project, tweak if you want to change anything */ | |
| /* ############### ruler */ | |
| .ruler { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ruler:before, .ruler:after { | |
| z-index: -1; /* change this value from '-1' to '1' if you'd like the ruler to be on top (maybe a higher value if you've set other elements with z-index) */ | |
| position: absolute; /* change this value from 'absolute' to 'fixed' if you want it to anchor to the top left of the browser and remain stationary */ | |
| background-color: rgba(152, 186, 254, 0.6); /* feel free to adjust the colour of the rulers to make them visible */ | |
| background-repeat: no-repeat; | |
| display: block; | |
| content: ""; | |
| top: 0; | |
| left: 0; | |
| } | |
| .ruler:after { | |
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAAPCAYAAAD08jZ8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQ0U1NzQ5NjE5QjFFMDExODg0NUM0NDdCRDlBRTE1QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowN0I2MzNGQjIzN0ExMUUyQTlGRkE5RDYwRDQ5NjU5MSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowN0I2MzNGQTIzN0ExMUUyQTlGRkE5RDYwRDQ5NjU5MSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBCMTE4N0YyNkQyM0UyMTE5QjExQjhDRUM2NTVGRTRCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBDRTU3NDk2MTlCMUUwMTE4ODQ1QzQ0N0JEOUFFMTVDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+XuxAOgAAA0tJREFUeNrs3e9tozAYB2BTdYb7egzAKFniNukmt0TGuI8ZgH69JXJQQev4IDUJSYA8jxQpRYki4Z9fG5c/RQjhz/F4fCuKYh8u0Hw3AKzMrql5b23ta97v7Q7kD/lD+wP6Pyw7vy/2AwAAAABLZgELAAAAgEV77d8cj8fdnX+7bl4HTQBPr2pepd2A/CF/aH9A/wf5HfOxgNVeS3jvH+6uvbWABZSPqEEgf8gf2h/Q/2E9+f1YwOoWk4b8bF4/uvd/m9f7jL9da3egrQVJDRqqO7nbspk0MJK/OIPyxxLqX24m5W/d7R+3aYjaNqg/sNn+/zuq7VP6ejom6P+sJb9Xj1+v0R8fTyKInipYddt/ddvbsNehO2uq2R6SzwNc4hC+zsYcqzu523LP6tzZ7Qzk7ySD8scC6t9+Qiblb93tv+vbtNcvbqk/sFnvUW3Pnv8mY8KUpwnq/zw8v9eOX69nPlBGj9kM0XuX/QG3Mlh3creF02ux+0G+7N6Xwb33yMzgJZmUP+asf3GGcjIpf6t3cjZe3+YDmdD+sMH5xoS5RnoWVaX/s5b8zjF+eQohsMgJfFTU6jOXOZ9ov9O/uoLXF9cy2gZjqrFM9rk6l0X5Yw5Jhqqp35O/1TqEr/9Ov6WLWVEbDtYk7Q/rnfOOyZz/lvo/j85v7rHaHPOXl+gAcdLlgFM/DzC1KMZFK2cBoS+g0XdDstpfJ0W3tqtJJ4FJxj63xbmSP24lyVCZU/fkb5M1qP4uE2lN0v6wKllnRA0tVg+NCfo/j85v7rHatfOX9hLCvf0PLHgBIVxaDL8puk6lZnSyeKPcyR9LyKT8refgoFR/4Llr/1DNv2JM0P+5a1ZvMX4VZ86iqkJ0beMFN9kCmGqo7vz3xJR0+9DnzlxzbdGes/lLBuJ6ZCws5Y871L86M5Pytw27pK0q9Qeeps+H3PlvumCg//Po/GYeq80yfhXfXAYY3xSu/UGLV8DdFhHC6Y38Yun2z4I4dAPk4CaWXJbBPi9DY2Elf9yh/h0yMyl/26w9Qf2Bp+nzIXP+e0i+p/+zhPzmHKvNMn4V7mMFbMTOf5mQP+RP/rQ/oP/DNvNrAQvYiqH/XIP8IX9of0D/hw3k958AAwBYffhErqa7OAAAAABJRU5ErkJggg==); | |
| width: 100%; | |
| height: 15px; | |
| } | |
| .ruler:before { | |
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAQACAYAAAA+zwOMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQ0U1NzQ5NjE5QjFFMDExODg0NUM0NDdCRDlBRTE1QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMkI5MUYzODIzN0ExMUUyODU5MDgyODVGNzYzQjBDNyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMkI5MUYzNzIzN0ExMUUyODU5MDgyODVGNzYzQjBDNyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3RjY2RkU4NEE3QjJFMDExOEQwNUM2MTE4MkY4QjE0NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQ0U1NzQ5NjE5QjFFMDExODg0NUM0NDdCRDlBRTE1QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pijn5+MAAAOqSURBVHja7N07btswGABgOkjnIkvW+AC+SX2ArJ17CecyRQ6Q3iKjty720sFDgA6dOqRSYKU0TUr0I27rfgQEP+JPFH9TUhD+ZEYhhMcwUJ6fn2fNw0P6/qj5wXTjjdFotv5wXBbNNk/xZbLHeEcPQ0d0EQ4oMAzDMFxX2htd/HrSbOPSjW0IizYMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMw/8fvkxe7zRtO6153C5ust7BaQ+71ISQa06p5pukCfHzyRC+jhZ2eam5fZ7Go6bNXa3bpZ0kH23tajCPzeOn7vn6dff+tNkm3ef7Ahai9WgWURPmVW2ODnengIUkSHsHbK9Okq096jRFvIoX74kDFwest+b0+412Mu/DbbQ/pksHRb1u/mYBW8WBSg67GLCb29vb9+1hN9tycMWjpG/fNW/9uLq6+tr167h/J5/davOqqfnb09PT5+4wM7UXL0PL+/v770cNWBqoqk7Sd8iDp2TS08YnOeyN7pl2y9qzarFPzcuwuRzWvPRVTQs7mBa7ZRfIcMwlwAolX7OVUWAYhmEYhmEYhmEYhmEYhmEYhmEYhuEj4DPODwuh599ulco4SY/YikUJt8llyw4mOwlhIHvnNaujL7tjMKujkITTG+32kBdJmtNW4AYT6rpDzeWHldLa7sLvdJ/XlLaQpAAd1EneJKEuDVjIJdT1dRL5YblTU37YVted7XP1lB8mP8xvQzAMwzAMwzAMwzAMwzAMwzAMwzAMw3Bazjw/rCsbzTkoe2dw/bAOnGw5rGxWR+1yWLn8sHmozOqIv/P/NaHu+D1Mfpj8MPlh8sNesV9oYBiGYRiGYRiGYRiGYRiG4X8Nn+H4cxhqUt/oYDoUMU5HUnqHX7oXpdGjqn+KVBgZrRp+meRGCocCtjFgn1mrZO/h1N7v+YwG7LdOGAu69Iw/5xZ0Mf68/U3M9rl6Gn8+7/HnM1w/zNXTcljly1Cm3Tvdn7Nnl4DJD3N/dn8+/v3ZHxxgGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIaLpXYucHbqVGn+87tm+xn/IJmV+7KDNPl7uv7Ql+bxQ+4Q4hT0qrnASVlUtXloRu6ZzfjJtjFUzim7juaTxcEbh2hO2cVQzfGcjJNMYS7WXhOwVWY+WXXAll2QcrPMh2r+y9cc32WK1EawukiaItV/SlZd9E2RKkyROvhK8mfmV/0SYACJMdTrpOwJ/wAAAABJRU5ErkJggg==); | |
| width: 15px; | |
| height: 100%; | |
| } | |
| /* ############### ruler */ | |
| </style> | |
| </head> | |
| <body> | |
| <!-- add the class 'ruler' to any element that you'd like to measure --> | |
| <div class="content ruler"> | |
| <h1>CSS Ruler Tool</h1> | |
| <h2>Warning - Lorem ipsum follows</h2> | |
| <h3>Lorem ipsum</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nisl ultrices nunc tincidunt vehicula sollicitudin nulla ullamcorper. Donec eget orci eu lorem dapibus malesuada. Donec dui odio, blandit id iaculis nec, mollis non est. Sed sit amet eros id nisl molestie aliquam in vitae lacus. Nulla eget urna a lacus lacinia tristique ac in metus. Quisque vulputate quam in lectus luctus convallis. Quisque mattis sodales luctus. Vivamus a erat porttitor tellus molestie tempor sit amet in lorem. Morbi vitae lobortis tellus. Quisque consequat luctus tincidunt. Nullam in felis urna, ut pretium mauris. Quisque quam quam, sodales non pretium sit amet, tristique vel lacus.</p> | |
| <!-- add the class 'ruler' to any element that you'd like to measure --> | |
| <blockquote class="ruler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nisl ultrices nunc tincidunt vehicula sollicitudin nulla ullamcorper. Donec eget orci eu lorem dapibus malesuada. Donec dui odio, blandit id iaculis nec, mollis non est. Sed sit amet eros id nisl molestie aliquam in vitae lacus. Nulla eget urna a lacus lacinia tristique ac in metus. Quisque vulputate quam in lectus luctus convallis. Quisque mattis sodales luctus. Vivamus a erat porttitor tellus molestie tempor sit amet in lorem. Morbi vitae lobortis tellus. Quisque consequat luctus tincidunt. Nullam in felis urna, ut pretium mauris. Quisque quam quam, sodales non pretium sit amet, tristique vel lacus.</blockquote> | |
| <h3>Lorem ipsum</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nisl ultrices nunc tincidunt vehicula sollicitudin nulla ullamcorper. Donec eget orci eu lorem dapibus malesuada. Donec dui odio, blandit id iaculis nec, mollis non est. Sed sit amet eros id nisl molestie aliquam in vitae lacus. Nulla eget urna a lacus lacinia tristique ac in metus. Quisque vulputate quam in lectus luctus convallis. Quisque mattis sodales luctus. Vivamus a erat porttitor tellus molestie tempor sit amet in lorem. Morbi vitae lobortis tellus. Quisque consequat luctus tincidunt. Nullam in felis urna, ut pretium mauris. Quisque quam quam, sodales non pretium sit amet, tristique vel lacus.</p> | |
| <h3>Lorem ipsum</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nisl ultrices nunc tincidunt vehicula sollicitudin nulla ullamcorper. Donec eget orci eu lorem dapibus malesuada. Donec dui odio, blandit id iaculis nec, mollis non est. Sed sit amet eros id nisl molestie aliquam in vitae lacus. Nulla eget urna a lacus lacinia tristique ac in metus. Quisque vulputate quam in lectus luctus convallis. Quisque mattis sodales luctus. Vivamus a erat porttitor tellus molestie tempor sit amet in lorem. Morbi vitae lobortis tellus. Quisque consequat luctus tincidunt. Nullam in felis urna, ut pretium mauris. Quisque quam quam, sodales non pretium sit amet, tristique vel lacus.</p> | |
| <h3>Lorem ipsum</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nisl ultrices nunc tincidunt vehicula sollicitudin nulla ullamcorper. Donec eget orci eu lorem dapibus malesuada. Donec dui odio, blandit id iaculis nec, mollis non est. Sed sit amet eros id nisl molestie aliquam in vitae lacus. Nulla eget urna a lacus lacinia tristique ac in metus. Quisque vulputate quam in lectus luctus convallis. Quisque mattis sodales luctus. Vivamus a erat porttitor tellus molestie tempor sit amet in lorem. Morbi vitae lobortis tellus. Quisque consequat luctus tincidunt. Nullam in felis urna, ut pretium mauris. Quisque quam quam, sodales non pretium sit amet, tristique vel lacus.</p> | |
| <h4>Lorem ipsum</h4> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nisl ultrices nunc tincidunt vehicula sollicitudin nulla ullamcorper. Donec eget orci eu lorem dapibus malesuada. Donec dui odio, blandit id iaculis nec, mollis non est. Sed sit amet eros id nisl molestie aliquam in vitae lacus. Nulla eget urna a lacus lacinia tristique ac in metus. Quisque vulputate quam in lectus luctus convallis. Quisque mattis sodales luctus. Vivamus a erat porttitor tellus molestie tempor sit amet in lorem. Morbi vitae lobortis tellus. Quisque consequat luctus tincidunt. Nullam in felis urna, ut pretium mauris. Quisque quam quam, sodales non pretium sit amet, tristique vel lacus.</p> | |
| <h5>Lorem ipsum</h5> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nisl ultrices nunc tincidunt vehicula sollicitudin nulla ullamcorper. Donec eget orci eu lorem dapibus malesuada. Donec dui odio, blandit id iaculis nec, mollis non est. Sed sit amet eros id nisl molestie aliquam in vitae lacus. Nulla eget urna a lacus lacinia tristique ac in metus. Quisque vulputate quam in lectus luctus convallis. Quisque mattis sodales luctus. Vivamus a erat porttitor tellus molestie tempor sit amet in lorem. Morbi vitae lobortis tellus. Quisque consequat luctus tincidunt. Nullam in felis urna, ut pretium mauris. Quisque quam quam, sodales non pretium sit amet, tristique vel lacus.</p> | |
| <h6>Lorem ipsum</h6> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nisl ultrices nunc tincidunt vehicula sollicitudin nulla ullamcorper. Donec eget orci eu lorem dapibus malesuada. Donec dui odio, blandit id iaculis nec, mollis non est. Sed sit amet eros id nisl molestie aliquam in vitae lacus. Nulla eget urna a lacus lacinia tristique ac in metus. Quisque vulputate quam in lectus luctus convallis. Quisque mattis sodales luctus. Vivamus a erat porttitor tellus molestie tempor sit amet in lorem. Morbi vitae lobortis tellus. Quisque consequat luctus tincidunt. Nullam in felis urna, ut pretium mauris. Quisque quam quam, sodales non pretium sit amet, tristique vel lacus.</p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment