demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Chicago

Houston

Try selecting and changing the text…

Easy Cross-Browser Text Masks with Blend Modes

css / blend modes

Estimated reading time: 2 minutes

There are many ways to do text clipping masks (the appearance of graphics or effects inside letterforms) on the web, but the techniques are all somewhat scattershot: Chrome and Safari have long supported -webkit-background-clip:text;, but that only addresses two browsers; there is also an SVG technique, but that has limitations also.

After experimenting with I realized it was possible to use them to create text clipping masks by “sandwiching” text and backgrounds. One nice advantage is the technique is not only fully cross-browser (with the exception of IE), but it’s also naturally progressive, with elegant fallbacks.

BAD BOY

Automatic Text Contrast with CSS Blend Modes

css / blend modes

Estimated reading time: 2 minutes

In previous articles I’ve created various graphical effects with , but potentially one of the most useful applications for blends is within text on web pages.

Contrast is a basic accessibility concern often overlooked by designers in love with subtlety, shading, and thin sans-serif fonts. But contrast becomes an inescapable issue when text crosses into an area similar in color to itself:

CSS Diamond Mesh Navigation

css / navigation

Estimated reading time: 2 minutes, 30 seconds

As I’ve shown previously, it’s completely possible to create an angled navigation using CSS transforms. As part of her soon-to-be-published book, Lea Verou shows how to take that idea even further to create diamond frames for images. Inspired by that work, I created the navigation you see above: a series of active links, arranged in a pattern like a chain-link fence.

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.