Here is the code:<\/p>\n\n\n\n
![\"\"](\"https:\/\/lh6.googleusercontent.com\/Y5A4QVfvTEnZS3_zewkPeePNxuVJp-xG55HJK8G7hXeeosaon8PKmVB_tH3A3MaDdLk7gLOp-AjqsTPzSmWVqqsTXhg72YGdhfMu-3Mjdy2KZmeWGkK9lqCRwdHKKsrfVI5PXUpy\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/lh4.googleusercontent.com\/fewHjvlqaObgkR1C8_zOZjdmgWYUT5HdEJF9NG1UZ3BCngcQlPA8puQdPYIEIScn8NDPODFz4YtCUOd0y8OfCFd2eAlZptMEDW6JyZPUxYjZp4_Ik1twytkyjqaMOcWaSOdfOxNP\")
<\/figure><\/div>\n\n\n\nNotes:<\/p>\n\n\n\n
- It’s a partial one, without adding numbers, just the scale markers. You can scroll down for learning to add numbers further in this article.<\/li>
- Here, we only include 4 marks, but there can be many. Don’t forget you need 1 mark LESS than there are elements (e.g. 9 marks for 10mm)<\/li>
- It includes a ruler centerline.<\/li>
- NO Javascript and NO HTML elements for markers (useful if you have an endless ruler that is autogenerated when you drag or magnify it)<\/li><\/ul>\n\n\n\n
See Also: How To Add A Background Image In CSS<\/a><\/strong><\/p>\n\n\n\n
Create Changeable CSS Ruler with Background-Image<\/h2>\n\n\n\n
Let’s have a look at how we can make a changeable ruler with CSS background-image, a number of variables, and just a healthy amount of JavaScript for a visual editor.<\/p>\n\n\n\n
Our ruler will contain two sets of “ticks” – low and tall (the numbers will be determined later):<\/p>\n\n\n\n
Both sets of ticks start with the following Custom Properties:<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
We can generate a dynamic backdrop picture using these properties:<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
However, without background-repeat and background-size, we don’t see anything like a ruler!<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
That’s all there is to it! We only need to add background-attachment: fixed to keep the ruler in place when scrolling!<\/p>\n\n\n\n
See Also: Zoom images inside the container on mouseover using CSS<\/a><\/strong><\/p>\n\n\n\n
Adding up the numbers<\/h2>\n\n\n\n
Here We’ll make a list of the numbers:<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
In our ruler, each blank li>\/li> will represent a number. The number will appear at the bottom of the tall “ticks”:<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Based on the \u2014ruler2-space-property: we’ll utilise a CSS counter to fill in the numbers.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Creating an Editor<\/h2>\n\n\n\n
Let’s start by making a simple editor for our ruler.<\/p>\n\n\n\n
To update the Custom Properties, we’ll use a tiny JavaScript:<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Add <input>s to the <form id=”app”> in HTML, using name for the property to set, value for the value (surprise!) and data-suffix to add any suffix to the value:<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Repeat for each property that you wish to be editable.<\/p>\n\n\n\n
Ending Note: you can change the values according to your need in the above codes.<\/p>\n\n\n\n
See Also: Creating a Simple, Responsive Image Gallery Using CSS<\/a><\/strong><\/p>\n