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

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


JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

0 комментариев на «“CSS – Стилизация битых изображений”»

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