Главная » Сниппеты » Ленточки с текстом, на изображении с помощью CSS3

Ленточки с текстом, на изображении с помощью CSS3

Очень часто, на сайтах и блогах можно встретить украшенные разнообразными ленточками, с надписями и без. Что это? Простое украшательство, или же функциональный элемент пользовательского интерфейса? В большинстве случаев всё же, эти красивые ленточки выполняют те или иные полезные функции, выступают в роли подписей к картинкам, заостряют внимание посетителей на размещенных в теле ленты ссылки, и т.д и т.п.
Сегодня хочу предложить вам, небольшие фрагменты кода (сниппеты), для создания симпатичных ленточек с текстовым содержанием (ссылкой), размещённых на картинке, исключительно средствами CSS3, без использования дополнительных изображений!
В примере представлены два варианта оформления и реализации, различия увидите, посмотрев на исходники, там же найдёте и краткие пояснения. Остаётся выбрать подходящий и начать творить))).
 
Ленточка с текстом на изображении
 

Вариант №1

Вариант №2


Возникнут вопросы, предложения, или обнаружится какая-либо ошибка(чем чёрт не шутит), пишите в комментариях, только, убедительно прошу, ну не надо, раз за разом повторять, что в IE8 и еже с ним, не работает та или иная функция, поверьте афтар в курсе ))).

С Уважением, Андрей .

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

4 комментария
  1. Полезная штука, спасибо. Как раз делаю сайт из psd, а там ленточки есть. Буду знать, как реализовать теперь =)

    Ответить
  2. Андрей:

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

    Ответить
    • driver:

      Здравствуйте. Тему использовал бесплатную «Fashion», точнее лишь её базовый макет, а всё остальное допиливал под себя, поэтому и нет такой )))

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru