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:
There are 6 chapters of the book. Each chapter is a theme. They are:
Misc tips and tricks to get started
Drawing with gradients
Skeuomorphic and depth
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:
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.
Then we have How it works to explain how the code combinations create the effects.
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.
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:
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 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.
How it works
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.
They are all <mark> tags but with different classes for demo purpose.
Box Shadow basic
The most common shadow is a shadow with x-offset, y-offset, blur and color.
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.
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:
By using transition, we can also change the shape when mouse hovers or event occurs.
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.
The follow code snippet creates a triangle.
The following screenshot shows the result:
How it work
This is a trick on the borders. We can define different colors for each border.
We make a normal element with border.
We set different colors to each border.
We get rid of the width and height.
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:
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.
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.
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.
How it works
Let’s animate the motion line
We can put 2 more lines there by using pseudo-elements.
Let’s animate them all
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.
Password input transition
How it works
How it works
Circular loading animation
In this book, we created different visual effects on web browser by using CSS3 techniques.
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.
Leanpub requires cookies in order to provide you the best experience.