CSS-Tricks·37wBringing Back Parallax With Scroll-Driven CSS Animations
CSS scroll-driven animations now enable parallax effects without JavaScript, using scroll() and view() timeline functions to control animation progress based on scroll position. The technique includes animation ranges for precise timing control, accessibility considerations with prefers-reduced-motion, and browser support strategies including polyfills for unsupported browsers.
CSS-Tricks·36wCSS-Questions
CSS-Questions is a new educational platform created by Sunkanmi Fafowora that offers over 100 CSS quiz questions to test developers' knowledge. The site provides both a comprehensive exam and a shorter 20-question basic test, making it a valuable resource for developers looking to assess and improve their CSS skills.
CSS-Tricks·34wA Radio Button Shopping Cart Trick
A CSS-only technique for animating items into a shopping cart using radio button pairs that toggle states to trigger smooth transitions. Each product contains two radio inputs with the same name attribute, creating a see-saw effect when clicked. When selected, items shrink and move to the cart position using CSS transforms and transitions. The approach includes JavaScript for counting items and discusses accessibility limitations due to duplicate interactive elements. The author suggests modern alternatives like the View Transitions API for better implementation.