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 other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

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.

Woman wearing an ornate butterly-shaped mask, staring at the camera

Web Developer Reading List: CSS Shapes and Masks

reading lists / css

Estimated reading time: 1 minute

While there are many ways to mask content with CSS, until very recently, there weren’t any standardized, reliable methods of wrapping content around images. Lately, that has completely changed: new techniques and CSS modules have pushed web page layouts to the cusp of a revolution in design.

This reading list - constantly edited and growing - attempts to cover all of the applicable methods with useful, practical examples.

See the Pen position: sticky example by Dudley Storey (@dudleystorey) on CodePen.

position sticky: scroll-to-top-then-fixed in pure CSS

css / positioning

Estimated reading time: 6 minutes

For a time “dynamic fixed” elements were the hot web design feature: scroll a site and everything moved as expected, but when a particular element (often a menu bar, sometimes an advertisement) reached the top of the page it would fix itself in place, while the rest of the document continued to scroll underneath it. Scroll back, and the element would reattach itself to the document.

This behaviour - a dynamic hybrid between the standard position: static and position: fixed - was often added to a page with JQuery, via one of a hundred different plugins. Like many popular features, it was eventually adopted into an official specification, meaning that the effect could be achieved with native CSS, with no frameworks, scripts, or other dependencies… but in this case, the adoption process was (and continues to be) somewhat troubled.

A black and white photograph of a subway bench

Web Developer Reading List: Text Effects

reading lists / css

Estimated reading time: 1 minute

Text effects must be carefully applied in web design: they’re easily overused, and can look gaudy. But if you do need them, there’s a range of possible techniques.

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.