Code24Lab

color-mix() for Tints and Shades: Channel Maths and Normalised Percentages

Lesson 18 of 20 Lab 🔒 Locked

Lessons in this course

  1. Specificity as (A, B, C): Score and Rank Any SelectorLabFree
  2. :is(), :not(), :has() and :where(): Specificity of Pseudo-Class FunctionsLab Locked
  3. The Cascade in Order: Origin, Importance, Inline Styles, SpecificityLab Locked
  4. Cascade Layers: Layer Order, Unlayered Styles and the !important FlipLab Locked
  5. The Specificity Graph: Measure Specificity Debt in a StylesheetLab Locked
  6. Inheritance and Computed Values: em Compounding and the line-height TrapLab Locked
  7. Custom Properties as Design Tokens: Chained Scales and Invalid ValuesLab Locked
  8. Fluid Typography with clamp(): Slope, Intercept and the Clamped RangeLab Locked
  9. Container Queries and cqi Units: Size Components by Their SlotLab Locked
  10. :has() in Practice: Quantity Queries and Sibling ConditionsLab Locked
  11. Native CSS Nesting: How & Desugars and Inflates SpecificityLab Locked
  12. Stacking Contexts: Why z-index: 9999 Still LosesLab Locked
  13. CSS Performance: Coverage, Transfer Size and the Critical CSS BudgetLab Locked
  14. The Animation Timing Model: Delay, Iterations and DirectionLab Locked
  15. steps() and linear(): Exact Output of Stepped and Custom EasingLab Locked
  16. Animation Performance: Layout, Paint, Composite and the Frame BudgetLab Locked
  17. Staggered Motion with Custom Properties, Caps and Reduced MotionLab Locked
  18. color-mix() for Tints and Shades: Channel Maths and Normalised PercentagesLab Locked
  19. aspect-ratio and object-fit: Box Sizes, Cover Scale and CroppingLab Locked
  20. Capstone: Audit a Design-System Button from Cascade to MotionLab Locked