17.09.14, 16:10
0 комментарий
  Уроки

Добавление надписи на изображение

Очень часто для оформления новостей на скриншоте выводят дополнительную информацию ввыиде текста или ссылок.
Данный пример покажет как наложить на картинку текст.

HTML

<div class="poster-main"><a href="#"><img src="uploads/news/news-JOTihVcTUj-1.png" alt="" title=""></a><em><span>Лицензия</span></em><strong><span><a href="#">2010</a></span></strong></div>


CSS

.poster-main {
position: relative;
}
.poster-main>em {
position: absolute;
top: 8px;
left: 0;
-webkit-box-shadow: 2px 2px 3px 0px rgba(41,50,50,0.59);
-moz-box-shadow: 2px 2px 3px 0px rgba(41,50,50,0.59);
box-shadow: 2px 2px 3px 0px rgba(41,50,50,0.59);
}
.poster-main>em>span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
text-align: center;
background: #fff;
font-size: 12px;
font-style: normal;
font-weight: bold;
padding: 2px 4px 2px 4px;
color: #DE5D5D;
cursor: default;
}
.poster-main>strong {
position: absolute;
bottom: 10px;
left: 110px;
}
.poster-main>strong>span>a {
color: #fff;
}
.poster-main>strong>span {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
text-align: center;
background: #DE5D5D;
font-size: 12px;
font-style: normal;
font-weight: bold;
padding: 2px 4px 2px 4px;
color: #fff;
}

Напишите своё мнение