CSS - Стилизация битых изображений

CSS - Стилизация битых изображений


Всем владельцам сайтов известна ситуация, когда, например, такая картинка, как на скриншоте удаляется с сервера по самым разным причинам и на ее месте остается очень некрасивый кусок! В данной статье мы научимся подменять битые картинки

CSS - Стилизация битых изображений


Согласитесь, ужасно выглядит обрубок на скриншоте выше. Его, несколькими строчками CSS кода легко превратить в приятно читаемый блок:

CSS - Стилизация битых изображений


img {  
min-height: 50px;

width: 100%;
height: auto;
display: block;
position: relative;
}
img:before {
content: " ";
display: block;

position: absolute;
top: -10px;
left: 0;
height: calc(100% + 10px);
width: 100%;
}

img:after {
content: "\f127" " Битая картинка " attr(alt);
display: block;
position: absolute;
top: 5px;
left: 0;
width: 100%;
text-align: center;
}


Понравилась статья "CSS - Стилизация битых изображений" из раздела Веб разработка » HTML/CSS? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 2 •  Просмотров: 1896   Дата: 18-апр-2016, 21:59

Похожие статьи

Комментарии


Гости
Где тизеры?
(12 января 2017 17:54) • цитировать • •

admin
Цитата: Oslan Muhoboev
Где тизеры?

что за тизеры?
(17 января 2017 01:06) • цитировать • •
b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика