Return

14.01.2023

Elements of Tactile UI

Sketchpad #1

For real world objects, product quality is described in terms of its texture, weight, balance, feel. To create digital experiences that exude care and craft then, it makes sense for us to take inspiration from the objects and materials of the natural world.

Gradient borders

To achieve the above result, we need a gradient border. But gradient borders aren't directly supported in CSS3. We're going to have to use pseudo-elements to achieve the result, via: ::before and ::after.

The shiny effect

To get the animated "shine" effect, we change the background to a conic gradient, expand its size, and add a 360deg rotation animation.

Finally add a parent container with some padding, e.g. 4px (this will become the border) and set tooverflow: hidden.

Textures

Graphic designers have been using analog textures in digital work for years. And with pseudo-selectors and mix-blend-mode, it's straightforward to leverage in software UI too.

Texture Blender

You don't
need an
app.

grid texture
grid texture
grid texture
grid texture
grid texture
grid texture
grid texture
grid texture

Bringing it all together

Let's see how can we can create a beautiful floating navigation component with these techniques. FYI, this one is best experienced in dark mode due to some choices.

Notes to self

If something goes wrong while trying to position the psuedo-element behind the primary element, it likely relates to the parent. To resolve, try:

  1. Setting a z-index value on the parent container.
  2. Removing any display: flex|grid declarations on the parent container.
  3. Wrapping the pseudo-element class in a plain div component.

Safari (webkit) doesn't enforce the border-radius of the parent container when overflow: hidden is used to contain animated gradient. To fix this, add isolation: isolate to the parent.