Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

Вариант №1

Вариант №2


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

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

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

Всего комментариев: 4

  • Анастасия: 2 сентября, 2014 в 18:02

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

    Ответить
    • driver: 2 сентября, 2014 в 22:29

      Удачи, во всех ваших начинаниях )))

      Ответить
  • Андрей: 3 октября, 2014 в 15:39

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

    Ответить
    • driver: 5 октября, 2014 в 21:40

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

      Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>