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.
In some instances (for example, on a mobile device screen or while stretching your ruler to magnify), you may wish to produce extra markings between the ruler points dynamically. Simply use javascript to add a new class to your ruler cells, such as.big, and define a distinct set of mark backgrounds for that class. They will make a smooth transition.
Also, since we employ non-pseudo components – actual divs, real backgrounds, – this modular approach to ruler enables you dynamically adjust it with javascript.
See Also: How To Center An Image In CSS
Here is the code:
Notes:
- 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.
- NO Javascript and NO HTML elements for markers (useful if you have an endless ruler that is autogenerated when you drag or magnify it)
See Also: How To Add A Background Image In CSS
Create Changeable CSS Ruler with Background-Image
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.
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!
See Also: Zoom images inside the container on mouseover using CSS
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.
To update the Custom Properties, we’ll use a tiny JavaScript:
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.
See Also: Creating a Simple, Responsive Image Gallery Using CSS