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

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

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

Tintin rocketship

Animating Elements In Arcs, Circles and Ellipses With CSS

css / animation

Estimated reading time: 2 minutes, 21 seconds

is most often created between two points: from and to a state, or between position A and B. Moving elements in arcs, ellipses and circles is less frequently used, but it’s a very valuable thing to know.

Photograph of a set of child alphabet blocks

Using Inline-Block In Web Development

css / the box model

Estimated reading time: 3 minutes, 45 seconds

Previously I’ve discussed what I called “the two kinds of element”: inline and block. That was an oversimplification for the purpose of instruction: in reality, HTML elements can have over a dozen different display values.  inline and block were the first and simplest values added to the CSS spec. display: table and its related values are almost as old, while and grid are the latest. Somewhere in the middle is inline-block.

Using inline-block can solve many common frustrations and limitations in web design, although not without introducing a few of its own.

Clarke’s Three Laws

  1. When a distinguished but elderly scientist states that something is possible, he is almost certainly right. When he states that something is impossible, he is very probably wrong.
  2. The only way of discovering the limits of the possible is to venture a little way past them into the impossible.
  3. Any sufficiently advanced technology is indistinguishable from magic.

Creating Decorated Ordered Lists With CSS

css / lists

Estimated reading time: 1 minute, 30 seconds

HTML ordered lists can be incremented in many different languages, but customizing the appearance of the leading numbers in each list item is rather difficult. Formatting the list in an and using font-feature-settings to produce a special numbers option is one possibility, but there is an easier method. By using the under-appreciated counters property – usually associated with generating point-numbered lists – we can customize the leading numbers with abandon.

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.