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.

Composition in Color A, 1917, by Piet Mondrian, rendered in SVG

SVG Basics: Rectangles and Squares

svg / basics

Estimated reading time: 2 minutes, 30 seconds

After circles, rectangles are probably the easiest element to draw in , requiring just one more attribute to complete them. The basic syntax for rectangles requires an x position, y position, width and height:

You deserve a Coke

A glass filled with Coca-Cola splashing with a dropped ice-cube

Introduction to JavaScript Functions

javascript / fundamentals

Estimated reading time: 5 minutes, 30 seconds

Functions are a core part of ; they’re used everywhere. Thankfully, basic functions are also pretty straightforward.

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.

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.