Как сделать пунктирную линию в тильде

Как добавить направляющие линии в Zero Block?

В режиме редактирования Zero Block нажмите справа вверху на «. » (три точки) — откроется панель меню. Для добавления направляющих нажмите на Guides: Hide/Show:

Чтобы задать горизонтальную направляющую, выберите пункт Guides: Add Horizontal, чтобы задать вертикальную — Guides: Add Vertical.

Похожие вопросы

• Как добавить стрелку в Zero Block?
• Есть ли слои в Zero Block?
• Как в Zero Block настроить увеличение изображения по клику?
• Что такое Tooltip (тултип) в Zero блоке?
• Как сделать анимацию на мобильных в Zero Block?

Как сделать горизонтальную линию?

Горизонтальная линия делается с помощью свойства border-bottom, которое применяется обычно к элементу . Это свойство добавляет линию снизу заданной толщины и стиля (пример 1). Чтобы не «портить» все , используем класс line , и уже для класса указываем свойство border-bottom . Сам остаётся пустым, никакое содержимое в нём не требуется, только стилевое оформление.

Пример 1. Использование border-bottom

Результат данного примера показан на рис. 1. Здесь мы делаем линию красного цвета толщиной в один пиксель. Сама линия при это занимает всю доступную ширину.

Рис. 1. Вид линии, созданной через border-bottom

См. также

• border-bottom
• Оформление ссылок
• Точки между слов

Описание и примеры стандартных функций SVG

Маски, градиенты, фильтры, анимация, вертикальный и горизонтальный parallax

Анимация рисования линии

Опубликовано 23 декабря 2016 автором Alexander_T

В последнее время набирают популярность анимационные эффекты рисования линий с чистого листа. Магические картинки анимации игровой консоли или дядьки в кресле копируются с сайта на сайт. Конечно это круто выглядит и наверняка у вас появилось желание сделать, что нибудь подобное для своего сайта. Для этого есть несколько плагинов реализации эффекта анимации линий. Но, я не буду перечислять их, объяснять как они работают, как плагины можно “заточить” под себя. При желании всё это можно найти.
Задача данной статьи иная – понять, как реализуется эффект анимации, отчего зависит направление, последовательность и продолжительность рисования линий.
Почему один файл SVG можно заставить отрисовываться, а другой нет.
Далее будет логично заняться более интересными вещами – последовательной и параллельной анимацией нескольких фрагментов изображения, реализацией плавного преобразования одной векторной картинки в другую.

Немного теории.

Чтобы получить эффект анимации рисования линии с нуля до конца, нужно прописать в стилях анимируемого объекта для начальной точки:

• stroke-dasharray = getTotalLengtht
• stroke-dashoffset = getTotalLengtht
• добавить команду анимации для линии или пути
• для конечной точки линии выполнить условие – stroke-dashoffset = “0”

—>
stroke-dasharray – атрибут, отвечающий за пунктирную линию. Например: stroke-dasharray: 10px 10px; Первая цифра – длина линии, вторая цифра – длина пробела. Если задана только одна цифра – stroke-dasharray: 10px, то длина и пробел будут равны. Я пользуюсь этим свойством, так как проще анимировать один параметр, чем два.
stroke-dashoffset – атрибут, отвечающий за отступ от начала линии или пути.
getTotalLengtht – команда, которая позволяет вычислить полную длину пути.
Из примера выше видно, что с начала анимации – from отступ равен полной длине пути, затем он уменьшается to=”0″ до нуля. В результате рисуется линия от нуля до конца, (полная длина).

Анимация рисования линии с чистого листа

Для простоты освоения этого метода найдите или сами напишите SVG файл, где есть только один . Присвойте ему уникальный идентификатор
Следующий шаг – нужно измерить длину path в вашем файле, который вы хотите анимировать. Для этого я подготовил Html файл, в который вы можете скопировать на место существующего пути, патч из своего файла SVG, затем нажав на кнопку “Total” узнать длину пути, которую необходимо подставить в атрибуты строки патча: stroke-dasharray = “70” и stroke-dashoffset = “70” Ниже код этого Html файла.

< title >Измерение длины пути < / title >
< svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns : xlink = "http://www.w3.org/1999/xlink" xmlns : ev = "http://www.w3.org/2001/xml-events" width = "100%" height = "100%" >
< path id = "check" fill = "none" stroke = "green" stroke - width = "1" d = "M 34.6 14.6 L 21 28.2 L 15.4 22.6 L 12.6 25.4 L 21 33.8 L 37.4 17.4z" / >
function TotalLength ( ) < var path = document . querySelector ( '#check' ) ; var len = Math . round ( path . getTotalLength ( ) ) ; alert ( "Длина пути - " + len ) ;

Обратите внимание, что наименование идентификатора вашего патча

Следующий шаг – добавление анимации в SVG файл для плавного уменьшения параметра атрибута stroke-dashoffset с максимального значения до нуля. Обратите внимание, что при вложениии анимации в одиночный тег его нужно преобразовать в двойной. Подробнее здесь.

< svg id = "svg1" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns : xlink = "http://www.w3.org/1999/xlink" width = "200" height = "200" viewBox = "0 0 126 126" >
< title >animation logo picasa < / title >
< path id = "check" fill = "none" stroke = "black" stroke - dasharray = "600" stroke - dashoffset = "600" d = "M113.5 57.7l-8.5-11.4 . 86.3 72.8z" >
< animate id = "p1" attributeName = "stroke-dashoffset" begin = "svg1.click" values = "600; 0" dur = "10s" repeatCount = "1" fill = "freeze" calcMode = "linear" / >
< text x = "98" y = "17" font - size = "11" font - family = "Ariel" text - anchor = "middle" fill = "green" stroke = "grey" stroke - width = "0.5px" > Click me < / text >

Для лучшего понимания я освободил код от лишних подробностей. Полную рабочую версию можете забрать по кнопке.

В команде анимации значения параметра, в нашем случае это изменение – stroke-dashoffset можно указывать по разному, как from=”600″ to=”0″ ,
так и другим способом – values=”600;0″
Последний способ более удобен, так как можно указать больше двух значений, например: values=”600; 0; 600″
Это понадобится для реализации двойного эффекта рисования линий: сначала появление изображения, затем его плавное исчезновение.
begin=”svg1.click” – начало анимации по клику мышки на любом месте SVG полотна, так как ему присвоен идентификатор – см. 1 строку кода выше.
fill=”freeze” – изображение “замораживается” после окончания анимации.
calcMode=”linear” – задается равномерность анимации, то есть скорость зависит только от заданного времени продолжительности анимации dur=”10s” и длины пути.

Чередование направления рисования линии

Идея проста в реализации. Если мы научились анимировать рисование линии с нуля до полной длины, то можно повернуть процесс и в обратную сторону. Заставить линию плавно уменьшать длину от максимума до нуля. Для этого нужно, чтобы
stroke-dashoffset изменялся от нуля до полной длины линии values=”0;700″ , тем самым скрывая её полностью. В нашем примере совмещены две последовательные анимации – рисование линий от нулевой длины до максимальной и от максимальной длины до нулевой. Соответственно анимация атрибута stroke-dashoffset должна быть зеркальной – values=”700;0;700″ Ниже пример кода анимации.

Как сделать горизонтальную пунктирную линию с рисунком?

Сделать горизонтальную пунктирную линию с изображением ножниц.

Решение

В квитанциях, купонах или газетах порой можно встретить пунктирную линию с изображением ножниц и надписью «линия отреза». Такая фраза говорит, что надо отрезать этот кусок по приведённой линии, чтобы в дальнейшем использовать по назначению. На сайтах подобные инструкции не имеют никакого смысла, никто тыкать в монитор ножницами в здравом уме не станет. Но можно использовать горизонтальную линию в качестве элемента дизайна страницы, к примеру, для визуального отделения одного материала от другого.

Наша линия будет содержать три элемента: саму пунктирную линию, рисунок половины ножниц и надпись «линия отреза». На рис. 1 показано, что хотелось бы получить в итоге.

Рис. 1. Горизонтальная линия

В идеале, линия должна формироваться единственным тегом , а всё остальное возлагается на стили, включая вывод рисунка и надпись.

Для начала в HTML вставим основу линии.

Поскольку ножницы выводятся под линией, то воспользуемся свойством border-top . Если бы рисунок выводится над линией, соответственно потребуется border-bottom . Сам рисунок ножниц имеет высоту 37 пикселов, отнимем один пиксел на толщину линии, разделим полученное значение пополам и получим 18 пикселов видимой части. Это число будет высотой блока и значением для сдвига фона вверх.

.line < border-top: 1px dashed #000; /* Параметры линии */ height: 18px; /* Высота блока */ background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */ >

В свойстве background указывается путь к рисунку, отменяется повторение фона и задаётся сдвиг вправо на 10px и вверх на 18px. Сдвиг по вертикали нужен, потому что у нас на картинке целые ножницы, а не их половинка (рис. 2).

Рис. 2. Изображение ножниц для линии

Осталось добавить текст под линией. Воспользуемся псевдоэлементом :after , в сочетании со свойством content он позволяет выводить текст после элемента. Добавляем :after к классу line .

.line:after

Окончательно выравниваем текст по центру линии через свойство text-align и настраиваем вид текста (пример 1).

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Текст до
 Текст после
  

Браузеры

Браузер IE6-7 не поддерживает псевдоэлемент :after , поэтому текст под линией в нём выводиться не будет.