CSS3で新しいスタイルを使用する方法

PC 版の開発では IE を使用するため、css3 を使用することはほとんどありませんが、タブレットやスマートフォンが私たちの生活に浸透し、ますます普及している現在、モバイル版やタブレット版の開発に大胆に取り組むことができます。よく使用されるいくつかの CSS3 属性:

1. CSS3 プレフィックスの使用の概要、例を直接見てみましょう:

Java コード

1. -webkit-transform:rotate(-3deg); // Chrome や Safari などの Webkit ベースのブラウザの場合
2. -moz-transform:rotate(-3deg) // Firefox ブラウザの場合
3. -ms-transform:rotate(-3deg) // IE ブラウザの場合
4. -o-transform:rotate(-3deg) // Opera ブラウザの場合
5. 変換：回転（-3DEG）;

2. CSS3 の属性を学習するときは、まず角丸について考えるでしょう。CSS2 では、小さな画像を切り取ってつなぎ合わせる必要があり、さらに多くの CSS コードを制御して考慮する必要があるためです。互換性は非常に面倒ですが、CSS3 以降では、この属性だけで角丸を実現できます。

の簡単な例を見てみましょう。

Java コード

border-radius:5px;

// 4 つのコーナーを設定し、フィレット半径の長さを 5px にします。

border-top-left-radius:5px;
1. //最初の左隅を設定し、フィレットの半径の長さを 5px にします。マニュアルを参照してください。使い方は非常に簡単です。 >
2. 3. シンプルな影
まずは、Web ページ上の要素に影の効果を簡単に追加できることを説明します。次のコード スニペットは、影付きのわずかに回転した画像を示しています。両方の効果は CSS を使用して追加されています。

Java コード

"megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" /> 🎜>

1. 上記のコードでは、transform CSS プロパティは画像の回転を実装し、box-shadow プロパティは画像にシャドウ効果を追加します。回転角度や影のパラメータを変更し、それらのパラメータを調整するだけです。
試してみると、以下に示す回転画像効果が表示されます。

box-shadow は 6 つのパラメータを設定できます:
①: 最初の長さの値は、オブジェクトのシャドウの水平オフセット値を設定するために使用されます。負の値も可能です
②: 2 番目の長さの値は、オブジェクトの影の垂直オフセット値を設定するために使用されます。負の値も可能です
③: 3 番目の長さの値が指定されている場合、オブジェクトのシャドウ ブラー値を設定するために使用されます。負の値は許可されません
④: 4 番目の長さの値が指定された場合、オブジェクトのシャドウ拡張値の設定に使用されます。負の値は許可されません : オブジェクトの影の色を設定します。
inset: オブジェクトのシャドウ タイプをインナー シャドウに設定します。値が空の場合、オブジェクトのシャドウ タイプはアウター シャドウです。

4. 要素の変換
シャドウの概要で、transform の使用について説明しました。以下の例を見てみましょう。マウスをスライドさせて画像を拡大:





Java コード

1. "megan.jpg" />
2. img { -webkit-transform:scale(
0.5) }
3. img:hover { -webkit-transform:scale(
1) }

画像の上にマウスを置くと、以下に示すように画像がポップアップして大きくなります。

マウスを画像から遠ざけると、画像は元の状態に戻ります。

transform の各パラメーターの意味を見てみましょう:

Java コード

transform:translate(10px,10px)

//要素は水平方向と垂直方向に 10 ピクセル移動します
1. transform:rotate(10deg)
//要素は 10 度回転します
2. transform:scale(
2)
3. //要素を2倍に拡大 transform:skew(10deg,10deg)
//この要素は、X 軸と Y 軸の 10 度の斜め歪みに対応します

次のセクションでは、アニメーション (トランジション) とグラデーション (グラデーション) の使用について説明します