What this article will show you is how to use HTML5/CSS3 to create an HTML page with sticky notes in just 5 steps. The renderings are as follows:
(Note: The text in the picture is purely fabricated and funny. If there is any similarity, it is purely a coincidence, thank you!)
Note: This effect can be seen in Safari, Chrome, Firefox and Opera. Since the support for HTML5 is not complete in IE, the effect cannot be seen.
Step 1: Create the basic HTML and squares
First add the basic HTML structure and build the basic square, the code is as follows:
<ul>
<li><a href="#">
<h2>Dudu:</h2>
<p>Why haven't there been any beautiful posts recently? I will definitely give a headline recommendation, recommend!recommend!</p>
</a></li>
<li><a href="#">
<h2>Uncle Tom:</h2>
<p>A member of Team went to Microsoft to do SDE3, and he had to hire new member again</p>
</a></li>
<li><a href="#">
<h2>Technical brother:</h2>
<p>O2DS is the same as the book I translated. I must translate it faster than him. Work overtime at night, fast! fast! fast!</p>
</a></li>
<li><a href="#">
<h2>Artech:</h2>
<p>There are so few posts in WCF. It seems that I have to post more posts for everyone to learn</p>
</a></li>
<li><a href="#">
<h2>Jirigala:</h2>
<p>To make permission management and workflow management to the extreme of my ability, a person can only do so few things well</p>
</a></li>
<li><a href="#">
<h2>A martial arts master:</h2>
<p>I will never go to the interview for less than 25,000 yuan, it's grandma</p>
</a></li>
</ul>
Each note adds a href connection, mainly to support keyboard access, and the CSS code is as follows:
*{
margin:0;
padding:0;
}
body{
font-family:arial,sans-serif;
font-size:100%;
margin:3em;
background:#666;
color:#ffff;
}
h2,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 effects are as follows:
Step 2: Shadows and handwritten cursive characters
This step is to realize the shadow effect of squares and change the font to sage (English only). Since Google provides support for Font API, we can use it directly. First, add a call to Google API:
<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">
Then set the reference to this font:
ul li h2
{
font-size: 140%;
font-weight: bold;
padding-bottom: 10px;
}
ul li p
{
font-family: "Reenie Beanie", arial, sans-serif, Microsoft Yahei;
font-size: 110%;
}
Regarding shadows, since each browser does not fully support them, they need to be processed separately, and the code is as follows:
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,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 effects are as follows:
Step 3: Tilt the square
In order to tilt the square, we need to add the following code in li->a:
ul li a{
-webkit-transform:rotate(-6deg);
-o-transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
}
But in order to make the square tilt randomly, instead of all tilting, we need to use the new CSS3 selector, so that the square tilts 4 degs every 2, negative 3 degs every 3, and 5 degs every 6:
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 effects are as follows:
Step 4: Scaling the square when Hover and Focus
To achieve the scaling effect when hover and focus, we need to add the following code:
ul li a:hover, ul li a:focus{
-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
position:relative;
z-index:5;
}
Setting z-index to 5 is to allow the square to cover other squares when enlargement. At the same time, because focus is also set, it also supports Tab key switching access, and the effect is as follows:
Step 5: Smooth transition and add colors
The special effects in the fourth step look a bit stiff. We can add Transition to achieve smooth animation effect. In addition, the colors are relatively single. We can set different colors. First, add Transition in ul->li->a:
-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:
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, our final effect is accomplished:
Summarize
At this point, we used the basic features of HTML5 and CSS3 to create a pretty good note-posting effect. HTML5/CSS3 is indeed very powerful. If you add some advanced features, such as combining them with JavaScript, you can achieve a more awesome effect. It can be seen from the HTML5 laboratory series articles given to you by Diante Brick.
Also: The text in the picture is purely fabricated. If there is any similarity, it is purely a coincidence. Thank you!