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.

See the Pen FvJDB by Dudley Storey (@dudleystorey) on CodePen.

Wrapping Text Around Circular Images With CSS Shapes

css / layout

Estimated reading time: 3 minutes

In a previous article I demonstrated how to wrap text around bitmap images with CSS Shapes.  The process of creating a separate image mask to do so was a little complicated; for images that are simply circular, a lot of that complexity can be avoided.

Photograph of green overlapping palm leaves

Create An HTML5 Site From Start To Finish, Part 5: Discovery

start to finish

Estimated reading time: 3 minutes, 45 seconds

Many web design agencies present “research” and “discovery” as synonyms, but they are perhaps best regarded as separate tasks that inform each other.

Animating CSS Background Blend Modes

css / backgrounds

Estimated reading time: 1 minute

There are only a few properties that can be animated: background-position, background-size, and background-color. With the addition of background-blend-mode to the CSS spec, this has been expanded slightly, albeit with limitations: we can only animate the property by alternating between blend modes and a value of normal. However, it’s also possible to animate background blends by using the other properties.

As one example, we might provide an enhanced impression of speed by altering background-position after hovering over a <div>:

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.