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. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Photograph of a set of child alphabet blocks

Using Inline-Block In Web Development

css / the box model

Estimated reading time: 3 minutes, 45 seconds

Previously I’ve discussed what I called “the two kinds of element”: inline and block. That was an oversimplification for the purpose of instruction: in reality, HTML elements can have over a dozen different display values.  inline and block were the first and simplest values added to the CSS spec. display: table and its related values are almost as old, while and grid are the latest. Somewhere in the middle is inline-block.

Using inline-block can solve many common frustrations and limitations in web design, although not without introducing a few of its own.

Clarke’s Three Laws

  1. When a distinguished but elderly scientist states that something is possible, he is almost certainly right. When he states that something is impossible, he is very probably wrong.
  2. The only way of discovering the limits of the possible is to venture a little way past them into the impossible.
  3. Any sufficiently advanced technology is indistinguishable from magic.

Creating Decorated Ordered Lists With CSS

css / lists

Estimated reading time: 1 minute, 30 seconds

HTML ordered lists can be incremented in many different languages, but customizing the appearance of the leading numbers in each list item is rather difficult. Formatting the list in an and using font-feature-settings to produce a special numbers option is one possibility, but there is an easier method. By using the under-appreciated counters property – usually associated with generating point-numbered lists – we can customize the leading numbers with abandon.

Black and white photograph of Emilia Clarke as Daenerys Targaryen
Daenerys Targaryen
Black and white photograph of Peter Dinklage as Tyrion Lannister
Tyrion Lannister
Black and white photograph of Nikolaj Coster-Waldau as Jamie Lannister
Jamie Lannister
Black and white photograph of Kit Harington as Jon Snow
Jon Snow
Black and white photograph of  Richard Madden as Robb Stark
Robb Stark
Black and white photograph of Lena Headey as Cersei Lannister
Cersei Lannister

Easy Responsive Grid Layout With Flexbox

css / layouts

Estimated reading time: 4 minutes, 30 seconds

To celebrate the season 4 debut of HBO's Game of Thrones, and to help out my 1st year students with their fairly complex designs, I decided that today’s tutorial would be a grid layout.

The overall design could be achieved using many methods, including display: table-cell, inline-block, or even float. But perhaps the best and easiest method, at least for modern browsers, is flexbox.

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.