Как ЛЕГКО создать красивую ленту-нашивку на HTML и CSS

Сегодня вы узнаете, как создать красивую ленту-нашивку, иногда встречающуюся в формах подписки, на HTML и CSS буквально за пару минут. От вас не потребуется ни знания CSS. За вас все сделает специальный удобный бесплатный интернет-сервис.

Сейчас вы убедитесь в том, что все те эпитеты, которыми я наградил этот чудо-сервис, вполне уместны.

Итак, перейдите по этой ссылке. Вам откроется вот такая красивая страница с инструментом по созданию лент-нашивок:

Теперь давайте разберемся в том, как работает данный инструмент.

На большой темно синей области располагается превью (то бишь предварительный просмотр) нашей будущей ленты-нашивки. Изменяя различные параметры ленты (размер ленты, ее цвет, цвет текста и т.п.), они тут же в реальном времени будут отображаться и на превью, что весьма удобно.

Далее располагаются три блока настроек:

1. Ribbon Settings — Настройки ленты,
2. Text Settings — Настройки текста и
3. Ribbon Colors — Цвета ленты.

Тем, кто более или менее владеет английским языком, разобраться в настройках не составит труда. Для тех же, кто английским вообще не владеет или владеет слабо, внизу я приведу полный разбор полетов.

Ribbon Settings - Настройки ленты

• Ribbon Width — Ширина ленты. Передвигая ползунок, можно настроить необходимую длину (ширину) ленты-нашивки.

• Ribbon End Size — Размеры краев ленты. Настраивается аналогично ширине.

• Stitching & Shadows — Шёв и Тени. Если внимательно приглядеться, то сверху и снизу ленты можно увидеть пунктирную линию — шёв (Stitching), а по всему нижнему краю ленты располагается тень (Shadow). Данные параметры могут находится только в двух состояния: они либо включены, либо выключены.

Text Settings - Настройки текста

• Ribbon Message — Текст на ленте. На примере это: A Pure CSS Ribbon.

• Font Size — Размер текста.

• Text Color — Цвет текста. Если нажать по этой кнопке (равно как и по всем остальным кнопкам), то появится удобная панель для выбора цвета:
  
• Text Shadow Color — Цвет тени текста.

Ribbon Colors - Цвета ленты

• Front Top Gradient Color — Цвет градиента сверху.

• Front Bottom Gradient Color — Цвет градиента снизу.

• Ribbon Fold Color — Цвет оборотной стороны ленты (на превью это — маленькие треугольники между фронтальной частью ленты и ее краями).

• Ribbon End Color — Цвет краев ленты.

После того, как с настройками покончено, нужно скопировать HTML и CSS коды. Для этого есть соответствующие кнопки: Generate HTML и Generate CSS.

HTML-код нужно вставить туда, где вы хотите, чтобы отображалась созданная вами лента-нашивка, например, в сайдбар поверх формы подписки. Ну а CSS-код нужно вставить в файл таблиц стилей, например, style.css, который, как правило, лежит в папке с темой любого WordPress-блога.

Вот и все. Красивую ленту-нашивку вы делать научились. Поздравляю! Теперь вы сможете украсить ею свой любимый блог, например, вот так:

Интересный инструмент, не так ли?

Но этим дело не ограничивается. Есть еще два инструмента: Form Builder (Конструктор форм) и Icon Builder (Конструктор иконок):

О них будет рассказано в следующий постах. Так что подписывается на обновления блога (форма подписки после статьи).

Спасибо за внимание. Пока-пока!

P.S. Как вам данный инструмент по созданию красивых лент-нашивок?