Use HTML5/CSS3 5 steps to quickly create a note Effect

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

Copy to ClipboardReference: [www.bkjia.com] <ul>
<Li> <a href = "#">
<H2> Dudu: <P> Why haven't I posted beautiful posts recently? I must give a headline recommendation, recommend! Recommend! </P>
</A> </li>
<Li> <a href = "#">
<H2> Uncle Tom: <P> A member of the Team went to Microsoft for SDE3, and got hire new member again. </p>
</A> </li>
<Li> <a href = "#">
<H2> technical brother: <P> 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>
<Li> <a href = "#">
<H2> Artech: <P> there are really few posts in WCF. It seems that I have to send more posts for you to learn. </p>
</A> </li>
<Li> <a href = "#">
<H2> Jiri gala: <P> permission management and workflow management are the ultimate capabilities. A single person can do only a few things well. </p>
</A> </li>
<Li> <a href = "#">
<H2> a martial arts expert: <P> no more interviews for less than 25000 pieces, its grandma </p>
</A> </li>
</Ul>

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

Copy to ClipboardReference: [www.bkjia.com] * {
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:

Copy to ClipboardReference: [www.bkjia.com] <link href = "http://fonts.googleapis.com/css? Family = Reenie + beeni: regular "rel =" stylesheet "type =" text/css ">

Then set to reference this font:

Copy to ClipboardReference: [www.bkjia.com] 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:

Copy to ClipboardReference: [www.bkjia.com] 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->:

Copy to ClipboardReference: [www.bkjia.com] 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:

Copy to ClipboardReference: [www.bkjia.com] 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:

Copy to ClipboardReference: [www.bkjia.com] 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->:

Copy to ClipboardReference: [www.bkjia.com]-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:

Copy to ClipboardReference: [www.bkjia.com] 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!

Reference original post: Click to access