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.

  1. Tunisia
  2. Botswana
  3. South Africa
  4. Kenya
  5. Nigeria
  6. Tanzania

A Custom Scrolling Element With Keyboard Accessibility

css / navigation

Estimated reading time: 3 minutes, 53 seconds

As a general rule, hiding important information inside a scrolling element is a poor idea, one more frequently used by designers because it “looks cool” rather than for solid UI reasons. But there are occasions when it’s necessary to do so… and when you do, the links inside still need to be via the keyboard.

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

Wrapping Text Around Circular Images With CSS Shapes

css / shapes

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.

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.