わずか 5 つのステップで、HTML5/CSS3 を使用して付箋効果をすばやく作成できます (写真)_html5 チュートリアルのヒント

この記事では、HTML5/CSS3 を使用して、たった 5 つのステップで付箋効果のある HTML ページを作成する方法を説明します。レンダリングは次のとおりです。
(注: 画像内のテキストは純粋に捏造されたものであり、面白い目的で使用しています。類似点はまったくの偶然です。ありがとうございます!

注: この効果は、HTML5、IE のサポートが不完全であるため、表示されません。効果。
ステップ 1: 基本的な HTML と正方形を作成する
まず、基本的な HTML 構造を追加し、基本的な正方形を構築します。コードは次のとおりです:

コードをコピーします

コードは次のとおりです:

• ドゥドゥ:

  
  

  最近美しい女性が投稿しないのはなぜですか?必ず見出しを推奨します。推奨します!

  
  
;h2>アンクル トム:


チームのメンバーが SDE3 に取り組むために Microsoft に行ったため、新しいメンバーを雇わなければなりませんでした
; li>


• 
  

  技術兄弟:
  

  私は彼よりも早くなければなりません、早く!

  
  
• a href=" #">


• 
  

  ジリ・ガラ:

  🎜>

  一人でできることは限られています。
  
  

  某武術家:

  25,000元未満では二度と面接に行きません。おばあちゃんです
  

主にキーボード アクセスをサポートするために、href 接続を追加します。 、CSS コードは次のとおりです:





コードをコピー


コードは次のとおりです:

*{
margin:0;

}

body{ font-family:arial,sans-serif; マージン:3em ; 背景:#666; カラー:#fff;

h2,p{

フォントサイズ:100%; :normal;

}
li{
リストスタイル:none;
ul{
パディング:3em>}
ul li a {
色:#000;
表示:ブロック;
幅:10em;
パディング:1em;
}
margin:1em;
float:left;





ステップ 2: シャドウと手書きの筆記体
このステップでは、正方形のシャドウ効果を実現し、フォントを Google が提供する筆記体 (英語のみ) に変更します。フォント API のサポート、直接使用できます。まず、Google API への呼び出しを追加します。





コード


をコピーします。コードは次のとおりです:





次に、このフォントを参照するように設定します:

コードをコピーします


コードは次のとおりです。
}

ul li p

{ font-family: "Reenie Beanie" ,arial,sans-serif,Microsoft Yahei font-size: 110%; }

影に関しては、各ブラウザが完全にサポートしていないため、個別に処理する必要があります。コードは次のとおりです:

コードをコピー

コードは次のとおりです:

ul li a
{
text-decoration: none;
color: #000; : #ffc;
高さ: 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:rotate(-6deg);

-o-transform:rotate( -6deg);
-moz-transform:rotate(-6deg) ;
}


しかし、正方形をすべて傾けるのではなく、ランダムに傾けるには、新しい CSS3 セレクターは、2 つごとと 3 つごとに 4 度ずつ正方形を傾けます。それぞれの傾きはマイナス 3 度で、6 つの傾きごとに 5 度になります。

code

コードは次のとおりです。

ul li:nth-child(even) a{

-o-transform:rotate(4deg); 🎜>-webkit-transform:rotate(4deg);

-moz-transform :rotate(4deg);
top:5px;
ul li:nth; -child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg); 🎜>position:relative;
top:-5px;
ul li:nth-child(5n) a{
-o-transform:rotate(5deg); -transform:rotate(5deg);
-moz-transform:rotate(5deg );
top:-10px;


効果は次のとおりです:


ステップ 4: ホバーとフォーカス 正方形をズーム
ホバーとフォーカス中にズーム効果を実現するには、次のコードを追加する必要があります:





コードをコピーします

コードは次のとおりです:

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); -o-transform:scale(1.25);

position:relative; z-index:5; z-index を 5 に設定すると、正方形が他の領域をカバーできるようになります。同時に、フォーカスも設定されるため、Tab キーによるアクセスもサポートされます。その効果は次のとおりです:

ステップ 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(even) a{

-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg); );
位置:相対;
背景:#cfc;
ul li:nth-child(3n){

-o-transform:回転(-3度);
-webkit-transform:回転(-3度);
位置:相対; 🎜>背景:#ccf;
}

このようにして、最終的なエフェクトが完成しました:

概要
この時点で、HTML5 と CSS3 の基本機能を使用して、非常に優れた付箋エフェクトを作成しました。これは確かに非常に強力です。JavaScript と組み合わせるなど、いくつかの高度な機能を追加すると、Dang Knight Brick が提供する HTML5 ラボ シリーズの記事からわかります。
また: 画像内のテキストは全くの偶然です。ありがとうございます。