What are CSS Image Rulers to Follow

css image rulers

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:


  • 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

Share and Enjoy !

0 0