Shulou(Shulou.com)06/01 Report--

This article is about how to use HTML5/CSS3 to quickly make post-it sticky special effects. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Step 1: create a basic HTML and a square

First, add the basic HTML structure and build the basic square, as follows:

XML/HTML Code copies content to the clipboard

Dudu:

How come there are no beautiful women to post recently? I must give you a headline recommendation, "endlessly recommended end!"

Uncle Tom:

A member of Team went to Microsoft to do SDE3, and got hire new member again.

Technical brother:

O2DS and I translated books are the same, I must turn faster than him, work overtime at night to translate, fast! Fast! Fast!

Artech:

There are really few posts on WCF. It seems that I have to post more posts for everyone to learn.

Jiri Gala:

Rights management, workflow management to the best of my ability, a person can only do so few things well

A martial arts master:

No more interviews for less than 25000 yuan, it's grandma.

A href connection is added to each note, mainly to support keyboard access. The CSS code is as follows:

View the original code

CSS Code copies content to the clipboard

* {

Margin:0

Padding:0

}

Body {

Font-family:arial,sans-serif

Font-size:100%

Margin:3em

Background:#666

Color:#fff

}

H3,p {

Font-size:100%

Font-weight:normal

}

Ul,li {

List-style:none

}

Ul {

Overflow:hidden

Padding:3em

}

Ul li a {

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 handwritten cursive characters

In this step, we need to achieve the shadow effect of the square and change the font to cursive (English only). Since google supports Font API, we can use it directly. First, add the call to Google API:

View the original code

XML/HTML Code copies content to the clipboard

Then set the reference font:

View the original code

XML/HTML Code copies content to the clipboard

Ul li h3

{

Font-size: 140%

Font-weight: bold

Padding-bottom: 10px

}

Ul li p

{

Font-family: "Reenie Beanie", arial,sans-serif, Microsoft Yahei

Font-size: 110%

}

As for shadows, they are not fully supported by each browser, so you need to deal with them separately. The code is as follows:

View the original code

XML/HTML Code copies content to the clipboard

Ul li a

{

Text-decoration: none

Color: # 000

Background: # ffc

Display: block

Height: 10em

Width: 10em

Padding: 1em; / * Firefox * /

-moz-box-shadow: 5px 5px 7px rgba (33 Safari+Chrome 3); / * 3

-webkit-box-shadow: 5px 5px 7px rgba (33 Opera. 7); / *

Box-shadow: 5px 5px 7px rgba (33recover.7)

}

The effect is as follows:

Tilted square

Step 3: tilt the square

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

View the original generation

XML/HTML Code copies content to the clipboard

Ul li a {

-webkit-transform:rotate (- 6deg)

-o-transform:rotate (- 6deg)

-moz-transform:rotate (- 6deg)

}

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

View the original code

CSS Code copies content to the clipboard

Ul li:nth-child (even) a {

-o-transform:rotate (4deg)

-webkit-transform:rotate (4deg)

-moz-transform:rotate (4deg)

Position:relative

Top:5px

}

Ul li:nth-child (3n) a {

-o-transform:rotate (- 3deg)

-webkit-transform:rotate (- 3deg)

-moz-transform:rotate (- 3deg)

Position:relative

Top:-5px

}

Ul li:nth-child (5n) a {

-o-transform:rotate (5deg)

-webkit-transform:rotate (5deg)

-moz-transform:rotate (5deg)

Position:relative

Top:-10px

}

The effect is as follows:

Step 4: scale the square when Hover and Focus

To achieve zooming in hover and focus, we need to add the following code:

View the original code

CSS Code copies content to the clipboard

Ul li a:hover,ul li a:focus {

-moz-box-shadow:10px 10px 7px rgba (0pd0re0pl .7)

-webkit-box-shadow: 10px 10px 7px rgba (0pc0pl 0pr .7)

Box-shadow:10px 10px 7px rgba (0pr 0re0pl .7)

-webkit-transform: scale

-moz-transform: scale

-o-transform: scale

Position:relative

Z-index:5

}

Setting z-index to 5 is to allow the square to cover other squares when zooming in, and because focus is also set, the Tab key is also supported to switch access.

The effect is as follows:

Smooth transition and add color

Step 5: smooth transition and add colors

The special effect of step 4 looks a little stiff. We can add Transition to achieve the effect of smooth animation. In addition, the color is relatively single. We can set different colors. First, add Transition in ul- > li- > a:

View the original code

CSS Code copies content to the clipboard

-moz-transition:-moz-transform .15s linear

-o-transition:-o-transform .15s linear

-webkit-transition:-webkit-transform .15s linear

Then define different colors in even and 3n:

View the original code

CSS Code copies content to the clipboard

Ul li:nth-child (even) a {

-o-transform:rotate (4deg)

-webkit-transform:rotate (4deg)

-moz-transform:rotate (4deg)

Position:relative

Top:5px

Background:#cfc

}

Ul li:nth-child (3n) a {

-o-transform:rotate (- 3deg)

-webkit-transform:rotate (- 3deg)

-moz-transform:rotate (- 3deg)

Position:relative

Top:-5px

Background:#ccf

}

Thank you for reading! This is the end of the article on "how to use HTML5/CSS3 to quickly make post-it stickers special effects". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.