John Cox

Blogs · @wyome · Now · Shelf

Tagged design · everything

Interesting

www.cssplay.co.uk

Stu Nicholls | CSSplay | CSS only menus

This page catalogs dozens of CSS-based navigation menu implementations spanning from 2014 to 2026, ranging from simple dropdowns to complex tree menus using various CSS techniques like :focus-within, :has(), details/summary elements, and the newer popover API. The author notes that older implementations from 2005 have been removed as outdated, and while the menus work in current browsers, compatibility varies across older versions and different platforms, with some Mac-specific issues reported.

Permalink designdevelopmenttutorialcss3

www.iconaholic.com

programmermeetdesigner.com

strawbee.com

www.webdevref.com

livewavecam.com

webdesign.maratz.com

Super Stripes

This piece describes a practical web design technique for creating reusable stripe patterns using small transparent GIF images layered over different background colors in CSS. By preparing a few basic GIF files with alternating transparent and solid pixels, designers can quickly generate varied striped backgrounds across a website by simply changing the background-color property rather than creating new images for each color variation. The author suggests using this approach to visually distinguish different sections of a website while maintaining a cohesive design theme.

Permalink designtipstutorialcss3

A List Apart

A List Apart: Articles: Prettier Accessible Forms

This article presents a reusable CSS and JavaScript technique for styling accessible HTML forms with labels and inputs arranged horizontally side-by-side, using semantic markup (fieldset, legend, label elements) and an ordered list structure rather than tables. The solution relies on the CSS `display: inline-block` property for labels, supplemented by a JavaScript workaround for Mozilla browsers that don't natively support inline-block, while also addressing specific rendering quirks in Internet Explorer versions. The approach is designed to be portable across projects—authors can simply apply the "cmxform" class to any properly marked-up form to achieve basic structural styling that can be further customized without modifying the core reusable stylesheet.

Permalink designaccessibility

gregtaff.com

imageafter.com

A List Apart

A List Apart: Articles: CSS Design: Going to Print

Eric Meyer explains how to create effective print style sheets using CSS instead of maintaining separate printer-friendly versions of web documents. He walks through the specific CSS fixes applied to A List Apart, including working around a Gecko browser bug with floated elements, adjusting backgrounds and font sizes for print, styling hyperlinks to display their URLs, and extending the masthead design across the page width. The approach eliminates version skew between web and print versions while requiring only a single well-structured HTML document and media-specific CSS rules.

Permalink designtutorialcss3

www.mandarindesign.com

ult-tex.net

U-L-T-R-A'S Giant Color Chart

This is a landing page for a free online countdown timer tool that supports custom durations spanning days, hours, minutes, and seconds. The tool is designed for productivity applications like Pomodoro work sessions, cooking, fitness training, event planning, and studying, with features including a visual progress bar, optional alarm sound, and pause/resume functionality. The page emphasizes that the timer runs entirely in-browser without requiring downloads or subscriptions, making it more flexible than smartphone timers or basic web tools.

Permalink productivitycookingfitnessdesign

GarrettDimon.com

Garrett Dimon / The Time is Now for Front-End Architects

Front-end development has become sufficiently complex—spanning HTML, CSS, JavaScript, accessibility, usability, and integration with backend systems—that most teams need a dedicated front-end architect rather than leaving these concerns to either backend engineers or markup-only developers. The author argues that current enterprise frameworks like ASP.Net and Websphere demonstrate the consequences of treating frontend technologies as an afterthought, producing substandard markup and failing to separate concerns properly. True front-end architects must understand both client-side and backend technologies well enough to make informed decisions about implementation approaches and communicate effectively with engineers across the stack.

Permalink designarchitectureadvice