Making Sticky notes with HTML5/CSS3

With HTML5/CSS3, you can create an HTML page with a sticky note effect in just 5 steps, as follows:

(Note: The text is purely fictional, funny purpose, if there is a similar, purely coincidental, thank you!)

Note: This effect can be seen in Safari, Chrome,firefox and Opera in the results, ie on the support of HTML5 is not complete, so do not see the effect.

First step: Create basic HTML and squares

First add the basic HTML structure and build the basic square with the following code:

xml/html Code copy content to clipboard

2. <ul>
4. <li><a href= "#">
6. <h2>dudu:</h2>
8. <p> I don't have a beauty post recently? I must give a headline, recommend!recommend!. </P>
10. </a></li>
12. <li><a href= "#">
14. <H2> Uncle Tom:</h2>
16. a member of < P >team went to Microsoft to do SDE3, and hire new member </P>
18. </a></li>
20. <li><a href= "#">
22. <H2> Technology brother:</h2>
24. <p>o2ds and I translated the book is the same, I must be faster than his turn, night overtime turn, fast! fast! fast! </P>
26. </a></li>
28. <li><a href= "#">
30. <h2>artech:</h2>
32. <p>WCF posts are very few, it seems I have to send a few posts to let everyone learn </P>
34. </a></li>
36. <li><a href= "#">
38. <h2> Gizhgara:</h2>
40. <p> Manage permissions and Workflow management to the extreme of my ability, a person can only do so few things </P>
42. </a></li>
44. <li><a href= "#">
46. <H2> a martial arts expert:>
48. <P> less than 25000 pieces of the interview will not go again, it Grandma </P>
50. </a></li>
52. </ul>

Each note adds an HREF connection, primarily to support keyboard access, and the CSS code is as follows:

View original Code

CSS Code copy content to clipboard

2. *{
4. margin:0;
6. padding:0;
8. }
10. body{
12. font-family:Arial,Sans-serif;
14. font-size:100%;
16. Margin:3em;
18. Background:#666;
20. Color:#fff;
22. }
24. h2,p{
26. font-size:100%;
28. Font-weight:normal;
30. }
32. ul,li{
34. List-style:none;
36. }
38. ul{
40. Overflow:hidden;
42. Padding:3em;
44. }
46. UL Li a{
48. Text-decoration:none;
50. Color:#000;
52. Background:#ffc;
54. Display:block;
56. Height:10em;
58. Width:10em;
60. Padding:1em;
62. }
64. UL li{
66. Margin:1em;
68. float: Left;
70. }

The effect is as follows:

Step two: Shadow and handwritten cursive words

This step, we want to achieve a square shadow effect, and change the font to cursive (English only), because Google provides the font API support, so we can directly use, first add to the Google API call:

View original Codexml/html Code copy content to clipboard

1. <link href= "Http://fonts.googleapis.com/css? " family=reenie+beanie:regular " rel=" stylesheet " type=" Text/css ">

Then set the reference to this font:

View original Codexml/html Code copy content to clipboard

1. UL Li H2
2. {
3. font-size:140%;
4. Font-weight:bold;
5. padding-bottom:10px;
6. }
7. UL Li P
8. {
9. font-family: "Reenie Beanie", Arial,sans-serif, Microsoft ya Black;
10. font-size:110%;
11. }

With regard to shadows, because each browser is not fully supported, it needs to be processed separately, the code is as follows:

View original Codexml/html Code copy content to clipboard

1. UL Li a
2. {
3. Text-decoration:none;
4. Color: #000;
5. Background: #ffc;
6. Display:block;
7. Height:10em;
8. Width:10em;
9. Padding:1em; /* Firefox */
10. -moz-box-shadow:5px 5px 7px Rgba (33,33,33,1); /* Safari+chrome */
11. -webkit-box-shadow:5px 5px 7px Rgba (33,33,33,.7); /* Opera */
12. box-shadow:5px 5px 7px Rgba (33,33,33,.7);
13. }

The effect is as follows:

Tilt the Square

Step three: Tilt the square

To make the square tilt, we need to add the following code to the Li->a:

View Original Generationxml/html Code copy content to clipboard

1. UL Li a{
2. -webkit-transform:rotate ( -6DEG);
3. -o-transform:rotate ( -6DEG);
4. -moz-transform:rotate ( -6DEG);
5. }

But in order for the square to tilt randomly instead of all, we need to use the new CSS3 selector to let the square tilt 4 deg per 2, 3 deg per 3 tilt, 5 deg per 5:

View original CodeCSS Code copy content to clipboard

2. UL Li:nth-child (even) a{
4. -o-transform:rotate (4DEG);
6. -webkit-transform:rotate (4DEG);
8. -moz-transform:rotate (4DEG);
10. Position:relative;
12. Top:5px;
14. }
16. UL Li:nth-child (3n) a{
18. -o-transform:rotate ( -3DEG);
20. -webkit-transform:rotate ( -3DEG);
22. -moz-transform:rotate ( -3DEG);
24. Position:relative;
26. top:-5px;
28. }
30. UL Li:nth-child (5n) a{
32. -o-transform:rotate (5DEG);
34. -webkit-transform:rotate (5DEG);
36. -moz-transform:rotate (5DEG);
38. Position:relative;
40. top:-10px;
42. }

The effect is as follows:

Fourth step: hover and focus when the square is indented

To achieve the zoom effect when hover and focus, we need to add the following code:

View original CodeCSS Code copy content to clipboard

2. UL Li A:hover,ul Li a:focus{
4. -moz-box-shadow:10px 10px 7px rgba (0,0,0,.7);
6. -webkit-box-shadow: 10px 10px 7px rgba (0,0,0,.7);
8. Box-shadow:10px 10px 7px rgba (0,0,0,.7);
10. -webkit-transform:scale (1.25);
12. -moz-transform:scale (1.25);
14. -o-transform:scale (1.25);
16. Position:relative;
18. Z-index:5;
20. }

The Z-index is set to 5 to allow the square to cover the other squares when zoomed in, and because the focus is also set, it also supports tab switch access.

The effect is as follows:

Smooth transitions and add colors

Fifth step: Smooth transitions and add colors

The fourth step of the effect, looks a bit stiff, we can add transition to achieve smooth animation effect, in addition to a single color, we can set a different color, first in the Ul->li->a to add transition:

View original CodeCSS Code copy content to clipboard

1. -moz-transition:-moz-transform. 15s linear;
2. -o-transition:-o-transform. 15s linear;
3. -webkit-transition:-webkit-transform. 15s linear;

Then define the different colors in even and 3n:

View original CodeCSS Code copy content to clipboard

2. UL Li:nth-child (even) a{
4. -o-transform:rotate (4DEG);
6. -webkit-transform:rotate (4DEG);
8. -moz-transform:rotate (4DEG);
10. Position:relative;
12. Top:5px;
14. Background:#cfc;
16. }
18. UL Li:nth-child (3n) a{
20. -o-transform:rotate ( -3DEG);
22. -webkit-transform:rotate ( -3DEG);
24. -moz-transform:rotate ( -3DEG);
26. Position:relative;
28. top:-5px;
30. Background:#ccf;
32. }

In this way, we have finished our final effect:

Summarize

So far, we have used the basic features of HTML5 and CSS3 to make a good sticky note paste effect, HTML5/CSS3 is really very powerful, if you add some advanced features, such as the combination with JavaScript, can achieve a better effect, From when the resistance special brick home to everyone's HTML5 laboratory series article, can be seen.