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.

See the Fullscreen Page Scroll With Background Reveal on CodePen

Background Reveal Scroll In Pure CSS

css

Estimated reading time: 2 minutes, 30 seconds

A popular presentation technique is something I call “background reveal scroll”: as the page is scrolled upwards, images are covered and revealed in the background.

While trendy, the technique does have the advantage of concentrating content into a few bold images and short pieces of text. However, the effect is often accomplished by loading a heavy JavaScript framework and a plugin; which, as I’ll show here, are entirely unnecessary in modern browsers.

Example of responsive, dynamically merged elements (click to view)

Merging Responsive Page Elements with JavaScript

mobile / responsive design

Estimated reading time: 2 minutes, 48 seconds

Responsive design is not about removing and shrinking web page components as the browser narrows: it’s about making the most of the space available in the viewport. Sometimes that means merging components, rather than taking them away. A prime example is the columnar layout of the kind shown above. On wide screens, the columns appear side-by-side:

A computer rendering of domino tiles formed into a diminishing spiral

Triggering JavaScript Actions With CSS Media Queries

javascript / events

Estimated reading time: 1 minute, 48 seconds

It’s common to use matchMedia in JavaScript to create behaviors at breakpoints for responsive sites. But the fact that matchMedia takes its own breakpoint values leads to inconsistencies and confusion between JavaScript actions and CSS media query events: changing the value for a CSS breakpoint inevitably means hunting down and changing the equivalent value in your scripts to keep them in sync. Ideally, responsive actions in JavaScript should be initiated by changes in CSS. We can achieve that, using a trick I picked up from Lukas Rydygel:

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.