2014
20
Сен

Изображения с ленточками





Иногда хочется выделить изображение красивой надписью или просто ленточкой. На ленточке можно размещать подписи над изображением, дополнительные ссылки на объект или просто вы хотите заострить внимание посетителя сайта.

Получить такой эффект можно применив различные свойства CSS, ваш творческий потенциал и не используя изображения.

Для базового блока обязательно используем свойство position: relative; , чтобы в дальнейшем четко разместить ленточку с надписью на изображении.

На странице HTML в <body> документа прописываем код.

<div class="visual"> <img src="images/internet.jpg" alt="" width="400" height="298" /> <a href="http://valvas.ru/" class="corner"><span>&nbsp;</span>valvas.ru</a> </div>

Прописываем свойства.Я думаю,что здесь для вас будет все понятно.

.visual a { text-decoration: none;/*отменяем подчеркивание для ссылки*/ cursor: pointer;/*форма курсора (рука)*/ } /* Стили базового блока с картинкой */ .visual{ margin:0 auto; position: relative;/*позиционирование блока с картинкой*/ width: 400px; float:left; padding:15px; } /* Стили картинки внутри блока */ .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: 20px;/*расстояние от верхнего края родительского элемента до верхнего края дочернего элемента*/ left: 6px;/*расстояние от левого края родительского элемента до левого края дочернего элемента. */ 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); }