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: accessibility
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
Easy CSS Animation Using @keyframes
Learn how @keyframes work, what every animation property does, and how to add scroll-driven timelines and reduced-motion support with tested, modern CSS.
CSS & HTML
Easy CSS Animation With Transitions and Transforms
Build smooth hover, toggle and entry animations with CSS transitions and the individual translate, rotate and scale properties, including @starting-style and reduced…
CSS & HTML
How to Add Icons to Any Element With CSS
Add an icon to any element without touching its HTML. Use a CSS mask on a pseudo-element with currentColor, plus accessible icon-only…
CSS & HTML
How to Zoom a Hero Image on Scroll with CSS
Replace the old jQuery scroll handler with CSS scroll-driven animations: a smooth, accessible hero zoom in about ten lines, plus a tiny…
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
CSS Social Buttons: Accessible Share and Follow Buttons
Build one reusable social button component with inline SVG icons, custom properties and color-mix(), then add copy-link and native share behaviour with…
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.
UI Components
HTML Placeholder Text: Styling, Floating Labels and Accessibility
The placeholder attribute works everywhere now, so drop Modernizr and jQuery. Style it, build a CSS-only floating label, and keep forms accessible.
Design
Cultural Considerations for Global Websites
Design once for every language: logical properties for RTL, room for text expansion, Intl formatting, script-aware fonts, hreflang and sensible cultural choices.
UI Components
How to Build a Beautiful CSS Search Form
Build a pill-shaped search form with plain CSS: inset depth, a focus ring around the whole field, an OKLCH gradient button, dark…