Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve a simple scale effect in html5, with a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Principle

The ruler scale is divided into three kinds of centimeter scale, half centimeter scale and millimeter scale, so just draw three repeated linear gradients on one element.

Basic usage

Background-image: repeating-linear-gradient (90deg, red 0, red 50px, blue 0, blue 200px)

Simple understanding:

Red 0, red 100px means to render green from 0 to 100px, blue 0, blue 200px means to render red from 0 to 200px, and then repeat, so red actually sees 150px

Split step

1. Scale box

First of all, you have to draw a box with a width of 16cm, a ruler for 15cm, with a left and right margin of .5 cm:

.ruler {width: 16cm; height: 3cm; border: 1px solid $color-border;}

two。 Centimeter scale

The width of one scale is 5px, and then draw a scale every 1cm (separated by a transparent color):

Background-image: repeating-linear-gradient (90deg, $color-main 0, $color-main 5px, transparent 0, transparent 1cm)

Set the margin between the two sides of the ruler to .5 cm, and adjust the position of the background:

Background-position: .5 cm 0bot backgroundmuri repeat: no-repeat

It is found that the rightmost one is not aligned because the width of the last scale is also 5px, so we have to increase the width of the 5px to the ruler:

Width: calc (16cm + 5px)

Next, set the height of the scale to 30px:

Background-size: 100% 30px

Change the position to the bottom, because only the x-axis was set in the previous position, then the y-axis can be set to 100%:

Background-position: .5 cm 100%

3. Half centimeter scale

The steps are the same as the centimeter scale. You can make some small adjustments. Set multiple backgrounds to be separated by commas. Other attributes are also:

Background-image: "centimeter scale background", repeating-linear-gradient (90deg, $color-main 0, $color-main 2px, transparent 0, transparent .5 cm); background-size: "centimeter scale size", 100% 20px; / / height is 20px

There is an extra scale on the right, so the width of the background cannot be 100%, so you have to subtract it (depending on the actual situation):

Background-size: "centimeter scale size", calc (100-1cm) 20px

Found that the semi-scale is not in the middle of the scale, there is still a little deviation, you have to change the background position of the semi-scale:

Background-position: "cm scale position", (.5cm + 1.5px) 100%

4. Millimeter scale

The steps are the same as above:

Background-image: "centimeter scale background", "half centimeter scale background", repeating-linear-gradient (90deg, $color-main 0, $color-main 1px, transparent 0, transparent .1cm cm); background-size: "centimeter scale size", "half centimeter scale size", calc (100%-1.2cm) 10px; / / height is 10pxbackground-position: "centimeter scale position", "half centimeter scale position", calc (.5 cm + 2px) / / crop the background

5. Figures

Put the 0-15 number in the box:

0-15

The style can be added as follows:

Ruler {display: flex; justify-content: space-between; span {flex: 1; margin-top: 55px; text-align: center;}} Thank you for reading this article carefully. I hope the article "how to achieve a simple scale effect in html5" shared by the editor will be helpful to you. At the same time, I hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.