この記事に示すのは、HTML5/CSS3を使用して、わずか5ステップで粘着性のあるメモを備えたHTMLページを作成する方法です。レンダリングは次のとおりです。
（注：写真のテキストは純粋に製造されており、面白いです。類似点があれば、それは純粋に偶然です、ありがとう！）
注：この効果は、Safari、Chrome、Firefox、Operaで見ることができます。 HTML5のサポートはIEでは完全ではないため、効果はわかりません。
ステップ1：基本的なHTMLと正方形を作成します
最初に基本的なHTML構造を追加し、基本的な正方形を構築します。コードは次のとおりです。
<ul>
<li> <a href = "＃">
<h2> dudu：</h2>
<p>最近美しい投稿がなかったのはなぜですか？私は間違いなく見出しの推奨事項を与えます、お勧めです！</p>
</a> </li>
<li> <a href = "＃">
<h2>アンクルトム：</h2>
<p>チームのメンバーはSDE3を行うためにマイクロソフトに行きました、そして、彼は再び新しいメンバーを雇わなければなりませんでした</p>
</a> </li>
<li> <a href = "＃">
<h2>技術兄弟：</h2>
<p> o2dsは、私が翻訳した本と同じです。私は彼よりも速く翻訳する必要があります。夜の時間は速く働きます！速い！速い！</p>
</a> </li>
<li> <a href = "＃">
<h2> artech：</h2>
<p> WCFには非常に少ない投稿があります。誰もが学習するためにもっと投稿を投稿しなければならないようです</p>
</a> </li>
<li> <a href = "＃">
<h2> Jirigala：</h2>
<p>許可管理とワークフロー管理を私の能力の極端にするために、人はそれほど少数のことしかうまくできません</p>
</a> </li>
<li> <a href = "＃">
<h2>格闘技の達人：</h2>
<p>私は25,000元未満でインタビューに行くことはありません、それはおばあちゃんです</p>
</a> </li>
</ul>
各メモは、主にキーボードアクセスをサポートするためにHREF接続を追加し、CSSコードは次のとおりです。
*{
マージン：0;
パディング：0;
}
体{
フォントファミリー：arial、sans-serif;
フォントサイズ：100％;
マージン：3em;
背景：＃666;
色：#ffff;
}
H2、p {
フォントサイズ：100％;
font-weight：正常;
}
ul、li {
リストスタイル：なし;
}
ul {
オーバーフロー：隠し;
パディング：3em;
}
ul li a {
テキスト装置：なし;
色：＃000;
背景：#ffc;
表示：ブロック;
高さ：10em;
幅：10em;
パディング：1EM;
}
ul li {
マージン：1EM;
フロート：左;
}
効果は次のとおりです。
ステップ2：影と手書きの筆記体
このステップは、正方形の影の効果を実現し、フォントをSage（英語のみ）に変更することです。 GoogleはFont APIのサポートを提供しているため、直接使用できます。まず、Google APIへの呼び出しを追加します。
<link href = "http://fonts.googleapis.com/css？family = reenie+beanie：remulary" rel = "styleSheet" type = "text/css">
次に、このフォントへの参照を設定します。
ul li H2
{
フォントサイズ：140％;
font-weight：bold;
パディングボトム：10px;
}
ul li p
{
フォントファミリー：「Reenie Beanie」、Arial、Sans-Serif、Microsoft Yahei;
フォントサイズ：110％;
}
影に関しては、各ブラウザはそれらを完全にサポートしていないため、個別に処理する必要があり、コードは次のとおりです。
ul li a
{
テキスト装置：なし;
色：＃000;
背景：#ffc;
表示：ブロック;
高さ：10em;
幅：10em;
パディング：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）;
}
効果は次のとおりです。
ステップ3：正方形を傾けます
正方形を傾けるには、次のコードをli-> aに追加する必要があります。
ul li a {
-webkit-transform：回転（-6deg）;
-o-transform：rotate（-6deg）;
-moz-transform：回転（-6deg）;
}
しかし、正方形の傾きをランダムにするために、すべての傾斜の代わりに、新しいCSS3セレクターを使用する必要があります。これにより、正方形は2つに4度、3度に3度、6度に5度を傾けるようにする必要があります。
ul li：nth-child（偶数）a {
-o-transform：Rotate（4DEG）;
-webkit-transform：回転（4DEG）;
-moz-transform：Rotate（4DEG）;
位置：相対;
トップ：5px;
}
ul li：nth-child（3n）a {
-o-transform：Rotate（-3deg）;
-webkit-transform：回転（-3deg）;
-moz-transform：Rotate（-3deg）;
位置：相対;
上：-5px;
}
ul li：nth-child（5n）a {
-o-transform：回転（5deg）;
-webkit-transform：Rotate（5Deg）;
-moz-transform：Rotate（5Deg）;
位置：相対;
トップ：-10px;
}
効果は次のとおりです。
ステップ4：ホバーとフォーカス時に正方形をスケーリングします
ホバーとフォーカス時にスケーリング効果を実現するには、次のコードを追加する必要があります。
ul li A：ホバー、ul li A：フォーカス{
-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：スケール（1.25）;
-moz-transform：スケール（1.25）;
-o-transform：スケール（1.25）;
位置：相対;
z-index：5;
}
z-indexを5に設定することは、拡大時に正方形が他の正方形を覆うことを許可することです。同時に、フォーカスも設定されるため、タブキーの切り替えアクセスもサポートし、効果は次のとおりです。
ステップ5：滑らかな遷移と色を追加します
4番目のステップの特殊効果は、少し硬く見えます。トランジションを追加して、スムーズなアニメーション効果を実現できます。さらに、色は比較的単一です。さまざまな色を設定できます。まず、ul-> li-> aに遷移を追加します：
-moz-transition：-moz-transform .15s線形;
-o-transition：-o-transform .15s線形;
-webkit-transition：-webkit-transform .15s線形;
次に、偶数と3nで異なる色を定義します。
ul li：nth-child（偶数）a {
-o-transform：Rotate（4DEG）;
-webkit-transform：回転（4DEG）;
-moz-transform：Rotate（4DEG）;
位置：相対;
トップ：5px;
背景：#cfc;
}
ul li：nth-child（3n）a {
-o-transform：Rotate（-3deg）;
-webkit-transform：回転（-3deg）;
-moz-transform：Rotate（-3deg）;
位置：相対;
上：-5px;
背景：#ccf;
}
このようにして、最終的な効果が達成されます。
要約します
この時点で、HTML5とCSS3の基本的な機能を使用して、かなり優れたノートポスト効果を作成しました。 HTML5/CSS3は確かに非常に強力です。 JavaScriptと組み合わせるなど、いくつかの高度な機能を追加すると、より素晴らしい効果を達成できます。 Diante Brickから提供されたHTML5ラボラボシリーズの記事から見ることができます。
また、写真のテキストは純粋に製造されています。類似性がある場合、それは純粋に偶然です。ありがとう！