John Cox

Blogs · @wyome · Now · Shelf

Tagged design · everything

Interesting

juicystudio.com

Juicy Studio: Example Luminosity Contrast Ratios

This reference page presents luminosity contrast ratios for all web-safe colors displayed against a black (#000) background, helping designers verify whether color combinations meet WCAG accessibility standards for readability. The table includes not only the contrast ratio for each foreground color but also brightness and hue differences, with icons indicating whether each combination passes AA or AAA accessibility levels for regular or large text. The highest contrast ratios occur with bright colors like white, cyan, and yellow (reaching 21.00 for white text on black), while dark colors like #003 produce minimal contrast and fail accessibility requirements.

Permalink designaccessibilitycolor

Wink

Wink

This is marketing material for Wink, a smart home hub platform that consolidates control of devices from multiple brands (Nest, GE, Philips, Honeywell) into a single app. The service offers automation features called "Robots" that let different devices trigger each other (like unlocking a door triggering lights to turn on) and "Shortcuts" for controlling multiple devices simultaneously. Wink's main pitch is simplifying the fragmented smart home landscape by allowing different manufacturers' products to communicate and work together through one interface.

Permalink technologydesignsmart homehome

37signals.com

Heckling Adaptive Path - Signal vs. Noise (by 37signals)

Adaptive Path distinguishes between "Foundation Attributes" (technologies like user-generated content and real-time data that emerged in the mid-1990s but weren't sufficient on their own) and "Experience Attributes" (newer elements that create compelling user experiences), arguing that Web 2.0's real competitive advantage comes from combining both types. The piece suggests that Experience Attributes—which blur traditional lines between suppliers, vendors, and customers—are what actually drive the fast growth and innovation associated with Web 2.0 companies, rather than any single technical feature.

Permalink technologydesignbusinessinternet

www.khmerang.com

Khmerang.com - CSS-Technique: Worn Type

This tutorial explains a CSS technique for creating a worn, distressed text effect in headers by overlaying a semi-transparent pattern image on top of text using an absolutely positioned span element. The method relies on floating the header to contain its width to the text itself, setting overflow to hidden to clip the pattern image, and creating a random-pixel GIF with transparency that obscures portions of the underlying text. While the technique effectively produces the visual effect and can be applied to various pattern types, it has the limitation that text cannot be selected normally due to the image overlay blocking mouse events.

Permalink designtutorialcss3

www.paperzone.com

pearified.com

www.alvit.de

www.infimum.dk

Information on Border Slants

This guide demonstrates a CSS technique called "slants" that uses colored borders of varying widths to create geometric shapes like triangles, trapezoids, and polygons in pure HTML and CSS, with applications ranging from decorative elements to complex constructions like stars and arbitrary lines. The method exploits how browser rendering combines borders at different angles, though it has limitations—triangles must have at least one horizontal or vertical edge, and angles below 90 degrees require workarounds like transparent borders or overlapping shapes. The author illustrates how these basic building blocks can be combined and manipulated to create more sophisticated visual effects and even dynamic drawings with JavaScript.

Permalink designtutorialcss3

www.w3.org

Media types

CSS enables different style sheets or style rules to apply to different output media—such as screens, print, braille devices, or speech synthesizers—by using @media and @import at-rules or media attributes in HTML markup. Different media types often need different values for the same property (like font-size), since a document displayed on screen requires different formatting than the same document on paper. CSS defines nine recognized media types (screen, print, handheld, braille, speech, projection, etc.) and organizes properties into media groups based on whether they apply to continuous or paged media, visual or audio content, and interactive or static devices.

Permalink designtutorialcss3

www.digitalmediaminute.com

XHTML Character Entity Reference

This appears to be a reference document listing HTML entity codes for special characters, mathematical symbols, Greek letters, and typographical marks, organized by category with their various representation formats (named entities, numeric codes, and Unicode values). It's a technical reference tool rather than an article or piece of journalism, so it doesn't have an argument or thesis to summarize. If you saved an actual article or essay, please share that instead.

Permalink designtutorial

typetester.maratz.com

Typetester – Compare fonts for the screen

Typetester is a browser-based tool for testing and comparing web fonts from a library of over 2800 options, letting designers preview typography in real-time without switching between design software and browsers. The platform generates exportable HTML and CSS code for responsive typographic designs, eliminating the need for coding knowledge and making it easy to share projects or hand off specifications to developers.

Permalink designtoolsfont

colorblender.com

www.colourlovers.com

www.dontclick.it

dontclick

An interactive art project or game where the primary instruction is to avoid clicking, exploring the tension between user intent and restraint.

Permalink designart