Такие HTML элементы сайта, как ссылки, кнопки, формы ввода и т.п. часто имеют несколько состояний, таких как «на элемент наведен курсор мыши», «на элемент кликнули мышью», «ссылка была посещена», «элемент активен». В каждом состоянии элемент может иметь разные стили.
Стили состояний можно определить в CSS через псевдоклассы :hover, :active, :visited. Состояние selected (например, активный пункт меню) обычно задается добавлением класса .selected к соответствующему элементу.
Сервис автоверстки сайтов создаст CSS код для этих состояний, если следовать некоторым правилам подготовки дизайн макета.
Правила именования слоев
Теги применимы как в изображениям, так и к текстовым слоям.
- Используйте следующие теги для обозначения слоев, имеющих соответствующее состояние:
- #normal — обычное состояние,
- #hover — состояние при наведении на элемент курсора мыши,
- #visited — состояние уже посещенных ссылок (применимо только к ссылкам),
- #active — состояние при клике на элемент мышью,
- #selected — обозначает активный элемент, к нему будет добавлен класс .selected
- Слои с различными состояниями должны находиться в одной группе слоев (Layer group) и либо иметь одинаковое название (без учета тега, пример: «button#normal», «button#hover»), либо должны быть наложены один на другой. Либо, это могут текстовые слои, находящиеся в группе навигации (т.к. группе отмеченной тегом #nav) или являющиеся элементами списка (тег #ul), см. примеры PSD файлов и HTML/CSS кода ниже.
Создаваемый код
Если изображение может быть представлено в виде CSS3 кода, то программа верстки представит различия состояний в виде соответствующего CSS3 кода для каждого из них. Иначе, сервис HTML верстки создаст спрайт, состоящий из изображений для каждого из состояний. За счет этого переключение между различными состояниями всегда будет происходить мгновенно.
Примеры подготовки дизайн макетов и результаты их верстки:
