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

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

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

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

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

broken image 3 - 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;
}

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

  1. @devarts пишет:
    17.01.2017 в 01:06

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


    что за тизеры?

  2. @Oslan Muhoboev пишет:
    12.01.2017 в 17:54

    Где тизеры?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *