Техно-мир

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

HTML

Лицензия2010

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;
}

Вернуться назад