User Interface (UI) Design Principles

Content covering the visual and interactive elements of interface design, from color, gradients, and borders to motion that communicates state and flow.

Content tagged ui-design

• Tutorial:Squircles, Bevels and Scoops with corner-shape

  Shape corners into squircles, bevels, scoops and notches.

  The corner-shape property gives border-radius corners a shape — round, squircle, square, bevel, scoop, notch or any superellipse() — with borders, shadows and outlines that follow it, per-corner values, smooth animation, and an automatic rounded fallback in browsers without support.

• Post:An Interactive Guide to the CSS linear() Easing Function

  Chain custom stops into springs, bounces, and elastics.

  A deep, interactive guide to CSS's linear() easing function — comma-separated stops, percentage positions, and building spring and bounce curves cubic-bezier() can't express.

• Post:An Interactive Guide to CSS cubic-bezier()

  Drag two control points, design your own curve.

  An interactive guide to CSS cubic-bezier(): what the four numbers control, how to build overshoot and anticipation curves, hand-tuned recipes, and a draggable curve playground.

• Post:An Interactive Guide to CSS Easing Functions

  Feel how the five easing keywords shape motion.

  A visual guide to CSS timing functions: how time maps to progress, why ease, linear, ease-in, ease-out and ease-in-out feel so different, and when to use each.

• Post:CSS Gradient Borders: Complete Guide with Techniques & Examples

  Build gradient borders using modern CSS techniques

  A complete guide to CSS gradient borders using border-image, background-clip, mask, conic and radial gradients, @property animations, and a reusable SCSS mixin with real-world examples.