CSS 3 + HTML 5 は Web の未来ですが、多くのブラウザが部分的にサポートし始めていますが、まだ正式には登場していません。この記事では、Web の未来を実現するのに役立つ 5 つの CSS3 テクニックを紹介します。現時点では、これらのテクニックは正式なクライアント プロジェクトでは使用すべきではありません。個人のブログ サイト、Web デザイン コミュニティ、またはクライアントから苦情が来ない状況に適しています。
1. 角丸効果
CSS3 の最も一般的に使用される新機能の 1 つは、角丸効果です。CSS3 は、90 度の直角の角を持っています。
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
単一の角でも丸めることができますが、Mozilla と Webkit の構文は少し異なります。
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright
: 10px
;
-moz-border-radius-bottomright: 10px;
-rightright-radius: 20px;
-webkit-border-top-left-radius: 10px
;
-webkit-border-bottom-rightright-radius: 10px
; Firefox、Safari、Chrome
2. グラフィカルな境界線
名前が示すように、グラフィカルボーダーは画像をオブジェクトとして使用できるボーダーです。 構文は次のとおりです。
border: 5px Solid #cccccc;
-webkit-border-image: url(/images/border-image.png ) 5repeat;
-moz-border-image:url(/images/border-image.png) 5repeat;
border-image:url(/images/border-image.png)
ここで、border:5pxは境界線の幅、およびそれぞれの境界線イメージ定義は、ブラウザーにイメージのどの部分を境界線として使用するかを指示します。境界線イメージは、エッジごとに個別に設定することもできます。
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border- top -rightright-image
border-right-image
サポートされているブラウザ: Firefox 3.1、Safari、Chrome
3. シャドウとテキスト シャドウをブロックします
。
、
かつては Web デザイナーに好まれたり嫌われたりするものでしたが、CSS3 を使用すると、すでにこの機能を使用する Web サイトが存在します (24 Ways Web サイトなど)。
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
最初の 2 つのプロパティは影の X / Y 変位を設定し、ここでは 10px で、3 番目のプロパティはぼかしを定義します。影の度合い、最後のものは影の色を設定します。テキスト シャドウは次のように設定することもできます:
text-shadow: 2px 2px 5px #ccc;
サポートされているブラウザ: Firefox 3.1、Safari、Chrome (ボックス シャドウのみをサポート)、Opera (テキスト シャドウのみをサポート)。緑 3 つの青色の最後の値は透明度を表します。さらに、不透明度を使用して透明度を実現することもできます (現在、この手法は主にライト ボックス効果に使用されています - トランスレーター)。
4. RGBA を使用して透明度効果を実現します。
現在、Web デザインにおける透明効果は主に PNG 画像によって実現されます (ただし、IE ブラウザーのトランスレーターでは十分にサポートされていません)。CSS3 では透明効果を直接実現できます。
rgba(200, 54, 54
, 0.5); 背景: rgba(
200, 54, 54, 0.5);
サポート
されているブラウザ:
Firefox
、Safari、Chrome、Opera (不透明度)、および IE7 (不透明度、修正あり)
5. @Font-Face を使用してカスタマイズされたフォントを実装します
。Arial、Helvetica、Verdana、Georgia、Comic Sans など、Web デザインにおいて比較的安全なフォントがいくつかあります (中国語、一般的に言って、安全なのは Songdynasty だけです。現在は CSS3 の @font-face を使用しています)。自分でフォントを指定することはできますが、著作権の問題により、実際に使用できるフォントは限られています（さらに、巨大な中国語フォントも解決が難しい問題です - 翻訳者）。
構文は次のとおりです:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype')
}
サポートされているブラウザ: Firefox 3.1、Safari、Opera 10
CSS3はまだ開発中ですが、上記の機能はすでに利用可能です
。
一部のブラウザ、特に Safari で使用されます。残念ながら、Safari は主流のブラウザではありません。
Firefox は現在、多くのユーザー ベースを抱えています。また、次期 Firefox 3.1 では多くの CSS3 エフェクトがサポートされるため、Firefox ユーザーのアップグレード意欲が高く、多くのユーザーが CSS3 の新機能を事前に体験できます。
Google Chrome は今年リリースされたばかりで、Webkit エンジンに基づいているため、Safari と非常によく似ています。Safari は主に Mac 市場で使用されているため、Chrome は Windows 市場のギャップを埋めることができます。
統計によると、2008 年 11 月の時点で、ユーザーの 44.2% が Firefox を使用し、3.1% が Chrome を使用し、2.7% が Safari を使用していました。これは、CSS3 の一部の機能が、Web デザイン界ではすでにインターネット ユーザーのほぼ半数をサポートしていることを意味します。割合はさらに高くなる可能性があり、約 73.6% (Blog.SpoonGraphics によって提供されたデータ)
6. マイナス要因
上記で説明した CSS3 機能は Web サイトに優れた結果をもたらしますが、考慮する必要があるマイナス要因がまだいくつかあります。
Internet Explorer: 46 %インターネットではこれらの効果を見ることができないため、重要なデザインにはこれらのものを使用しないでください。また、これらの効果が機能しない場合には、代替の設計が利用可能であることを確認してください。
CSS 検証の問題: これらの CSS3 機能は現在、最終バージョンではなく、ブラウザごとに異なるタグを使用してこれらの機能を実装しているため、スタイル シートの検証の問題が発生する可能性があります。
コードの肥大化: ブラウザごとに使用する定義構文が異なるため、CSS コードは最終的に非常に肥大化します。
不適切な使用: これらのエフェクトを不適切に使用すると、特にシャドウ エフェクトの場合に悪影響が生じる可能性があります。
この記事の国際ソース: http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
中国語翻訳ソース: COMSHARP CMS 公式 Web サイト (35km)翻訳 ）