Подсказка: Помните о стилях альтернативного текста

Подсказка: Помните о стилях альтернативного текста

От автора: атрибут alt внутри тэга img обеспечивает альтернативный контент для пользователей, которые не могут скачивать изображения, или тех, у кого они отключены. Мы все время пользуемся этим атрибутом, чтобы сделать свой контент более доступным, но вы задумывались когда-нибудь, как на самом деле это смотрится?

Мы собираемся использовать в качестве примера шаблон электронной почты, созданный в предыдущем учебнике, но данные принципы так же применимы и к браузерному веб-дизайну.

Вот как будет выглядеть файл с выключенными изображениями:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Понятно, что альтернативный текст непривлекателен — особенно ссылки. Но кое-что мы можем с ним сделать. В основном заголовке мы сильно увеличим текст и сделаем его темно-синим вместо черного. Для этого нужно добавить родительскому элементу (в данном случае ячейке) стили. Они же затем будут применены к тэгам alt внутри этой ячейки. Вот она:

Назначим стили тексту, чтобы он смотрелся так:

И определим стили ссылкам социальных сетей, чтобы те стали белыми:

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

Автор: Nicole Merlin

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree