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.

Photograph of a ball calendar displaying a date

Using The HTML5 Date Input

html / forms

Estimated reading time: 6 minutes

Any online form that requires a scheduling, appointment or a booking function usually needs some kind of date picker. Traditionally this has been covered by JQuery or another JavaScript framework, but HTML5 features its own native date input, with good and growing browser support… with the unfortunate exception of Firefox and Safari, at least right now.

Web Developer Reading List: HTML5 Markup

reading lists / html

Estimated reading time: 1 minute

Most new HTML5 elements are covered in elsewhere in this blog (most particularly the forms and multimedia reading lists) but there are a few dozen tags that don’t fit into those categories. Most of these are section elements, newly introduced in HTML5, and are fundamental to the construction of a modern web page.

Goal: Build a page using HTML5 markup

Prerequisites: HTML5 Backgrounder

Total time: 3 hours

Move your mouse, tap, or wipe to compare videos. Footage © Orchard Film Studios

HTML5 Video Before-and-After Comparison Slider

html / multimedia

Estimated reading time: 3 minutes, 45 seconds

Recently a reader, inspired by my recent explorations into before-and-after comparison sliders for images, wrote to me with an interesting question: could the same effect be achieved with video?

At first, the solutions I came up with seemed rather complex: my initial thought was to take the feeds from the before and after videos and pipe them into a <canvas> element, moving the divisor there. While an intriguing possibility – and one that remains worthy of future exploration – I found that my initial experiments suffered badly in both performance and UI.

Frustrated, I set the problem aside for a while. The biggest challenge was that variations of my original technique seemed not to apply: my earlier responsive solutions had all depended on the fact that a could be scaled alongside a real <img> using background-size: cover, but video can’t be made into a background, at least not without some hacks.

Then I had a moment of insight. What if I scaled one of the videos opposite to the slider effect? The code could start off very much the same as earlier comparators:

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.