Create CSS for hover, active, visited, selected states of layers

Such HTML elements of web page as links, buttons, input forms, etc. often have different visual states for events like “element is hovered by  mouse pointer”, “element is clicked”, “link was visited”, “element is active”.  For every state layer may have different CSS styles.

CSS provides pseudo-classes :hover, :active, :visited to define styles for different states. State ‘selected’ (for example, active item in navigation) is usually defined by ‘.selected’ class on the corresponding element.

PSD to HTML conversion service will automatically create CSS code for these styles in case you prepare PSD template is a specific way which is described below.

Layers naming convention

Following tags may be added to names of both image and text layers.

1. Use following tags to mark layers which represent corresponding state:
   • #normal – usual state of element,
   • #hover – state when element is hovered by mouse cursor,
   • #visited – state for already visited links (applicable only to links, see #link tag),
   • #active – state when element is get clicked,
   • #selected – specifies active element. Class .selected will be added to element marked with this tag.
2. Layers in different states should be located within the same layer group. They should either have same name (not taking tag itself into account, for example:  “button#normal”, “button#hover”), or should overlay each other visually.
   For text layers, it may be either layers withing navigation group (i.e. group marked with #nav tag), or layers within unordered list (tag #ul). See example PSD files and HTML/CSS code generated from them below.

Generated code

If image can be represented by CSS3 code, then conversion engine will represent different states by corresponding CSS code. Otherwise, conversion service will generate image sprite with images for every state – as a result, switching between states will always be performed immediately.

Examples of PSD files and results of their conversion:

• Psd file, HTML/CSS code , ZIP archive with source code.
• Psd file , HTML/CSS code, ZIP archive with source code.