👨🏻‍🏫 Web Visual Effects with CSS3

Class Notes (Legacy)

  • 📢 Introduction

    Hello, I am Thomas Mak.

    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 exapmles in the Codepen collection: https://codepen.io/collection/DVpWNq/

    There are 6 chapters of the book. Each chapter is a theme. They are:

    • Creating shapes
    • Drawing with gradients
    • Skeuomorphic and depth
    • 3D effects
    • Animation
    • Misc tips and tricks that’re worth sharing
  • 📢 About Author


    Thomas Mak, a.k.a. Makzan on internet, has been working in web design and development industry for more than 15 years. He write several books about multiple player virtual world and HTML5 mini games.

    On Internet: Makzan.net


    Award Winning trainer

    Thomas Mak won a bronze medal in web design in WorldSkills 2003. WorldSklls is an international skills competitions. Later, Thomas returned to WorldSkills as a mentor and has been training candidates to win gold, silver and bronze medal among competitors all over the world since 2009.

  • Chapter 1: Creating Shapes
  • ⌨️ Drawing triangle

    Link: https://codepen.io/makzan/pen/gzgmvd

    The triangle is done via border-color.

    The size of the triangle depends on the border-width. The direction of the triangle depends on which side of the border has color while the others has transparent.

    .demo {
      width: 0;
      height: 0;
      border: 30px solid transparent;
      border-bottom-color: gold;

    This is a trick on the borders. We can define different colors for each border.

    1. We make a normal element with border.
    2. We set different colors to each border.
    3. We get rid of the width and height.
    4. We make 3 of the borders transparent.

    If we want different direction of the triangle, we can simply set different border to be filled and keep the rest of the borders transparent.

    You can also find the interactive steps in the following URL:


    See the Pen Chapter 1—Explaining triangle by Thomas Seng Hin Mak (@makzan) on CodePen.

  • ⌨️ Drawing circles

    Link: https://codepen.io/makzan/pen/GdrWxX

  • 📢 Drawing pie

    .demo {
      width: 0;
      height: 0;
      border: 30px solid transparent;
      border-bottom-color: gold;
      border-radius: 50%;
  • Chapter 2: Drawing with Gradients