Details that make interfaces feel better
a day ago
- #CSS Tips
- #UI Design
- #Animation Techniques
- Use text-wrap: balance for titles to distribute text evenly across lines.
- Apply text-wrap: pretty for paragraphs to prevent orphaned words.
- Implement concentric offset for nested elements by calculating outer radius as inner radius plus padding.
- Animate opacity, scale, and blur on icons for smoother contextual transitions, using tools like Motion for spring animations.
- Set -webkit-font-smoothing: antialiased (or antialiased in Tailwind) on macOS for crisper text rendering.
- Use font-variant-numeric: tabular-nums (tabular-nums in Tailwind) to prevent number shifting and ensure equal digit width.
- Prefer CSS transitions over keyframe animations for interruptible user interactions, as transitions interpolate to the latest state.
- Break enter animations into smaller chunks, animating elements individually with staggered delays for opacity, blur, and translateY effects.
- Make exit animations subtler than enter animations, using reduced movement and attention-demanding properties.
- Optically align items instead of geometrically when needed, especially for icons or text with icons, using margin or padding adjustments.
- Replace borders with subtle box-shadow for depth, using multiple shadows and transitioning with transition-shadow.
- Add a 1px black or white outline with 10% opacity to images for depth and a consistent outline, adjusting for dark mode.