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

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.

A CSS Object-Fit Gallery

css / galleries

Estimated reading time: 1 minute, 30 seconds

The majority of web image galleries must load at least two copies of every photo: a small thumbnail and a full-size version. While this approach has its advantages, it has an equal number of annoyances and drawbacks.

My recent exploration of object-fit led me to experiment with using the property to improve image galleries, inspired by the work of Chris Mills. The only downside is that the thumbnail images will appear squished in browsers that do not yet support the property (Firefox and IE).

The Widescreen Web: Using CSS object-fit

css / the box model

Estimated reading time: 4 minutes, 15 seconds

Most everyone is familiar with the fact that movies are letterboxed, rescaled or cropped as they move from the theater to televisions and tablets. As a web developer, you’ll also be aware of the different ways background images can be made responsive on web pages, stretching to cover the viewport, or being cropped as the browser window resizes.

An obvious gap in web design is the lack of the same intelligent and automatic resizing rules for images and videos. That’s the role of CSS object-fit.

CSS Core Animation Skills: Gravity, Squash and Stretch

css / animation

Estimated reading time: 2 minutes

Previously I’ve talked about using ease-in and ease-out to enhance motion design. Those properties might also be called friction and inertia, both products of gravity.

Gravity is also a mood: heavy, intimidating and ponderous or light, engaging and playful. By recreating those kinds of movements using CSS, we can enliven our site interfaces with engaging motion. A simple example is the bouncing ball at the top of this article, the motion of which might be used to notify the user to a vital alert message. The markup is a single <div> element, styled and shaped to resemble a ball:

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.