duration-property Web Component
Introduces a Web Component that exposes audio/video duration as a CSS custom property for syncing CSS animations.
Introduces a Web Component that exposes audio/video duration as a CSS custom property for syncing CSS animations.
Introduces a Web Component for checking and displaying WCAG color contrast ratios and grades using CSS custom properties.
A developer shares their experience and challenges creating their first reusable web component for a native sharing button.
Explores 3+1 strategies for setting default values in CSS custom properties to create reusable, customizable components.
A tutorial on using CSS custom properties and radio buttons to dynamically toggle clip-path values, demonstrating a cleaner alternative to JavaScript class toggling.
Explores advanced, practical applications of CSS variables beyond basic color tokens, with examples for dynamic styling and code efficiency.
Learn how to dynamically style CSS pseudo-elements like ::after using JavaScript and CSS custom properties (CSS variables).
A beginner-friendly introduction to CSS variables (custom properties), explaining their syntax and basic usage with simple code examples.
A tutorial on using CSS custom properties (variables) to create reusable values, improve code maintainability, and easily manage themes in stylesheets.
A tutorial on integrating design tokens into an Eleventy static site, allowing token values to be shared across CSS, JSON, and templates.
A 90-second video and transcript explaining CSS Custom Properties (CSS variables), including syntax, scoping, defaults, and dynamic usage.
Explains how to use CSS Motion Path (offset-path) to position text along a curved or circular path, making it selectable unlike transform-based methods.
A tutorial on implementing dark mode for websites using CSS custom properties and the prefers-color-scheme media query.
A developer explains the decision to avoid CSS Custom Properties for a paid theme feature to maximize browser compatibility, discussing progressive enhancement trade-offs.
A technical guide on using CSS custom properties to manage responsive state changes, like a collapsible menu, without duplicating breakpoint logic.
A tutorial on implementing a dynamic theme switcher using CSS custom properties (CSS variables) and JavaScript, with localStorage for persistence.