Image comparison slider with pure CSS
A tutorial on creating an image comparison slider using only CSS and the resize property, exploring its benefits and limitations.
Lea Verou is a web standards expert, developer, and designer with a PhD from MIT in Human-Computer Interaction. She has worked as Product Lead at Font Awesome, helped shape the web as a member of the W3C Technical Architecture Group, and has been part of the CSS Working Group since 2012. Her open-source tools like PrismJS and Color.js are used by millions of developers worldwide. Lea is also the author of a bestselling CSS book, a frequent conference speaker, and an advocate for making technology simpler, more usable, and open for everyone.
210 articles from this blog
A tutorial on creating an image comparison slider using only CSS and the resize property, exploring its benefits and limitations.
Creating a 3D animated RGB cube using CSS transforms and dynamically generated SVG backgrounds through SASS functions.
Whathecolor is a color-matching game for web developers to test their knowledge of CSS color notations like hsl() and rgb().
How to use CSS animation-play-state to create smooth hover animations that freeze instead of snapping back to the original state.
A developer shares a simple JavaScript script to automatically generate a talks list from a JSON file, eliminating manual HTML updates.
The author argues that CSS is a developer's tool, requiring programming skills and analytical thinking, not just design sensibilities.
A tutorial on creating a clean, scalable CSS spinner using only 2 HTML elements and pseudoelements, focusing on maintainable code and performance.
A technical guide on recreating Google's animated loader using pure CSS, covering border animations and rotation techniques.
A tutorial on creating slanted, 3D-looking tabs using CSS transforms and pseudo-elements, with graceful degradation for older browsers.
Author explains their decision to leave the W3C to focus on personal projects, open source work, writing a book, and standards development.
Developer creates an open-source web app to calculate screen DPI/PPI, detailing the project's inspiration, features, and development process.
Analyzes browser support for unprefixed CSS gradients and advises which vendor prefixes are still necessary for web developers in 2013.
The CSS border-corner-shape property is at risk of being removed from the spec. The author calls for developers to provide use cases to help save it.
Preview the upcoming CSS corner-shape property with an interactive SVG tool, exploring beveled, scooped, and notched corners before browser support.
A guide to vertically centering text using SVG, detailing the method, its advantages, and browser compatibility considerations.
A guide to using MathML for web equations with a CSS fallback for browsers lacking native support, based on a real-world use case.
A guide to creating iOS 6-style toggle switches using only CSS, focusing on accessibility, browser compatibility, and no JavaScript.
A CSS tip explaining how to simplify animation code by using only one keyframe, leveraging browser defaults for cleaner, more efficient stylesheets.
Upcoming improvements to Dabblet, including JavaScript support, cross-browser compatibility, security enhancements, and Prism integration.
A developer's tool for calculating WCAG-compliant color contrast ratios, including support for semi-transparent colors and real-time updates.