Стрічки з текстом, на зображенні за допомогою CSS3

47

Дуже часто, на сайтах і блогах можна зустріти зображення прикрашені різноманітними стрічками з написами та без. Що це? Просте прикрашення, або ж функціональний елемент інтерфейсу? В більшості випадків все ж, ці красиві стрічки виконують ті чи інші корисні функції, виступають у ролі підписів до картинок, загострюють увагу відвідувачів на розміщених у тілі стрічки посилання, і т. д і т. п.
Сьогодні хочу запропонувати вам, невеликі фрагменти коду (сніппети), для створення симпатичних стрічок з текстовим змістом (посиланням), розміщених на картинці, виключно засобами CSS3, без використання додаткових зображень!
У прикладі наведено два варіанти оформлення і реалізації, відмінності побачите, подивившись на джерело, там же знайдете і короткі пояснення. Залишається вибрати підходящий і почати творити))).

Ленточка с текстом на изображении

Варіант №1

Варіант №2


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

З Повагою, Андрій .

Буду вдячний, якщо поділитеся посиланням на запис в своїх соціальних мережах: