CSS Tips and Tricks

A collection of CSS tricks to tackle various problems.

• Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius
• Explore a Site's CSS with Chrome DevTools CSS Overview
• Create an Animated Underline Effect using CSS Transition and CSS Background Position
• Use the HSL Color Space and Scoped CSS Variables to Prototype UI Variants
• Use content-visibility: auto to Improve Initial Page Load Time
• Use CSS @keyframes to Create a Basic Loading Animation
• Use CSS filter to Create a Drop Shadow
• Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect
• Use CSS Variables to Maintain the Aspect Ratio for an Element
• Use Multiple Background Images to Create Single Element CSS Art
• Use CSS Variables Almost like Boolean Values with Calc
• Use CSS Transforms to Create Configurable 3D Cuboids
• Use CSS Variables with Calc and HSL to Implement Dark Mode
• Use CSS Scroll Behavior for Animated Anchor Scrolls
• Use CSS Scroll Margin to Give Content Breathing Room
• Use CSS @property to Animate and Transition Custom Properties
• Use CSS Resize to Create Resizable Elements
• Use CSS aspect-ratio to prescribe an aspect ratio for an element