Оформление «битых» изображений

Битые изображения уродливы.

Но с помощью CSS можно дополнить информацию, и сделать их более выразительными.

Два факта о стилизации img-элемента

  1. Мы можем стилизовать типографику. Например, alt-атрибут (описание изображения).
  2. Мы можем изменить внешний вид поломанных изображений с помощью псевдоэлементов :before и :after. Они отобразятся, только когда изображение не загрузилось.

Практическая часть

Добавим html-разметку, где одно изображение будет битым, а второе рабочим.

img(src="" alt="Битое изображение")
img(src="http://prt56.ru/wp-content/uploads/2014/02/Xenu-Link-Sleuth.jpg" alt="Окно программы")

Оформление «битых» изображений с помощью псевдоэлементов

Покажем пользователю, что изображение не загрузилось, заменим стандартную иконку и дополним информацию об изображении его описанием (alt-аттрибутом). Для этого нужно использовать в css-файле выражение attr().

img::before {
    content: "\f1c5" " " attr(alt);
}

Результат

See the Pen Оформление битых изображений by Роман Волгасов (@RomanVolgasov) on CodePen.

Оставить комментарий

avatar
  Подписаться  
Уведомление о
В сети
printerest icon
Behance icon
CodePen icon
GitHub icon
© Roman Volgasov, 2018