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

This article introduces you how to use HTML5 and CSS3 to quickly make post-it stickers special effects pictures, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Use HTML5/CSS3 to create a HTML page with the effect of post-it stickers. The effect is as follows:

(note: the text in the picture is pure apocryphal, funny purpose, if there are similarities, it is a coincidence, thank you!

Note: this effect can be seen in Safari, Chrome,Firefox and Opera, but not on IE because of the incomplete support for HTML5.

Step 1: create a basic HTML and a square

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

The code is as follows:

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:

The code is as follows:

* {margin:0; padding:0;} body {font-family:arial,sans-serif; font-size:100%; margin:3em; background:#666; color:#fff;} h3 text-decoration:none; color:#000; background:#ffc; display:block; height:10em; width:10em; padding:1em 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:

The code is as follows:

Then set the reference font:

The code is as follows:

Ul li h3 {font-size: 140%; font-weight: bold; padding-bottom: 10px;} ul li p {font-family: "Reenie Beanie" dagger, sans-serif, Microsoft Acer; 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:

The code is as follows:

Ul li a {text-decoration: none; color: # 000; background: # ffc; display: block; height: 10em; width: 10mm; padding: 1mm; / * Firefox * /-moz-box-shadow: 5px 5px 7px rgba; / * Safari+Chrome * /-webkit-box-shadow: 5px 5px 7px rgba

The effect is as follows:

Step 3: tilt the square

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

The code is as follows:

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 6 tilt:

The code is as follows:

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:

The code is as follows:

Ul li webkit-box-shadow: 10px 10px 7px rgba; box-shadow:10px 10px 7px rgba; box-shadow:10px 10px 7px rgba;-webkit-transform: scale;-moz-transform: scale;-o-transform: scale; position:relative;: index.5;}

Set z-index to 5 to allow the square to cover other squares when zooming in, and because focus is also set, the Tab key is also supported for switching access. The effect is as follows:

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:

The code is as follows:

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

The code is as follows:

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;}

In this way, we have achieved our final effect:

So far, we have made use of the basic features of HTML5 and CSS3 to make a good post-it note effect. HTML5/CSS3 is really powerful. If you add some advanced features, such as combining with JavaScript, you can achieve a more powerful effect.

On how to use HTML5 and CSS3 to quickly make post-it sticky special effects pictures to share here, I hope the above content can be of some help to 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.