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

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.

wise-man-thumb

A Modern HTML5 Lightbox in 12 Lines of JavaScript

javascript / galleries

Estimated reading time: 2 minutes, 15 seconds

“Lightbox” effects have been an established UI pattern for a decade, but the vast majority of implementations have been framework-dependent. In previous articles I’ve shown how to create a Lightbox UI using only CSS, although that version lacked controls. By adding the <dialog> element and a dozen lines of vanilla , we can recreate a traditional lightbox perfectly:

My father’s family name being Pirrip, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip.

Big, Beautiful Dropcaps with CSS initial-letter

css / typography

Estimated reading time: 3 minutes

While it’s long been possible to create traditional dropcaps on the web using the ::first-letter pseudo selector, the process has been difficult: not only does it require a lot of careful, precise , but any changes to the surrounding text, such as altering the typeface or line-height, push the dropcap out of alignment, whereas a good dropcap should always be “top and tail” with its associated text:

Hover to see the effect

Animated Image Changes with background-blend-mode

css / backgrounds

Estimated reading time: 1 minute

Opportunities to animate background properties are limited, but previous articles here have shown that it is possible to transition background-blend-mode with a little thought and cleverness. There’s at least one more possibility, shown above.

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.