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 HTML, CSS and SVG. To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

my books

Pro CSS3 Animation book coverPro CSS3 Animation, Apress, 2013

my other blogs

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

my projects

The New DefaultsThe New Defaults — A Sass color keyword system for designers.

CSSslidyCSSslidy — an auto-generated #RWD image slider. 3.8K of JS, no JQuery.

the new code – “Scribble” Image Reveal with SVG and Blend Modes

Using a combination of CSS animation, SVG dash-array and blend modes, we can recreate a “scratch to reveal” effect for images or other content in just five steps:

Bokeh Backgrounds with SVG and JS

Random blurred bokeh backgrounds with SVG and JavaScript

Responsive Image Hinting: Using the w Descriptor

Sending the best optimized images to Retina devices

Overlapping Action with CSS Animation

Making multiple animated elements from a single animation declaration

Better Diagrams with SVG and Blend Modes

Enhancing the appearance of diagrams and graphs with blend modes

SVG Meetup Presentation: Interactive Imagemaps

Presentation to the San Francisco SVG Meetup Group, July 15, 2015.

Web Developer Reading List: CSS Shapes and Masks

Using masks and shapes in CSS to create non-rectangular layouts

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

Making scroll-to-top-then-fixed work without JQuery, plugins, or even JS

SVG Backgrounds: Escher Tiles

The work of M.C. Escher as vector tiles

Web Developer Reading List: Text Effects

Text effects for web pages

Using SVG in Web Page Backgrounds: Diagonals and Patterns

An improved technique on trigonometry

Pop-Art Backgrounds with SVG and Blend Modes

Techniques combining images with blend modes and SVG patterns.

Styling Visited Links with SVG

Giving the user visual progression of links

Using SVG In Web Page Backgrounds: Stripes

From simple stripes to gingham and tartans

Web Developer Reading List: Exercises and Quizzes

The second best way to learn web development

Limitations on Styling Visited Links

Exploring the limitations of styling visited links

More Text Effects with Blend Modes

A CSS recreation of a Michael Bierut graphic design classic

Better Backgrounds with Blend Modes

Moving background overlays from staid to outstanding

Automatic Text Contrast with CSS Blend Modes

Fixing text problems with mix-blend-mode

Web Developer Reading List: JavaScript Fundamentals

Starting on your first JS code, aand debugging it effectively

Forcing a Webkit Repaint

Some coding techniques for when you absolutely, positively need Chrome, Safari and Opera to repaint

HTML5 Video Effects with CSS Blend Modes

Creating video effects with CSS

Code and Keys in HTML: Using the code, var, samp and kbd elements

Representing and styling code on web pages

Web Developer Reading List: Favicons

The final finishing step to a site

Tools
HTML
CSS Introduction Color Selectors Typography The Box Model Images Galleries Filters Backgrounds Lists Navigation Positioning Layouts Flexbox Shadows Blend Modes Gradients Animation 3d Print Resets
PHP
JavaScript
MySQL
SVG
Accessibility
Design
Servers
Mobile
SEO
Students
Books
Reading Lists

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.