Design Beautiful Focus States

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: 

  • style it to override browser defaults
    • Color
    • 2px dotted outline (instead of 1px)
a:focus {
  outline: 2px dotted;
}
a:hover, a:focus {
  color: orangered;
  text-decoration: none;
}
a {
  color: #a6540b;
  transition: color 0.15s, outline 0.15s;
}

Forms:

  • box-shadow to let the focused input pop up
  • override default outline styles of browser
  • Transition if you want
input[type="text"]:focus, input[type="email"]:focus {
  outline: 2px solid rgb(135, 205, 226);
}

input:focus {
  box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.5);
}

input {
  border: none;
  display: block;
  font-size: inherit;
  transition: outline 0.2s ease-in, box-shadow 0.2s ease-in;
}

Image/ gallery

  • override default outline
  • box-shadow
  • scale
  • optional: saturation filter
.gallery-link:focus {
  outline: 3px solid rgb(42, 147, 181);
}

.gallery-link:hover, .gallery-link:focus {
  box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.25);
  transform: scale(1.025);
  filter: saturate(1);
}

.gallery-link {
  display: flex;
  filter: saturate(0.15);
  transition-duration: 0.15s;
  transition-property: box-shadow, filter, transform;
  transition-timing-function: ease-in;
}

RFS (Responsive Font Size)

Just found out about RFS and it sounds really handy.

Responsive Font Size (RFS) is an engine that automatically calculates and updates the font-size property on elements based on the dimensions of the browser viewport.

It’s compatible with Sass, Less, Stylus and PostCSS, so it plugs into just about any stack. You can compile Bootstrap 4 with it too simply by changing $enable-responsive-font-sizes to true (see below). In BS5 this will be enabled by default. See this CSS Tricks article.

How does it work?

Read More