Use HTML 5/CSS3 five steps to quickly create a note effect, css3 five steps

Use HTML 5/CSS3 five steps to quickly create a note effect, css3 five steps

Use HTML 5/CSS3 to quickly create a note effect (1)
This article will show you how to use HTML5/CSS3 to create an HTML page with the effect of the notes in five steps, as shown below:
(Note: The Ghost text is purely fabricated and funny. It is a coincidence if there are similarities. 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:

• 
  
  
  
  • Dudu: h2>
  • Why haven't I posted beautiful posts recently? I must give a headline recommendation, recommend! Recommend! P>
  • A> li>
  • Uncle Tom: h2>
  • A member of the Team went to Microsoft for SDE3 and got hire new member p>
  • A> li>
  • Technical brother: h2>
  • O2DS is the same as the book I translated. I must translate it faster than him. I work overtime at night. fast! Fast! Fast! P>
  • A> li>
  • Artech: h2>
  • There are really few posts in WCF. It seems that I have to send more posts for everyone to learn. p>
  • A> li>
  • Giri gala: h2>
  • With permission management and workflow management, one person can only do a few things well. p>
  • A> li>
  • A martial arts expert: h2>
  • Less than 25000 yuan of interviews will no longer go, it's grandma p>
  • A> li>
  • Ul>
    • Http://html5.662p.com/thread-48-1-1.html