Web Visual Effects with CSS3

Hello, I am Thomas Mak (a.k.a. Makzan).

This is a book with examples and solutions to create practical visual effects on web by using CSS3.

The purpose of this book is to let you use the effect right away. You can directly use the code examples in your web projects.

You can find all the code examples in the Codepen collection:


In each chapter, there are different sections covering one topic. For example, drawing lines, linear gradient techniques, making realistic buttons.

In each section, we have similar format:

  1. First, there are Code snippet for quick take away if you just want to clone the effect. Each code snippet comes with a link to online editor for interactive demo and quick editing.
  2. Then we have How it works to explain how the code combinations create the effects.
  3. Next, we have further discussions on When to use the effect which we create different variants. This section allows you to use the code examples into different kind of real world situations.

Looking for CSS Layout technique?

Note: When I plan this book, I exclude the CSS layout because it worths a dedicated book. And the skill set that builds solid layout is different than making individual effects.

For my CSS layout tutorials, please check:

  1. http://Flexbox.website
  2. http://CSSGrid.website

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.