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 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.

See the Fullscreen Page Scroll With Background Reveal on CodePen

Background Reveal Scroll In Pure CSS

css

Estimated reading time: 2 minutes, 30 seconds

A popular presentation technique is something I call “background reveal scroll”: as the page is scrolled upwards, images are covered and revealed in the background.

While trendy, the technique does have the advantage of concentrating content into a few bold images and short pieces of text. However, the effect is often accomplished by loading a heavy JavaScript framework and a plugin; which, as I’ll show here, are entirely unnecessary in modern browsers.

Photograph of a Victorian boy holding out an empty food bowl

CSS last-line: Controlling Widows & Orphans

css / typography

Estimated reading time: 3 minutes

While CSS has many options for controlling the first-line of text, it’s ability to control the last line is limited, although not without some uses:

CSS Motion Design Basics: Easing

css / animation

Estimated reading time: 1 minute, 15 seconds

Some useful rules for applying CSS easing to motion design for UI elements and animations, courtesy of Rachel Smith:

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.