CSS & HTML
CSS Gradient Buttons with color-mix() and OKLCH
Create gradient buttons in pure CSS from one base color with color-mix() and OKLCH, including smooth hover animation, focus rings and accessible…
Tag: accessibility
UI Components
CSS Dropdown Menu: A Modern, Accessible Multi-Level Menu
Build a two-level dropdown menu with modern CSS and about 25 lines of JavaScript, using disclosure buttons, aria-expanded and focus-visible so it…
Typography
HTML Symbol Entities: Characters, Arrows and Quotes the Modern Way
Named and numeric character references, UTF-8, CSS content escapes and when to use SVG instead, with accessible examples for quotes, arrows, breadcrumbs…
CSS & HTML
Coding Clean and Semantic HTML Templates
How to code clean, semantic templates: pick the right element, use landmarks, replace wrapper divs with Grid and gap, and keep markup…
CSS & HTML
Maximize the Use of Hover in Modern CSS
Use hover to beautify links, hide clutter and show extra information, with matching focus states, touch-device fallbacks and reduced-motion support, all in…
Workflow
Writing Tips for Web Designers: Clear Copy and Microcopy
Words are part of the interface. Five habits for scannable pages, plain language, clear microcopy and consistent voice, plus how to use…
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
CSS Gradient Text Effect
Create gradient headings with three lines of CSS: background-clip text, OKLCH colour blending, animation with @property, safe fallbacks and accessibility checks.
UI Components
CSS Expandable Box: Fluid Cards That Grow With Their Content
The classic all-expandable box rebuilt with modern CSS: em-based sizing, shadows, native resize and border-image frames, with no extra markup or sliced…
UI Components
Advanced CSS Menu: Free-Positioned Links with Modern CSS
Rebuild the classic image-based advanced CSS menu with real text, custom-property coordinates, container queries, matching keyboard states and anchor-positioned captions.
CSS & HTML
Style Your Ordered List With CSS Counters and ::marker
Restyle the numbers in an ordered list with ::marker, CSS counters, counters() and @counter-style, without extra markup and without losing accessibility.