CSS はよく知られ、広く使用されている Web サイト スタイル言語です。そのバージョン 3 (CSS3) プランには、時間を節約できるいくつかの新機能が追加されています。これらの効果はブラウザの最新バージョンでのみサポートされていますが、それでも知っておく必要があり、興味深いものです。 Bao Fengbinbin は、この記事で CSS の 5 つの興味深い新しいテクノロジー (角丸、個々の角丸、不透明度、シャドウ、サイズ変更要素) を紹介します。
1: 基本マーク
このチュートリアルを開始する前に、チュートリアル全体で使用する基本的なマークアップを作成しましょう。
xHTML には次の div 要素が必要です。
#round は、CSS3 コードを使用して角を丸くします。
#indie、いくつかの個別のフィレットを適用します。
#opacity は、不透明度を実装する新しい CSS3 方法を示します。
#shadow は、Photoshop を使用せずに CSS3 を使用してシャドウ効果を実現する方法を示します。
#resize は、CSS を使用してサイズ変更効果を実現する方法を示します。
要約すると、xHTML は次のようになります。
引用した内容は以下の通りです。 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
基本的な CSS ファイルを作成しましょう。
引用した内容は以下の通りです。
|
上からわかるように、各 div 要素に幅と高さ 300 ピクセルを指定し、それらを左側にフロートさせて、後でスタイル設定できるようにページ全体の div を残しておきます。
2: 角を丸くする
現在、フィレットを作成する方法はたくさんありますが、どれも面倒です。最も一般的な方法: まず、角の丸い画像を作成する必要があります。次に、多数の HTML 要素を作成し、背景画像を使用して角の丸い部分を表示する必要があります。あなたも私もその具体的なプロセスをよく知っています。
この問題は、CSS3 では「border-radius」と呼ばれるプロパティを使用して簡単に解決できます。まず黒い div 要素を作成し、それに黒い境界線を設定します。境界線は、「border-radius」属性の効果を実現するための前提条件です。
このような：
引用した内容は以下の通りです。 ＃ラウンド { |
これで div 要素が作成されました。見た目は期待通り、高さ 300 ピクセル、角張った黒色です。次に、角丸を実装するコードを追加しましょう。これは非常に簡単で、必要なコードは 2 行だけです。
引用した内容は以下の通りです。 ＃ラウンド { |
ここでは、Firefox ブラウザ用の -moz- と Safari/Chrome ブラウザ用の -webkit- という 2 つの同様のコード行を追加しました。
注: これまでのところ、IE ブラウザは border-radius 属性をサポートしていないため、IE に角丸効果を持たせたい場合は、角丸を個別に追加する必要があります。
border-radius プロパティの文字通りの翻訳は、Photoshop と同様に、その値が大きいほど、角の丸みが大きくなります。
3: 個々の角が丸い
過去の習慣に従っていると、多くの時間を無駄にしてしまいますが、CSS3 を使えばすぐに解決できます。
ここで、div の右上隅と右下隅を丸くしたいだけなので、わずかな変更を加えるだけで済みます。
引用した内容は以下の通りです。 #インディーズ { |
このアプローチが Web ページのどの要素に使用されるか想像してみてください。それはタブ付きナビゲーション ボタンです。
4: CSS3を使用して不透明度を変更する
従来通り、数行のコードを記述して不透明効果を実装できるようになりました (ハック)。ただし、CSS3 ではこのプロセスが簡素化されます。
このコード行は「opacity: value;」だけなので覚えやすいです。
引用した内容は以下の通りです。 #不透明度 { 背景色: #000; 不透明度: 0.3; } |
5：影効果
影を実現するにはさまざまな方法がありますが、最も一般的な方法は、Photoshop を使用して影画像を作成し、それを背景プロパティに適用することです。ただし、CSS3 を使用すると作業の効率が向上します。残念ながら、現在この新機能をサポートしているのは Safari と Chrome だけです。
必要なコードは 1 行だけですが、次の 4 つの異なる値があります。
引用した内容は以下の通りです。 -webkit-box-shadow: 3px 5px 10px #ccc; |
これら 4 つの値が何を表すかを説明します。最初の 3px は指定された影と div 要素の間の水平 (水平) 距離、2 番目の 5px は影と div 間の垂直 (垂直) 距離を指します。 3 番目の 10px は影のぼかし (Photoshop のぼかしに似ています) を指し、値が大きいほど繊細になります。最終的な値が影の色であることは誰もが知っています。
最終的な影効果コード。
引用した内容は以下の通りです。 ＃影 { 背景色: #fff; ボーダー: 1px ソリッド #000; -webkit-box-shadow: 3px 5px 10px #ccc; } |
ご覧のとおり、div には白い背景、黒い境界線、および明るい灰色の影があります。
6:リサイズ
最新バージョンの CSS では、要素のサイズを変更できます (ただし、現在サポートされているのは Safari のみです)。
このコードを使用すると、要素の右下隅に小さな三角形が表示され、この要素がサイズ変更できることをユーザーに知らせます。コードは依然として非常に単純で、必要なコードは 1 行だけであると言えます。 もちろん、「max-width」、「max-height」、「」など、以前に使用したいくつかのプロパティも使用できます。 「最小幅」と「最小高さ」。
引用した内容は以下の通りです。 #サイズ変更 { 背景色: #fff; ボーダー: 1px ソリッド #000; サイズ変更: 両方; オーバーフロー: 自動; } |
ここでは主にサイズ変更とオーバーフロー属性について説明します。両方とも、その値には水平と垂直も含まれることを意味します。オーバーフローはサイズ変更で動作するため、ここでは auto が使用されます。
要約する
この記事から何か得たことはありますか? 現在 CSS3 をサポートしているブラウザはわずかですが、CSS3 によって作業時間がさらに節約されることは否定できません。プログレッシブ・エンハンスメントについてある程度の知識と理解がある場合は、この強力な新しいバージョンの CSS3 を容易に受け入れることができると思います。 IE6 にすべての時間を費やさないでください。そうしないと、単なる時代遅れのフロントエンド開発エンジニアになってしまいます。