Motion Highlights #9
Explore fresh ideas in motion and animation with this curated roundup of inspiring techniques and examples.
By Codrops08 Jun 2025Better CSS Shapes Using shape() — Part 3: Curves
Exploring the CSS shape() function’s curve command for creating complex shapes, building on previous articles about lines and arcs.
By CSS-Tricks06 Jun 2025Try It On: A Playful Drag-and-Drop Styling UI
Experience a playful interactive where virtual T-shirts can be dragged and dropped onto a model to instantly change their look.
By Codrops06 Jun 2025The Height Enigma
Understanding height in CSS is trickier than width, especially with grid and flexbox. Josh Comeau breaks down the nuances for better control.
By Frontend Masters06 Jun 2025Exploring the CSS contrast-color() Function… a Second Time
The contrast-color() function selects black or white based on contrast, not actual contrast checking. Safari's implementation opens new styling possibilities.
By CSS-Tricks05 Jun 2025How to Create Responsive and SEO-friendly WebGL Text
Discover how to blend responsive HTML text with WebGL rendering for scroll-driven animations and custom shader effects.
By Codrops05 Jun 2025The State of CSS 2025 Survey is out!
The latest State of CSS 2025 Survey reflects recent CSS innovations and trends, offering insights into the future of CSS development.
By CSS-Tricks05 Jun 2025Printing the web: making webpages look good on paper
Designing for print enhances accessibility and user experience, transforming documents into clean, readable formats beyond screen responsiveness.
By Piccalilli05 Jun 2025Motion Highlights: Rive Special
A showcase of standout interactive animations created with Rive, highlighting creative motion design.
By Codrops05 Jun 2025Collaboration: The Most Underrated UX Skill No One Talks About
Great UX relies on collaboration – working with engineers, product teams, and stakeholders to co-create and amplify design impact.
By Carrie Webster05 Jun 2025firstChild can be white space
A quick heads-up on a common CSS gotcha that can trip up your styling efforts.
By Frontend Masters05 Jun 2025CSSday 2025
A quick, impactful talk on design and code, available in a couple of hours, with a collection of slides and Codepen examples.
By Adam Argyle05 Jun 2025SVG to shape()
The CSS shape() function brings SVG’s path capabilities into CSS with real units, enabling more dynamic and precise shapes.
By Frontend Masters04 Jun 2025Smashing Animations Part 4: Optimising SVGs
Learn Andy Clarke’s process for optimizing SVGs to be faster, simpler, and more manageable for animation and beyond.
By Andy Clarke04 Jun 2025Building a Real-Time Dithering Shader
Dive into a minimal WebGL shader that applies ordered dithering and pixelation as a flexible postprocessing effect.
By Codrops04 Jun 2025Getting Creative With HTML Dialog
Elevate dialogue box design beyond frameworks using CSS ::backdrop, backdrop-filter, and animations to match branding and storytelling.
By CSS-Tricks03 Jun 2025Elastic Grid Scroll: Creating Lag-Based Layout Animations with GSAP ScrollSmoother
Achieve a smooth, elastic scrolling experience with columns in a grid moving at different speeds for subtle depth.
By Codrops03 Jun 2025Designing For Neurodiversity
Designing for neurodiversity involves creating inclusive experiences that recognize diverse ways of thinking and navigating the web.
By Vitaly Friedman02 Jun 2025Off To CSS Day 2025
Heading to CSS Day – excited to learn, share, and connect with the community.
By Adam Argyle02 Jun 2025
Create an interactive art piece using HTML, CSS, and JavaScript that responds to the user's scroll position. Blend responsive text with WebGL for dynamic animations, using custom shaders to transform the visuals as you scroll. Optionally, add a canvas element for additional visual effects, integrating ordered dithering or pixelation techniques for a truly unique experience.
Why do frontend developers love food? Because they can't resist a good CSS (Cascade Style Sheet)!