Картинки миллиметр

Картинки миллиметр

Щелчок по линейке развернёт её на весь экран:


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 к прочтению статьи

Размеры этого сантиметра рассчитываются браузером самостоятельно. Только Mozilla Firefox справился на пять с минусом — маленькие чёрточки всё же иногда съезжают. Кривое отображение в Google Chrome обусловлено неверным округлением px в сантиметры. IE не поддерживает единицу измерения ch.

На создание этой линейки меня сподвигла бытовая ситуация: нужно было узнать здесь и сейчас размер обуви ребёнка, а сантиметра не было.

Код очень прост:

<style> #ruler {   overflow: hidden;   font-family: monospace;   width: calc(100% - (1cm - .5ch));   height: 2cm;   line-height: 2cm;   padding-left: calc(1cm - .5ch);   word-spacing: calc(1cm - 2ch);   background: rgba(64,199,129,1) repeat-x;   background-image:    linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px),    linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px),    linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px),    linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px),    linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px),    linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px);   background-position: 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%;   background-size: .1cm 10%, .5cm 20%, 1cm 30%, .1cm 10%, .5cm 20%, 1cm 30%; } #ruler span {   word-spacing: calc(1cm - 3ch); } #ruler span span {   word-spacing: calc(1cm - 2.5ch); } </style>  <div id="ruler">1 2 3 4 5 6 7 8 <span><span>9 10</span> 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50</span></div>



Источник: shpargalkablog.ru


Добавить комментарий