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

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.

Using the HTML5 meter Element

html / forms

Estimated reading time: 2 minutes, 30 seconds

The <progress> and <meter> elements are often lumped together, but they are quite distinct, and are used in very different ways on web pages.

Clinical, strongly blue-hued photograph of basement stairway in Charles B. Wang Center of Stony Brook University, New York

Using The HTML5 progress Element

html / forms

Estimated reading time: 5 minutes, 30 seconds

Aimless browsing on the web is changing to a goal-directed activity: uploading a file, completing a , working through a lesson plan, watching a . In response, we need a more complex web UI: not just signifiers for visited links, but ways of measuring progress.

HTML5 addresses that need with the <progress> element. Like all additions to HTML5, the <progress> element comes with supplementary and , which I’ll also cover in this article.

Auto-Generate Marks on HTML5 Range Sliders with JavaScript

javascript / forms

Estimated reading time: 1 minute, 48 seconds

Most web developers don’t realise that HTML5 range sliders can display graduation marks along their length by using an associated <datalist>:

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.