esCode.Ru
🎉 Modded by esCode.Ru 🖇️ Скрипты для uCoz 🎨 Шаблоны для uCoz 🧩 HTML шаблоны 🖌️ Графика 🚲 Интересные решения 📰 Статьи ❤️ Авторство esCode.Ru

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

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

Вариант №1



HTML

Код
<div class="visual">
<img src="http://uway.ucoz.com/materials/1/1/soook.png">
<a href="http://uway.ucoz.com/" class="corner"><span></span>uWay.uCoz.Com</a>
</div>


CSS

Код
a {
text-decoration: none;
cursor: pointer;
}
/* Стили базового блока с картинкой */
.visual{
margin:0 auto;
position: relative;
width: 300px;
}
/* Стили картинки внутри блока */
.visual img {
float: left;
width: 100%;
border: 1px solid #cacaca;
box-shadow:2px 2px 5px #333030;
}
/* Стили ленты */
.corner {
height: 0px;
border: 14px solid rgba(12, 151, 0, 0.67);
border-right-color: transparent;
box-shadow: -0px 5px 5px -5px #000;
font: 12px/0 'PT Sans', arial, sans-serif;
color: #fef;
top: 9px;
left: -9px;
position: absolute;
padding: 0 14px 0 5px;
z-index: 1;
}
/* Меняем цвет текста ленты при наведении*/
.corner:hover{
color: #fff;
}
/* Стили нижненго уголка ленты */
.corner span {
content: "";
position: absolute;
top: 13px;
left: -14px;
width: 0;
height: 0;
text-decoration: none;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-top-color: rgba(0, 151, 0, 0.9);
}


Вариант №2



HTML

Код

<div class="visual">
<a href="###">
<img src="http://uway.ucoz.com/materials/1/1/soook.png">
</a>
<a href="http://uway.ucoz.com/" class="corner"><span></span>uWay.uCoz.Com</a>
</div>


CSS

Код
a {
text-decoration: none;
cursor: pointer;
}
/* Стили блока с картинкой */
.visual{
margin:0 auto;
position: relative;
width: 300px;
}
/* Стили картинки внутри блока */
.visual img {
float: left;
width: 100%;
border: 1px solid #cacaca;
-webkit-box-shadow: 4px 4px 8px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 4px 4px 8px 0px rgba(50, 50, 50, 0.75);
box-shadow: 4px 4px 8px 0px rgba(50, 50, 50, 0.75);
}
/* Стили ленты */
.corner {
background: rgba(170,78,184,0.85);
box-shadow: -0px 5px 5px -5px #000;
color: #fff;
position: absolute;
font: 12px/26px 'PT Sans', arial, sans-serif;
z-index: 1;
top: 9px;
left: -9px;
padding: 0 24px 0 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/* Стили уголка ленты */
.corner span {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
text-decoration: none;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-top-color: #8b3c97;
}


Возникнут вопросы, предложения, или обнаружится какая-либо ошибка(чем чёрт не шутит), пишите в комментариях, только, убедительно прошу, ну не надо, раз за разом повторять, что в IE8 и еже с ним, не работает та или иная функция, поверьте афтар в курсе ))).
-D-I-N-I-S-
24.02.16 в 18:30
939
0
Источник
Текст скопирован!