A collection of CSS tricks to tackle various problems.
Overview
Syllabus
- 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
Taught by
Jhey Tompkins
