{"id":13851,"date":"2020-10-12T10:57:52","date_gmt":"2020-10-12T08:57:52","guid":{"rendered":"https:\/\/hesmid.nl\/test\/?p=13851"},"modified":"2020-10-12T11:16:15","modified_gmt":"2020-10-12T09:16:15","slug":"design-beautiful-focus-states","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/design-beautiful-focus-states\/","title":{"rendered":"Design Beautiful Focus States"},"content":{"rendered":"\n<p><a href=\"https:\/\/thegymnasium.com\/take5\/designing-beautiful-focus-states\">https:\/\/thegymnasium.com\/take5\/designing-beautiful-focus-states<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Designing Beautiful Focus States\" width=\"648\" height=\"365\" src=\"https:\/\/www.youtube.com\/embed\/mmXdKhB7Ueg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/gymnasium\/full\/PoPjVyo\">completed project on codepen<\/a><\/p>\n\n\n\n<p>Control your focus styles for people that access the website using a keyboard or similar:<\/p>\n\n\n\n<p><strong>Link outline:<\/strong>&nbsp;<\/p>\n\n\n\n<ul><li>style it to override browser defaults <ul><li>Color<\/li><li>2px dotted outline (instead of 1px) <\/li><\/ul><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"416\" height=\"83\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-1.png\" alt=\"\" class=\"wp-image-13855\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-1.png 416w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-1-300x60.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-1-150x30.png 150w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>a:focus {\n  outline: 2px dotted;\n}\na:hover, a:focus {\n  color: orangered;\n  text-decoration: none;\n}\na {\n  color: #a6540b;\n  transition: color 0.15s, outline 0.15s;\n}<\/code><\/pre>\n\n\n\n<p><strong>Forms:<\/strong><\/p>\n\n\n\n<ul><li>box-shadow to let the focused input pop up<\/li><li>override default outline styles of browser<\/li><li>Transition if you want<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"255\" height=\"149\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image.png\" alt=\"\" class=\"wp-image-13854\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image.png 255w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-150x88.png 150w\" sizes=\"(max-width: 255px) 100vw, 255px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>input&#91;type=\"text\"]:focus, input&#91;type=\"email\"]:focus {\r\n  outline: 2px solid rgb(135, 205, 226);\r\n}\n\ninput:focus {\r\n  box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.5);\r\n}\n\ninput {\r\n  border: none;\r\n  display: block;\r\n  font-size: inherit;\r\n  transition: outline 0.2s ease-in, box-shadow 0.2s ease-in;\r\n}<\/code><\/pre>\n\n\n\n<p><strong>Image\/ gallery<\/strong><\/p>\n\n\n\n<ul><li>override default outline<\/li><li>box-shadow<\/li><li>scale<\/li><li>optional: saturation filter<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"315\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-2-1024x315.png\" alt=\"\" class=\"wp-image-13856\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-2-1024x315.png 1024w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-2-300x92.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-2-150x46.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-2-768x236.png 768w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-2-1536x472.png 1536w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2020\/10\/image-2.png 1679w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>.gallery-link:focus {\r\n  outline: 3px solid rgb(42, 147, 181);\r\n}\n\n.gallery-link:hover, .gallery-link:focus {\r\n  box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.25);\r\n  transform: scale(1.025);\r\n  filter: saturate(1);\r\n}\n\n.gallery-link {\r\n  display: flex;\r\n  filter: saturate(0.15);\r\n  transition-duration: 0.15s;\r\n  transition-property: box-shadow, filter, transform;\r\n  transition-timing-function: ease-in;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/thegymnasium.com\/take5\/designing-beautiful-focus-states completed project on codepen Control your focus styles for people that access the website using a keyboard or similar: Link outline:&nbsp; style it to override browser defaults Color 2px dotted outline (instead of 1px) Forms: box-shadow to let the focused input pop up override default outline styles of browser Transition if you want Image\/ [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/13851"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=13851"}],"version-history":[{"count":3,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/13851\/revisions"}],"predecessor-version":[{"id":13857,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/13851\/revisions\/13857"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=13851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=13851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=13851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}