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.

A New Web Development Workflow, Part 1: Text

tools

Estimated reading time: 2 minutes, 30 seconds

There are three ways in which any process changes:

  1. Forced change: “this is the way we do it now”.
  2. Reactive change: “our procedures don’t cover this”.
  3. Considered change: the deliberative consideration of alternatives that are evaluated, tested, and adopted.

The third option is almost always best. In that way, a long period of research and experimentation and one weekend of concentrated work on integrating new habits has revolutionized the way I write and develop. It’s my hope that this series might help others streamline and improve their workflow processes.

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:

Modern Masonry with Flexbox and JavaScript

css / galleries

Estimated reading time: 2 minutes, 30 seconds

For some time I have been attempting to recreate “masonry” effects in flexbox, where images are arranged like bricks in a wall. My previous attempt was moderately successful, but it ran ragged and lacked the dynamism I wanted.

Then, after working on the recent “Random Images With Flexbox and JavaScript” article, I had an epiphany: why not use JavaScript to read the image’s aspect ratios, and use that to determine the correct flex value for each element?

The solution – also available on CodePen – allows designers to load images of any dimension and aspect ratio into a container element, apply a class, and have a seamless image masonry effect generated automatically on the page using modern web standards, with no plugins or frameworks required.

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.