{"id":577,"date":"2017-09-18T20:49:05","date_gmt":"2017-09-18T20:49:05","guid":{"rendered":"https:\/\/psd2htmlconverter.com\/en\/blog\/?p=577"},"modified":"2018-01-02T21:50:47","modified_gmt":"2018-01-02T21:50:47","slug":"create-css-for-hover-active-visited-selected-states-of-layers","status":"publish","type":"post","link":"https:\/\/blog.psd2htmlconverter.com\/en\/2017\/09\/18\/create-css-for-hover-active-visited-selected-states-of-layers\/","title":{"rendered":"Create CSS for hover, active, visited, selected states of layers"},"content":{"rendered":"<p>Such HTML elements of web page as links, buttons, input forms, etc. often have different visual states for events like &#8220;element is hovered by\u00a0 mouse pointer&#8221;, &#8220;element is clicked&#8221;, &#8220;link was visited&#8221;, &#8220;element is active&#8221;.\u00a0 For every state layer may have different CSS styles.<!--more--><\/p>\n<p>CSS provides pseudo-classes :hover, :active, :visited to define styles for different states. State &#8216;selected&#8217; (for example, active item in navigation) is usually defined by &#8216;.selected&#8217; class on the corresponding element.<\/p>\n<p><a href=\"http:\/\/psd2htmlconverter.com\/ru\/convert-psd-to-html\/\" target=\"_blank\" rel=\"noopener\">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<h6>Layers naming convention<\/h6>\n<p>Following tags may be added to names of both image and text layers.<\/p>\n<ol>\n<li>Use following tags to mark layers which represent corresponding state:\n<ul>\n<li>#normal &#8211; usual state of element,<\/li>\n<li>#hover &#8211; state when element is hovered by mouse cursor,<\/li>\n<li>#visited &#8211; state for already visited links (applicable only to links, see #link tag),<\/li>\n<li>#active &#8211; state when element is get clicked,<\/li>\n<li>#selected &#8211; specifies active element. Class .selected will be added to element marked with this tag.<\/li>\n<\/ul>\n<\/li>\n<li>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:\u00a0 &#8220;button#normal&#8221;, &#8220;button#hover&#8221;), or should overlay each other visually.<br \/>\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>\n<h6>Generated code<\/h6>\n<p>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 &#8211; as a result, switching between states will always be performed immediately.<\/p>\n<p>Examples of PSD files and results of their conversion:<\/p>\n<ul>\n<li><a href=\"http:\/\/psd2htmlconverter.com\/files\/NavWithSelectedImageState.psd\">Psd file<\/a>, <a href=\"http:\/\/psd2htmlconverter.com\/files\/NavWithSelectedImageState\/index.html\" target=\"_blank\" rel=\"noopener\">HTML\/CSS code<\/a> , <a href=\"http:\/\/psd2htmlconverter.com\/files\/NavWithSelectedImageState.zip\">ZIP archive with source code<\/a>.<\/li>\n<li><a href=\"http:\/\/psd2htmlconverter.com\/files\/NavWithCssHoverImageAndHoverText.psd\">Psd file<\/a> , <a href=\"http:\/\/psd2htmlconverter.com\/files\/NavWithCssHoverImageAndHoverText\/index.html\" target=\"_blank\" rel=\"noopener\">HTML\/CSS code<\/a>, <a href=\"http:\/\/psd2htmlconverter.com\/files\/NavWithCssHoverImageAndHoverText.zip\">ZIP archive with source code<\/a>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Such HTML elements of web page as links, buttons, input forms, etc. often have different visual states for events like &#8220;element is hovered by\u00a0 mouse pointer&#8221;, &#8220;element is clicked&#8221;, &#8220;link was visited&#8221;, &#8220;element is active&#8221;.\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":[],"_links":{"self":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/comments?post=577"}],"version-history":[{"count":4,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/577\/revisions"}],"predecessor-version":[{"id":581,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/577\/revisions\/581"}],"wp:attachment":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/media?parent=577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/categories?post=577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/tags?post=577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}