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

Hover to switch order

A Designer’s Guide To Flexbox: Order

css / flexbox

Estimated reading time: 3 minutes

One of the most powerful features of is its ability to re-order page content with just a single line of CSS, a feature that previously was only achievable with . This makes the flexbox layout module incredibly useful for , which is much more than “making things smaller”: mobile-first design often includes such features as re-prioritization of content to create different reading orders.

It also means that designers have an enhanced ability to easily re-order the elements they’ve crafted for a page. Unfortunately, the vast majority of flexbox support documentation is technical, and aimed towards developers. This series aims to correct that.

  1. Tunisia
  2. Botswana
  3. South Africa
  4. Kenya
  5. Nigeria
  6. Tanzania

A Custom Scrolling Element With Keyboard Accessibility

css / navigation

Estimated reading time: 3 minutes, 53 seconds

As a general rule, hiding important information inside a scrolling element is a poor idea, one more frequently used by designers because it “looks cool” rather than for solid UI reasons. But there are occasions when it’s necessary to do so… and when you do, the links inside still need to be via the keyboard.

See the Pen FvJDB by Dudley Storey (@dudleystorey) on CodePen.

Wrapping Text Around Circular Images With CSS Shapes

css / shapes

Estimated reading time: 3 minutes

In a previous article I demonstrated how to wrap text around bitmap images with CSS Shapes.  The process of creating a separate image mask to do so was a little complicated; for images that are simply circular, a lot of that complexity can be avoided.

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.