Create a ruler cell div, add background pictures for markers (linear-gradient is OK), and specify a percent location for each marker. This can only be done once in your CSS, and if you utilize the same picture, there will be just one request for that file; moreover, if you use linear-gradient, there will be no extra requests at all. Because you select a % location, you may stretch the ruler as much as you like and it will still look great.
See Also: How To Center An Image In CSS
Here is the code:
- 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.
- 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)
- It includes a ruler centerline.
See Also: How To Add A Background Image In CSS
Create Changeable CSS Ruler with Background-Image
Our ruler will contain two sets of “ticks” – low and tall (the numbers will be determined later):
Both sets of ticks start with the following Custom Properties:
We can generate a dynamic backdrop picture using these properties:
However, without background-repeat and background-size, we don’t see anything like a ruler!
That’s all there is to it! We only need to add background-attachment: fixed to keep the ruler in place when scrolling!
Adding up the numbers
Here We’ll make a list of the numbers:
In our ruler, each blank li>/li> will represent a number. The number will appear at the bottom of the tall “ticks”:
Based on the —ruler2-space-property: we’ll utilise a CSS counter to fill in the numbers.
Creating an Editor
Let’s start by making a simple editor for our ruler.
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:
Repeat for each property that you wish to be editable.
Ending Note: you can change the values according to your need in the above codes.