Стилизация сломанных изображений (broken image) на CSS

Привет всем! Сегодня я расскажу вам еще об одной замечательной возможности в CSS, это стилизация сломанных изображений (broken image). Я уверен каждый встречал на просторах интернета такое изображение

Что-то пошло не так, это сломанное изображение

Это отображение по умолчанию, но можно исправить это ужасное отображение изображения применив всего несколько стилей CSS. Прежде чем мы приступим, вам нужно узнать о двух особенностях тега img.

Два факта об элементе img

Чтобы понять как мы можем стилизовать сломанные изображения, вы должны знать что:

1. Мы можем писать стили типографии в правилах для img. И эти стили будут применены к альтернативному тексту изображения, если он будет показываться, и не будут влиять на картинку.

2. Элемент img — это заменяемый элемент. Любой элемент чей внешний вид и размеры могут задаваться с помощью внешних ресурсов (img, object, button, input, textarea и т.д.) является заменяемым. У картинки это к примеру width и height атрибут. У таких элементов как правило не работает псевдоэлементы :before и :after, но когда изображение ломается или не загружается, псевдоэлементы могут отображаться.

Исходя из этих двух фактов мы можем прописать стили для img тэгов, и они применятся только когда изображения будут не доступны. В прошлой статье я рассказывал о создании tooltip на css с помощью :after и :before, рекомендую ознакомится с ней, если вы еще не читали ее.

Ниже я приведу несколько примеров стилизации, html и css код.

Приступим к практике

Для начала нам нужно добавить на страницу картинку с битой ссылкой.

Далее опишем CSS стили для broken-img1 и broken-img2.

Результат наших стараний.

broken_image

Вот и все, совсем немного кода нам понадобилось для реализации задачи. Если вам не совсем понятно, что я описал в CSS файле, я предлагаю посмотреть короткое видео где я подробно рассказал процесс создания.

Видео урок

Видео урок
comments powered by HyperComments