CSS & HTML
View Transitions API: A Practical Guide to Page and DOM Animation
A practical guide to the View Transitions API: animate DOM changes and page navigations, name shared elements, handle reduced motion, and ship…
Tag: Javascript
UI Components
Four Elements of Mobile-Friendly Responsive Menus
Build a responsive menu that works on touch and keyboard: a real button toggle, details submenus, CSS-only animation and a dialog off-canvas…
CSS & HTML
Animating Background Colors With Modern CSS
Cycle, shift and transition background colors using native CSS: keyframes, @property registered variables, and color-mix(). No jQuery required.
UI Components
Build an Interactive SVG World Map with CSS and JavaScript
Create an interactive world map with inline SVG, CSS color-mix() and about 40 lines of vanilla JavaScript: tooltips, keyboard support and data…
UI Components
Build an Accessible Lightbox with the Dialog Element
Skip the jQuery plugin. A native dialog gives you the backdrop, focus handling and Escape key, and a few lines of CSS…
UI Components
Back to Top Button with Smooth Scrolling
Build an accessible back-to-top button with a native anchor, CSS smooth scrolling and a few lines of IntersectionObserver. No jQuery required.
CSS & HTML
Sequential Lists Without jQuery: CSS Counters and sibling-index()
Replace the old jQuery sequential list with CSS counters for numbering, sibling-index() for staggered animation, and IntersectionObserver for scroll triggers.
CSS & HTML
JavaScript in Modern Web Design: What the Browser Now Does for You
Lightboxes, accordions, tooltips, carousels and validation no longer need plugins. Here is what replaces each one, with code, and where JavaScript still…
CSS & HTML
jQuery Effects for Designers, Rebuilt with Modern CSS and JavaScript
Ten classic jQuery designer effects rebuilt with details, CSS transitions, the Web Animations API and View Transitions, with tested code and support…