Animated Pride Flags
A CSS tutorial on creating animated, wavy pride flags using React, keyframe animations, and gradients for Pride Month.
A CSS tutorial on creating animated, wavy pride flags using React, keyframe animations, and gradients for Pride Month.
Highlights 20 new and upcoming CSS and UI features announced at Google I/O 2023, including container queries, nesting, and scroll-driven animations.
A technical exploration of the CSS :has() pseudo-class, demonstrating its power for selecting parent and sibling elements with interactive demos.
Explains how to use the CSS color-mix() function to create semi-transparent variants of brand colors by mixing them with transparency.
Set Studio's new website ranks 2nd in a digital agency carbon footprint index, highlighting sustainable web design.
Explains the CSS :focus-visible pseudo-class, detailing when browsers show focus styles for accessibility without compromising design aesthetics.
A tutorial on using CSS :empty and :has() pseudo-classes to conditionally hide elements based on their content or child elements.
Explains how to use the CSS :has() pseudo-class to select and style previous sibling elements, a previously impossible task in CSS.
A developer shares a technical strategy for using Twitter hands-off via custom CSS, RSS feeds, and automation to avoid the main site and protect mental health.
Discusses the need for a native CSS property to visually hide content while keeping it accessible to screen readers, referencing common workarounds.
A CSS expert shares his favorite 3 lines of CSS, now translated into Japanese, and introduces his work and resources.
A practical guide with ten expert tips for creating smoother, more polished CSS transitions and animations to improve user experience.
Explains how to use new CSS style queries to simplify dark mode implementation, eliminating duplicate code for user preference and theme toggles.
A guide to using CSS style queries, a new feature for querying parent element styles and custom properties to separate data from design.
Explains how CSS easing curves and cubic-bezier functions control the rhythm and feel of animations and transitions for better UI design.
A CSS developer explains how fixing a spacing issue by reordering CSS rules, rather than adding more code, highlights the importance of specificity and source order.
Explores the need for CSS flex-wrap detection, detailing use cases like responsive headers and tabs for better layout control.
A developer shares their wishlist for new CSS features, including an index keyword, resizable form controls, gradient borders with radius, and new pseudo-elements.
A reflection on the end of CSS-Tricks' original spirit after its editor was fired by Digital Ocean, and a personal tribute to its legacy.
Explores the CSS `resize` property, its use in container query demos, practical applications, and current limitations.