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

Try typing numbers into the field above and pressing the submit button to see the custom error message (Safari requires a polyfill)

Create Custom HTML5 Form Error Messages with the Title Attribute

html / forms

Estimated reading time: 1 minute, 43 seconds

In previous articles I’ve shown how to set custom error messages for with CSS and JavaScript. Recently Estelle Weyl demonstrated a method that seems to have gone largely unremarked in browser and spec documentation: form validation customization by using the title attribute.

Nambia Timelapse 1Nambia Timelapse 2Nambia Timelapse 3

Create A Simple HTML5 Video Playlist

html / multimedia

Estimated reading time: 4 minutes, 15 seconds

Last week two of my students wanted to know if there was a way to create a HTML5 video playlist without using a third-party service such as YouTube. They also wanted a solution that would be easy to implement.

One possible answer is to use to generate URL variables for a <video> element, an approach similar to the one I’ve provided in the simple server-side image gallery. There are also many JQuery plugin candidates, but it seemed excessive to load in a 100K framework just to create a playlist. Instead, I opted to show the students a solution using native , using the principles of progressive enhancement.

Photograph of Polina

Polina

filmed by Alexander Wagner 2011

fullscreen demo

Create Fullscreen HTML5 Page Background Video

html / multimedia

Estimated reading time: 3 minutes

While we can’t yet set a video for the background or background-image properties – they can only take bitmaps, images, and as values – it is possible to fake the appearance of a background video by forcing it behind other elements. The challenge is to have the video fill the browser window, making it as responsive as background images.

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.