Buy on Leanpub

Let’s begin

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 examples in the Codepen collection:

https://css3effects.com/code

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

1. Misc tips and tricks to get started
2. Creating shapes
3. Drawing with gradients
4. Skeuomorphic and depth
5. 3D effects
6. Animation

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 fixed 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.

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.

You can find me on internet:

• Website: makzan.net
• Twitter: @makzan
• Github: @makzan
• Codepen: @makzan

Thomas Mak is an award Winning trainer. Thomas Mak won a bronze medal in web design in WorldSkills 2003. Worldskills 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.

Thomas Mak has written several books. He wrote Multiplayer Flash Virtual World, HTML5 Games Development: Beginner’s Guide, HTML5 Games Development Hotshot, Flexbox Website.

Latest Version Update

Version 0.1—Finalizing the chapter headings In this version, I focus on adding chapter headings to finalize the content structure.

What’s expected in next update ?

In next version, I fill in the content and code example links into the book. Then, I can work on each code example and write the explanation and variant usage discussions.

Chapter 1—Misc Tips & Tricks to get started

Here are some tips and tricks that don’t feet into the 5 topics, but still worth sharing.

In this book, we use CSS to create different effects. Often the effect mixes different techniques together, from the most basic properties to the advanced 3D transform and animation setup.

So in this section, we go through some basic techniques that we will use to compose the effects throughout the book.

Pseudo Elements

Pseudo elements are :before and :after that create extra elements

Pseudo elements :after can be used to indicate extra information.

We can make use of these 2 extra elements for styling purpose. For example, we will create animated underline effects with pseudo elements at chapter 2.

Customizing checkbox and radio button

We can customize the style of checkbox and radio button by using the label, ~ adjacent selector and :checked pseudo class. This is by hiding the checkbox/radio and make use of the label to toggle the hidden checkbox/radio.

HTML

CSS

Creating a file list with checkbox and radio

Another example, we can use checkbox and radio to create folder toggling and file selection.

For each folder, their open state is toggled individually. And for file, assuming we allow single file editing, the files will be radio. Otherwise, the files will be checkbox too.

This technique makes use of the browser behavior so we don’t need to program the toggling ourself. We only need to style them up.

Text highlight effects

In this effect, we use the border-radius to create something unusual.

https://css3effects.com/text-highlight

Code snippet

They are all <mark> tags but with different classes for demo purpose.

CSS

Box Shadow basic

The most common shadow is a shadow with x-offset, y-offset, blur and color.

Code snippet

There are optional values being omitted here. They are inset and spread. The inset allows us to create realistic button switch. It creates an illusion of button that is lower that normal level.

The spread value allows us to expand or scale down the shadow effect. It is not common but we can use the spread to create interesting effects.

In chapter 2, Drawing shapes, we will use box-shadow to create pixel art effects. In chapter 4, Skeuomorphic and Design, we will also use box-shadow to create different realistic effects.

Using transition

Usually we put transition in normal selector. In such case the transition applies to both mouse in and out.

By using the transition, all the numeric value are changed over the given transition duration.

Numeric value includes position, dimension, color.

But it the way, it is slow to transit top, left, width and height. We can use transform to move, scale and rotate an element with good performance.

Throughout the book, we’ll go through different techniques, which we enhance them by adding transition.

Chapter 2—Drawing Shapes

We can create shapes via CSS3.

We can draw:

• Circles
• Triangle
• Pie
• Tabs
• Pillow
• Irregular Circles

By using transition, we can also change the shape when mouse hovers or event occurs.

Drawing triangle

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.

Code snippets

The follow code snippet creates a triangle.

The following screenshot shows the result:

https://css3effects.com/triangle

How it work

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:

https://codepen.io/makzan/pen/qYrbvX

Chat bubble

https://css3effects.com/chat-bubble

CSS

Please note that the pseudo element must have the content to be rendered by browser. So if we don’t need any content, we still need to set the content:'' to empty.

Drawing circles

We can draw circles with border-radius on an element with same width and height dimension.

One key point is to make the element a square by setting width and height the same value. The 50% of border-radius makes this square a circle.

How it works

The 50% border-radius allows us to draw a full circle.

we can go beyond that, we can slightly adjust the border radius in 4 corners individually to make the circle feels like doodling.

Code example link:

https://css3effects.com/circle

CSS

Border image

To further enhance the doodling effect, we can use a dash or dotted borders. Furthermore, we can

Drawing pie

By combining the circle and triangle shape, we create a pie shape. It is still the triangle, but we apply border-radius on it.

Code snippet

Result

Code demo:

https://css3effects.com/pie

How it works

The size of shape depends on the border width. The width and height is set to zero.

Progress indicator with Pie shape

By combining these effects with pseudo elements, we can create a pie-shape progress indicator.

HTML

CSS

https://codepen.io/makzan/pen/LmMmOr

Drawing pixel art

We can use multiple box-shadows to draw multiple color blocks. When these blocks are square pixel, they are like pixel art.

Code example link: https://css3effects.com/pixel-download

HTML

CSS

How it works

The box-shadow allows multiple shadows separated with commas. By using 0px blur shadow on square element, we can create solid color blocks that simulate pixels.

When to use this effect?

Obviously it is unrealistic to create a large master piece of pixel art. But we can use this technique to create tiny pixel buttons.

Border radius

HTML

CSS

Animated underline effect

We can create an animated border by using pseudo-elements to simulate a border.

CSS

How it works

https://codepen.io/makzan/pen/LmxVYr

Chapter 3—Drawing with Gradients

1. Lines with linear gradient
2. Patterns with gradients

Linear gradient basic

A basic gradient may look boring at first. But we can create many useful effects with gradients.

Code example link: https://css3effects.com/gradient

HTML

CSS

How it works

The most basic usage of gradient is to have two colors that one color blends into the other color.

Drawing lines with linear gradient

Code example link: https://css3effects.com/gradient-lines

HTML

CSS

How it works

When two steps of gradients have the same value, the color changes sharply instead of blending.

When to use this effect?

This is useful when we need to create a line. This lines may not be equal width. For example, it can be a border on the right or at the bottom. It can also be a diagonal line.

Drawing repeat patterns with gradient

By using linear-gradient and repeating-linear-gradient, we can create different kind of pattern backgrounds.

How it works

The background-size allows us to make the gradient repeat via default background-repeat option.

Compose with several linear gradient

CSS3 allows multiple backgrounds. Linear gradient is a background. So we can create multiple linear gradients.

Chapter 4—Skeuomorphic and Depth

1. Box shadow
2. Growing effects
3. Inset shadow

Using shadow to create depth

One basic box shadow usage is to create depth illusion. In user interface, this is particular useful for overlay models and pop-up menus.

Drawing realistic buttons with box shadow

https://css3effects.com/inner-shadow-button

HTML

CSS

Light source

In real world, light casts shadow on surfaces. Assuming the light is from the top. The shadow at the bottom creates an elevation feeling. The shadow at the top create a concave effects.

Grow effect with text shadow

By using text-shadow

CSS

Chapter 5—3D Effects

3D effects main use the following properties

• transform: translate3d

3D Button

We can use transform, rotateX and :hover to create a 3D rotating button effect.

Code snippets

CSS

Code example link: https://codepen.io/makzan/pen/Alytd

How it works

The container is to prevent the transition stops and struggle when the element is between hover and non-hover state.

Perspective

Usually we set the perspective value to be between 300 and 800.

3D Card Flipping Effect

By using backface-visibility:hidden and 3D rotation, we can create a card flipping effect.

This is done by using 2 elements that acts as the .front.face and .back.face. They are put into a .card container.

Code snippets

https://codepen.io/makzan/pen/vxCdA

CSS

Parallax 3D Rotation

https://css3effects.com/parallax-card

HTML

CSS

How it works

The key to create parallax effect:

1. a container
2. the element to rotate, with preserve-3d
3. the children elements with translate-z

to remember the coordinate, I use left hand like this.

• The index finger is x-axis.
• The middle finger is y-axis.
• The thumb is z-index, pointing out of the screen.

And they all points to the positive direction.

Cube Rotation

https://css3effects.com/cube

HTML

CSS

How it works

The preserve 3d setting

3D Book Cover

https://css3effects/book-cover

HTML

CSS

Parallax Scene

How it works

https://codepen.io/makzan/pen/NxMyLM

Chapter 6—Animation

Transition with transform

http://codepen.io/makzan/pen/xOpoWd

HTML

CSS

Circular motion lines

We can use the techniques from Pie drawing to create circular motion lines.

At the end of the section, we will have the following effect created.

Let’s animate the motion line

We can put 2 more lines there by using pseudo-elements.

Wrapper with text

The following won’t work:

If we want to put a text at the center of the motion lines, you’ll find the text rotate with the lines as well.

That’s because we are rotating the .demo element. The text is inside the .demo element.

Extra CSS for positioning:

One element solution

The CSS that use pseudo-element to create the motion lines, instead of rotating the element itself.

From the example, you can find that we can have variants on the same effect. Sometimes we can create the effect by using one elements and its pseudo elements. Sometimes we may need extra elements and wrapper to achieve the result. Either way, we want to achieve the result effect and make it as elegant as possible, but if we can’t make it elegant, that’s okay to move on with a result with not-so-good HTML structure.

Circular motions

https://codepen.io/makzan/pen/PeWJdq

CSS

Circular loading animation

https://css3effects.com/circular-loading

HTML

CSS

Summary

In this book, we created different visual effects on web browser by using CSS3 techniques.

Thank you

Thanks for reading this book. Enjoy the CSS3 visual effects.

Detailed Version History

• 2018-02-20: Version 0.1.0—Initialize the book
• 2018-04-28: Version 0.1.1—Confirmed 80% of the sections headings. Writing code examples in Codepen collection: https://codepen.io/collection/DVpWNq/
• 2018-05-20: Version 0.1.2—Setup book domain css3effects.com.