Фигурные ленты - довольно оригинальный элемент дизайна сайта, который может использоваться для навигации, для анонсов, для украшения, для объявлений и для многого другого
Конструктор фигурных лент поможет вам создать свою собственную ленту, непохожую на остальные. С помощью конструктора фигурных лент, вы сможете сделать ленту для сайта необходимого размера, цвета и содержания. Также вы сразу получите готовый код для вставки на свой сайт
Как использовать конструктор фигурных лент для сайта
Конструктор предоставляет всего 12 параметров, настраивая которые вы сможете полностью подогнать ленту под нужды сайта
Управление шириной ленты
Настройка кончиков ленты
Настройка надписи на ленте и регулировка шрифта: размер, цвет, тени для текста (если необходимо)
Управление тенью и окантовкой
Настройка цвета самой ленты с помощью градиентов: верхний градиент, нижний градиент, настройка цвета внутренних углов и цвет кончиков ленты
Окончательно подогнав вид будущей ленты для сайта вы должны нажать на две кнопки, чтобы получить готовый код для вставки на сайт.
Кнопка Создать HTML сгенерирует HTML код для вставки в шаблон сайта, в то место где вы пожелаете видеть созданную ленту
Кнопка Создать CSS сгенерирет стили вашей ленты, которые вы должны скопировать в сплывающем окне и вставить в любое место файла таблицы стилей вашего сайта. Обычно, чтобы не путаться скопированный код ставят в самый низ
Если вам нужны ленты разных цветов и с разным оформлением, то для каждого варианта оформления нужно обязательно получать готовый стиль! HTML код в данном случае будет для всех видов лент одинаковый, если надписи на лентах будут одинаковыми. В противном случае вам придется заменять участок кода, отвечающий за содержание. В примере он выделен слово ЗАМЕНЯЕМЫЙ ТЕКСТ
Код
<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>ЗАМЕНЯЕМЫЙ ТЕКСТ</h1></strong><div class="ribbon-stitches-bottom"></div></div>
Также обратите внимание на то, что в HTML коде текст ленты взят в теги аш 1
Если у вас на странице, куда вы устанавливаете ленту уже прописан тег
то из полученного в конструкторе кода нужно удалить данный тег или заменить необходимым. Пример
Код
<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h2>ЗАМЕНЯЕМЫЙ ТЕКСТ</h2></strong><div class="ribbon-stitches-bottom"></div></div>
Если у вас есть знания в HTML и CSS, то полученный на конструкторе код даже после вставки в шаблоны сайта вы можете править под себя, настраивая ленту как вам угодно
