This section cover these topics
Advanced CSS Features
- 13. CSS Custom Properties (Variables)
- Defining variables (--variable-name: value;)
- Using variables (var(--variable-name))
- Scope and inheritance of variables
- Fallbacks
- Practical Applications: Theming, consistent spacing, dynamic styles
- 14. Pseudo-classes and Pseudo-elements
- Pseudo-classes:
- User Action: :hover, :active, :focus, :focus-visible, :visited, :link
- Structural: :first-child, :last-child, :nth-child(), :nth-of-type(), :empty
- Form States: :checked, :disabled, :enabled, :valid, :invalid, :required
- Subtopic: :has() Pseudo-class
- Selecting an element based on its descendants (parent selector capabilities)
- :not(), :is(), :where()
- Pseudo-elements:
- ::before, ::after: Generating content
- ::first-letter, ::first-line
- ::selection
- ::marker
- 15. Transformations (2D and 3D)
- transform property
- 2D Transformations: translate(), rotate(), scale(), skew()
- 3D Transformations: translate3d(), rotateX(), rotateY(), rotateZ(), scale3d(), perspective()
- transform-origin, transform-style, backface-visibility
- 16. Transitions
- transition-property, transition-duration, transition-timing-function, transition-delay
- transition shorthand
- Common timing functions (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier())
- 17. Animations (@keyframes)
- Defining keyframes (@keyframes animation-name)
- animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state
- animation shorthand
- 18. Filters
- filter property: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia()
- 19. Blend Modes
- mix-blend-mode and background-blend-mode: Achieving Photoshop-like blending effects on elements and backgrounds.
- 20. Object-Fit and Object-Position
- Controlling how <img> and <video> elements fit into their containers.
- 21. Scroll Snap
- scroll-snap-type: Defining the snap behavior of a scroll container
- scroll-snap-align: Aligning snap points on scroll items
- scroll-padding, scroll-margin
- Subtopic: Scroll-Driven Animations
- Animations triggered and controlled by scroll progress