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.


Dudley Storey

Dudley StoreyI’m a teacher, writer, designer, craftsman and avid cyclist living in Calgary, Alberta, Canada. My passion is web and mobile development, which I have taught for the last 15 years. I’m the author of Pro CSS3 Animation (Apress, 2013); my writing has also appeared in many places on the web.

I created this blog six years ago, partly out of personal interest but also to create a web development resource for my classes. As the complexity and power of the web continues to grow, so do the articles here. Opinions expressed are always my own.


Office Hours

I have regular “office hours” every week on Skype for questions and conversation: you are welcome to make a booking via YouCanBookMe

Use & Syndication

This blog has an RSS feed; updates are also shared on @dudleystorey and on my Facebook and Google+ pages. The content of this blog is free to use, translate and republish under a Creative Commons license that permits non-commercial sharing with attribution.


This site is hand-coded in valid , , and . My primary IDE is Coda; and Illustrator are used for graphics, which are compressed using ImageOptim.

Icons are generated from the semantic iconfonts SS Standard and SS Social, provided by SymbolSet. Code sample syntax is highlighted using a modified version of Lea Verou’s prism.js. The font for code samples is Inconsolata by Raph Levien; body text is set in Avenir, from

The site is hosted at Digital Ocean, with a Git repository on Bitbucket deployed via

I’ve left a “maximized”, commented version of the site’s stylesheet available: styles.max.css. If you find the stylesheet is minified and optimized, a browser extension such as prettyprint (Chrome) or Firebug will clean it right up.

Writing & Appearances

Cover of issue 249 of net magazine

Smashing Magazine

Entrepenuer Magazine

“Ask A Geek” column, February 2015

net Magazine

Create Responsive SVG Image Maps, Issue #249, January 2014

Shop Talk Show

I was interviewed on episode #92

The Dirt

The hosts interviewed me on Part 3 of their Educating The Web series

A Student’s Guide To Web Design


Pro CSS3 Animation Apress, 2013


The Circle Is (Almost) Complete, CSSConf Florida 2014 (SVG)


This blog follows WAIS 2.0 standards for accessibility, with ARIA roles used for sections. Shortcut keys are:

Accesskeys for
0About / Help (this page)
,Previous article / month
.Next article / month


Ad-Free BlogI do not host or accept advertising on this site, although I do use Amazon affiliate links on products featured in articles. I do not participate in “link exchanges” or other promotion.

If you have a product, , or service that you'd like me to review, please contact me. Note that I will not accept payment for reviews.

Browser Compatibility

This is a web development blog that highlights cutting-edge techniques and technologies; as such, it does not attempt to support older browsers that lack compatibility with web standards. Most particularly, IE 8 and earlier are not catered to.

Mobile devices, including iPhone, iPad, Android and Blackberry, are also supported, assuming they have recent OS software.

If you have an up-to-date browser or device and believe you’ve spotted an error, I’d very much appreciate receiving an eMail. Similarly, please contact me or leave a comment in an appropriate article if you have a feature request or suggestion.


Leaving a comment

Leaving a comment is very easy: users can sign in with Twitter, Facebook, Google+ or Disqus, the service used to host comments.

Comment Markup

Most standard HTML code is accepted in comments, including links, blockquote, strong and em. Code samples can be indicated by intending by surrounding them with <code> tags. Code blocks can be marked up with <code><pre>. More information on comment markup is available at the Disqus site.

Prohibited markup in comments

Some markup will be stripped out of content, due to space or security concerns. This includes tables, linked images and video.

Ownership of comments

Every commenter owns (and is responsible for) their contribution.

Retraction of comments

It is possible to retract comments: contact me. I reserve the right to remove any comments unilaterally.


Visitor privacy is always respected: you will never be contacted via eMail from this site, nor will your information be shared with anyone else. Cookies and local storage may be used, but only to store your history of navigational choices on the blog.

Why Demosthenes?

DemosthenesDemosthenes (384 – 322 BC) was a Greek orator, jurist and statesman of ancient Athens, noted his self-improvement, intelligence and oratory. A staunch defender of his city-state and a leading figure against the rise of Phillip II of Macedonia, his place in the revolt against Phillip’s successor led to his expulsion, suicide, and very Greek death.

The name Demosthenes was used as an online pseudonym in Orson Scott Card’s Ender’s Game, which was one of my favourite books as a youth. As a historical figure Demosthenes was inspirational to me, epitomizing the qualities of self-improvement, self-reliance, rhetoric, honor, and logical argument. I have used “Demosthenes” as an online identity from the moment I discovered the Internet.