CSS3 について多くの噂を聞いたことがある人も多いと思いますが、現在実際に使用できる CSS3 テクニックにはどのようなものがあるのでしょうか?この記事では、いくつかの主要なブラウザ (Firefox、Chrome、Safari、Opera ブラウザなど) でうまく機能する、いくつかの特徴的な CSS3 テクニックを紹介します。これらの影響により、サポートされていないブラウザー (Internet Explorer など) ではレンダリングが低下します。提案されている CSS3 スタイルの多くは、ブラウザー固有の宣言を使用して、すぐに使用できます。.jpg)
ブラウザー固有の宣言が何であるかわからない場合は、それらはすべて、カーネル プロバイダーに関連する CSS スタイル プロパティの前にある特定のプレフィックスであることを覚えておく必要があります。 CSS3 はまだ完全にはサポートされていないため、これらの特定の宣言を使用する必要があります。具体的な形式は以下の通りです。
* Mozilla/Firefox/Gecko ブラウザの接頭辞: -moz-
* Webkit (Safari/Chrome) ブラウザー プレフィックス: -webkit- (注: 一部の Wbkit プレフィックスは Safari でのみ使用でき、Chrome ではサポートされていません。)
ご覧のとおり、これらの宣言を使用する場合の欠点の 1 つは、Firefox、Safari、Chrome で CSS3 効果を取得したい場合、上記の接頭辞をすべて使用する必要があることです。当然のことですが、Internet Explorer は CSS3 をサポートしていないため、他の主要なブラウザーのような特定のプレフィックス宣言がありません。
さて、それでは十分です。すぐに試してみましょう。注: これらの接頭辞を除いたスタイル宣言は、W3 標準の実際の仕様提案です。
このページに関するデモ（例）の説明
これらの例はすべてこのページにあります。例の効果が正常に表示できない (または一部しか表示できない) 場合は、使用しているブラウザがこれらの CSS3 効果をサポートしていないことを意味します。
影効果
シャドウ効果は複数のパラメータ値を受け入れます。 1 つ目は影の色で、他の 4 つの長さ (長さ) 値も受け入れます。最初の 2 つの長さの値は、X (水平) オフセットと Y (垂直) オフセットです。次のパラメータは、あいまいさを反映する値です。 4 番目と最後の値は、ブラーの広がりを定義するために使用されます。
ボックスシャドウ: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;
.gif)
影効果のデモンストレーション
グラデーション効果
CSS3 グラデーション スタイルは、特に -moz グラデーションと -webkit グラデーションの違いなど、最初は混乱する可能性があります。 -moz では、まずグラデーションの方向を定義し、次に開始色と終了色を定義する必要があります。 -webkit のグラデーションは少し複雑です。最初にグラデーションのタイプを定義し、次の 2 つの値で方向を定義し、最後の 2 つの値で開始色と終了色を定義します。グラデーションの。
-moz-linear-gradient(-90度,#1aa6de,#022147);
-webkit-gradient(linear, 左上, 左下, from(#1aa6de), to(#022147));
.gif)
グラデーション効果のデモンストレーション
RGBAカラーモード
RGBA の実際の色の定義は、見た目ほど複雑ではありません。赤の値、緑の値、青の値、透明度の 4 つのパラメータ値を受け入れます。カラーの 16 進数 (#) は使用しません。RGB モードでカラーを設定します。透明度でカラーの透明効果を設定できます。透明度の範囲は 0 ～ 1 で、0 は完全に不透明、1 は完全に透明です。以下のデモ例の透明度はすべて 0.5、要素の透明度は 50%、rgba では特定のブラウザー プレフィックス宣言は必要ありません。
背景色: rgba(0, 54, 105, .5);
.gif)
HSLカラーモード（色相H、彩度S、明度L）
RGBA に加えて、CSS3 は HSL カラー モードもサポートします。これにより、色やトーンを選択する際に十分な余裕が生まれます。 HSL カラー モデルでは、H は色相、S は彩度、L は明るさを表します。色相はカラーホイール上の角度の値であり、彩度と明度は色のパーセント値です。
背景色: hsl(209,41.2%, 20.6%);
.gif)
HSL デモの例
枠線の色
この CSS スタイルを使用するには、次の効果を実現するために、border-top、border-right、border-bottom、および border-left をそれぞれ定義する必要があります。 8 ピクセルの境界線が定義されており、その境界線が 8 つの異なる色で定義されていることがわかります。これは、境界線の色の数が境界線のピクセル幅の値に対応している必要があるためです。
ボーダー: 8px ソリッド #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
.gif)
枠線色のデモ
テキスト選択の色の設定
テキスト選択の色の定義は、非常にエキサイティングな新機能であると言わざるを得ません。 CSS Tips でこれを初めて見たとき、とても考え抜かれた内容だと思いました。疑似要素の ::selection ペアを使用すると、ユーザーがテキスト要素を選択したときに色と背景を変更できます。意見を求めるなら、とても美しいと思います。 ::selection は現在の CSS3 ドラフトから削除されましたが、後で追加する予定です。
::selection {background: #3C0; /* Safari */color: #90C;}::-moz-selection {background: #3C0; /* Firefox */color: #90C;}
.gif)
テキスト選択カラーのデモ
変形
変換スタイルを使用すると、マウスオーバー時に要素を大きく表示できます。スケール値を 1 より大きい値に設定すると、要素が縮小します。逆に、値が 1 より小さい場合、要素のサイズは小さくなります。スケールに加えて、他にもさまざまな変形が利用できます。 Firefox 開発者ページにアクセスして、何を達成できるかを確認できます。
-moz-transform: スケール(1.15);-webkit-transform: スケール(1.15);
.gif)
変形エフェクトデモ
複数列のレイアウト
この新しい複数段組みのレイアウト スタイルを使用すると、テキストに「新聞」のようなレイアウト効果を与えることができます。 CSS2 の実装方法と比較して、CSS3 ではこの種の効果を実現するのがはるかに簡単です。以下では、鳥が必要とする列の数、分離ルールの種類、および列間のギャップの大きさを指定します。使い方は簡単ですよね？
-moz-column-count:3;-moz-column-rule: 単色 1px 黒;-moz-column-gap: 20px;
.gif)
要約する
私と同じように CSS3 のこれらの機能に興奮していることを願っています。 Web デザイナーと開発者にさらなる権限を与え、多くの側面を簡素化します。あとはすべてのブラウザがサポートするまで待つだけです。もちろん、ここで私が実証する知識は、CSS3 の新しい機能の氷山の一角にすぎません。さらに詳しい情報、ヒント、ヘルプが必要な場合は、次の Web サイトにアクセスすることをお勧めします。