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

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

Но с помощью 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.

Интересное по теме…

Как и зачем использовать формат изображения WebP? Вольный перевод статьи Ire Aderinokun «Why and how to use WebP images today» Формат WebP был разработан корпорацией Google в 2010 году. Он был создан как хорошая альтернатива стандартным форматам PNG и JPG. Зачем нужен WebP? WebP — невероятно полезный формат. Он предлагает более высокую компрессию изображения без потери качества. ...
Иконки файлов на CSS В профиле colorswall на гите появился репозиторий с иконками для веб-проектов выполненных на CSS. Как подключить? Подключите css-файл css-file-icons.css на страницу с HTML или установите через npm: npm i css-file-icons --save а затем подключите css командой build. Как использовать? Расширения файлов .fi....

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

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