Focus!

During the restyle of brain4D I tried to style the UI more intuitive. One of the main points was to clarify which parts are active and which are not. The main approach is the variance of colors, so that the contrast of outer background, border, inner background and text is high or low.

See this example:

This kindly tries to simulate the focus on light and shadow in the real world. But focusing is more. It’s about depth and blurring and sharpness. Because web technology isn’t ready for blurring, we can use a trick. There are colored and blurred shadows around text and boxes. If we adjust the color right, we can archive focus and defocus:

Nice. Notice how the high contrast and sharpness of the focus object guides the eye. Finally let’s test this in a real world szenario. Imagine a user registration request that got rejected because of an invalid email address:

Technical Details

The implementation uses only CSS, so it’s ready for mobile devices and retina displays. Apart from changing the text color, border and background, the true magic are text-shadow and box-shadow. They are centered and have a 2px blur radius. The color depends on focus or defocus. Defocused elements have the same shadow color as their own text (text-shadow), their background (box-shadow) or if there is a border, border color (box-shadow, ignore the background color). Focused elements use a decent contrast color. In a light environment (light gray, no white), use an even lighter shadow color. In dark environments (dark gray, you don’t use black, I hope), use an even darker shadow color. Because it’s not a complementary color, our brain don’t separate it. If you want to see some code, just debug this page. The CSS style element is right below this text block.