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.

Mind The Gap: Six Causes of Unwanted Spaces In Page Layouts

css / layouts

Estimated reading time: 4 minutes

There are few problems more exasperating in front-end design than dealing with unexpected gaps in web page elements. Determining the cause of an extra few pixels inside a container, or the appearance of space between elements that are meant to exist seamlessly side-by-side, can soak up a great deal of developer’s time and effort.

To help, here’s a short list of the six most common causes for gaps, and their solutions:

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

Combining CSS clip-path and Shapes for New Layout Possibilities

css / layouts

Estimated reading time: 3 minutes, 30 seconds

Recently I’ve been thinking about how pages might start to break out of the “boxes inside boxes” trope that’s built up in web design over the past few years. One way to break through limitations is to merge two different creative possibilities: in this case, CSS clip-path and the Shapes module.

Understanding CSS Blend, Part 1: Darken and Lighten

css / blend modes

Estimated reading time: 2 minutes, 30 seconds

If you’re anything like most other designers, your experience with blend modes in Adobe applications is usually one of “Hmmm, I wonder which one of these will work this time?"

Now that blend modes are in CSS, we want to eliminate at least some of that confusion so that we can create great designs without guesswork.

The first clue to understanding blend modes actually comes from looking at the blend options available in an Adobe application. For example, PhotoShop CC on a Mac:

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.