In five steps, you can use HTML5/CSS3 to quickly create a special effect (figure) _ html5 tutorial-

Using CSS and HTML5 to create a beautiful tag effect this text will show you how to use HTML5/CSS3 to create an HTML page with a note effect in just five steps, as shown below:
(Note: The Ghost text is purely fabricated and funny. If there are similarities, it is a coincidence. Thank you !)

Note: This effect can be seen in Safari, Chrome, Firefox, and Opera. on IE, HTML5 is not fully supported, so it cannot be seen.
Step 1: create basic HTML and square
First, add the basic HTML structure and construct the basic square. The Code is as follows:

The Code is as follows:

• 
  Dudu:
  

  Why haven't I posted beautiful posts recently? I must give a headline recommendation, recommend! Recommend!

  
  


• 
  Uncle Tom:
  

  A member of the Team went to Microsoft for SDE3 and got hire new member.

  
  


• 
  Technical brother:
  

  O2DS is the same as the book I translated. I must translate it faster than him. I work overtime at night. fast! Fast! Fast!

  
  


• 
  Artech:
  

  There are really few posts in WCF. It seems that I have to send more posts for you to learn.

  
  


• 
  Giri gala:
  

  With permission management and workflow management, one person can only do so few things well.

  
  


• 
  A martial arts expert:
  

  Less than 25000 yuan of interviews will no longer go, it's grandma's

  
  

Each note is connected with an href connection to support keyboard access. The CSS code is as follows:

The Code is as follows:

*{
Margin: 0;
Padding: 0;
}
Body {
Font-family: arial, sans-serif;
Font-size: 100%;
Margin: 3em;
Background: #666;
Color: # fff;
}
H2, p {
Font-size: 100%;
Font-weight: normal;
}
Ul, li {
List-style: none;
}
Ul {
Overflow: hidden;
Padding: 3em;
}
Ul li {
Text-decoration: none;
Color: #000;
Background: # ffc;
Display: block;
Height: 10em;
Width: 10em;
Padding: 1em;
}
Ul li {
Margin: 1em;
Float: left;
}

The effect is as follows:

Step 2: Shadow and handwriting
In this step, we need to implement the shadow effect of a square and change the Font to a grass (only in English). Because google provides support for the Font API, we can directly use it, first, add a call to Google API:

The Code is as follows:

Then set to reference this font:

The Code is as follows:

Ul li h2
{
Font-size: 140%;
Font-weight: bold;
Padding-bottom: 10px;
}
Ul li p
{
Font-family: "Reenie beeni", arial, sans-serif,;
Font-size: 110%;
}

As shadow is not fully supported by browsers, you need to handle the shadow separately. The Code is as follows:

The Code is as follows:

Ul li
{
Text-decoration: none;
Color: #000;
Background: # ffc;
Display: block;
Height: 10em;
Width: 10em;
Padding: 1em;/* Firefox */
-Moz-box-shadow: 5px 5px 7px rgba (33,33, 33,1);/* Safari + Chrome */
-Webkit-box-shadow: 5px 5px 7px rgba (33,33, 33,. 7);/* Opera */
Box-shadow: 5px 5px 7px rgba (33,33, 33,. 7 );
}

The effect is as follows:

Step 3: Tilt the square
To tilt the square, add the following code in li->:

The Code is as follows:

Ul li {
-Webkit-transform: rotate (-6deg );
-O-transform: rotate (-6deg );
-Moz-transform: rotate (-6deg );
}

However, in order to make the square tilt randomly, rather than all, we need to use the new CSS3 selector to make the square tilt 4 deg at every 2, and 3 deg at every 3, tilt 5 deg per 6:

The Code is as follows:

Ul li: nth-child (even) {
-O-transform: rotate (4deg );
-Webkit-transform: rotate (4deg );
-Moz-transform: rotate (4deg );
Position: relative;
Top: 5px;
}
Ul li: nth-child (3n) {
-O-transform: rotate (-3deg );
-Webkit-transform: rotate (-3deg );
-Moz-transform: rotate (-3deg );
Position: relative;
Top:-5px;
}
Ul li: nth-child (5n) {
-O-transform: rotate (5deg );
-Webkit-transform: rotate (5deg );
-Moz-transform: rotate (5deg );
Position: relative;
Top:-10px;
}

The effect is as follows:

Step 4: scale down the square at Hover and Focus
To achieve scaling during hover and focus, we need to add the following code:

The Code is as follows:

Ul li a: hover, ul li a: focus {
-Moz-box-shadow: 10px 10px 7px rgba (0, 0,. 7 );
-Webkit-box-shadow: 10px 10px 7px rgba (0, 0,. 7 );
Box-shadow: 10px 10px 7px rgba (0, 0,. 7 );
-Webkit-transform: scale (1.25 );
-Moz-transform: Scaling (1.25 );
-O-transform: scale (1, 1.25 );
Position: relative;
Z-index: 5;
}

Setting the z-index to 5 is to make the square cover other squares when it is zoomed in, and because the focus is also set, access by switching the Tab key is also supported. The effect is as follows:

Step 5: smooth transition and add colors
The special effect in Step 4 looks a little stiff. We can add Transition to smooth the animation. In addition, if the color is relatively simple, we can set different colors, first, add Transition in ul-> li->:

The Code is as follows:

-Moz-transition:-moz-transform. 15 s linear;
-O-transition:-o-transform. 15 s linear;
-Webkit-transition:-webkit-transform. 15 s linear;

Then define different colors in even and 3n:

The Code is as follows:

Ul li: nth-child (even) {
-O-transform: rotate (4deg );
-Webkit-transform: rotate (4deg );
-Moz-transform: rotate (4deg );
Position: relative;
Top: 5px;
Background: # cfc;
}
Ul li: nth-child (3n) {
-O-transform: rotate (-3deg );
-Webkit-transform: rotate (-3deg );
-Moz-transform: rotate (-3deg );
Position: relative;
Top:-5px;
Background: # ccf;
}

This completes our final results:

Summary
So far, we have used the basic features of HTML5 and CSS3 to make a good note sticker effect, HTML5/CSS3 is indeed very powerful, if you are adding some advanced features, such as combining with JavaScript, we can see from the HTML5 lab series provided by the Anet brick house.
In addition, the text of ghost is purely fabricated. If there are similarities, it is a coincidence. Thank you!