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

ноября 11 12:25 2012

Сегодня вы узнаете, как создать красивую ленту-нашивку, иногда встречающуюся в формах подписки, на HTML и CSS буквально за пару минут. От вас не потребуется ни знаний HTML, ни знания 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. Как вам данный инструмент по созданию красивых лент-нашивок?

write a comment

Комментариев нет

No Comments Yet!

You can be the one to start a conversation.

Add a Comment

Your data will be safe! Your e-mail address will not be published. Also other data will not be shared with third person.
All fields are required.