Использование наборов изображений в HTML5
23 июня 2018 | Опубликовано в css | Нет комментариев »
Если вы регулярно используете наборы изображений CSS3 при создании веб-сайтов, вам может быть интересно, можно ли с их помощью как-то упростить создание меню в HTML5. Да, это возможно, хотя и не всегда выглядит обоснованным, о чем мы расскажем дальше.
Если использовать набор изображений для создания меню в HTML5, нужно создать элемент навигации, чтобы показать браузеру, что это основной раздел навигации. Теоретически в этом случае нет необходимости в использовании элемента ненумерованного списка и его элементов для оборачивания элементов ссылок, можно просто оставить ссылки со вложенными элементами изображений:
<nav class="sprites" <a href="#"> <img src="sprite-panel.png" alt="RSS"> </a> <a href="#"> <img src="sprite-panel.png" alt="About"> </a> <a href="#"> <img src="sprite-panel.png" alt="Book Mode"> </a> </nav>
Это также упростит нужный код CSS:
nav.sprites { height: 27px; } nav.sprites img { position: absolute; opacity: 0.4; width: 150px; height: 76px; transition: all 0.5s linear; } nav.sprites a:hover img { opacity: 1; } img[alt="RSS"] { clip: rect(54px,21px,76px,0px); } img[alt="About"] { clip: rect(54px,47px,76px,25px); } img[alt="Book Mode"] { clip: rect(54px,75px,76px,48px); }
Но автор не считает правильным всегда избавляться от структуры списка в элементе навигации. Мы бы не рекомендовали удалять элемент ненумерованного списка и его элементы, если меню ссылается на связанные друг с другом страницы. Особенно если со временем такое меню может стать более сложным, например, обзавестись подпунктами. Хотя для очень простого и небольшого меню, как в примере выше, в котором пункты меню не связанны друг с другом и значительное усложнение такого меню не видится возможным в будущем, использование только элемента навигации со вложенными элементами ссылок с элементами изображений может оказаться вполне обоснованным и достаточным.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
- Last year, ErisX closed a round of financing for Series B, managing to raise over million from such companies as Bitmain, ConsenSys, Fidelity Investments, Nasdaq Ventures, and Monex Group.
- Выбор брокера имеет огромное значение, так как Вам с этим брокером непосредственно работать.
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
Самые комментируемые
- 50 прикольных страниц ошибки 404
90
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
73
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- 12 сайтов, на которых можно продавать свои работы
62
- Дизайн схемы проезда
62
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
58