Such HTML elements of web page as links, buttons, input forms, etc. often have different visual states for events like “element is hovered by\u00a0 mouse pointer”, “element is clicked”, “link was visited”, “element is active”.\u00a0 For every state layer may have different CSS styles.<\/p>\n
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.<\/p>\n
PSD to HTML conversion service will automatically create CSS code<\/a> for these styles in case you prepare PSD template is a specific way which is described below.<\/p>\n Following tags may be added to names of both image and text layers.<\/p>\n 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.<\/p>\n Examples of PSD files and results of their conversion:<\/p>\n Such HTML elements of web page as links, buttons, input forms, etc. often have different visual states for events like “element is hovered by\u00a0 mouse pointer”, “element is clicked”, “link was visited”, “element is active”.\u00a0 For every state layer may have different CSS styles.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-577","post","type-post","status-publish","format-standard","hentry","category-all"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\tLayers naming convention<\/h6>\n
\n
\n
\nFor 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.<\/li>\n<\/ol>\nGenerated code<\/h6>\n
\n