Clever Geek Handbook

テキストシャドウプロパティ

最近、z-indexプロパティに関する投稿を見ました。 そのような酒がなくなったら、5セントを差し込んでtext-shadowプロパティについて話します。 そのため、最近、このプロパティを使用して定期的にサイトにアクセスし始めました。 IEのすべてのバージョン（およびIE8も！）では、残念ながら、ロバはプロパティを維持することを学習しなかったため、この記事を読むことは意味がありません。





注：Habrでは、記事内で独自のスタイルを使用することは許可されていないため、ライブページは私のページで表示できます 。



そのため、CSSにはtext-shadowプロパティがあり、テキストの各文字に影を追加します。 現在、最新のブラウザのうち、IEのみがこのスタイルをサポートしていません。 プロパティ自体はCSS2で導入されましたが、ブラウザではほとんどサポートされていませんでした。 徐々に、状況は改善され始めました。 現在、ブラウザのサポート表は次のとおりです

Safari 3.1（Mac / Win） はい、ただし複数の影なし
Safari 4（Mac / Win） はい、フルサポート
Opera 9.5（Mac / Win / Lin） はい、フルサポート
Firefox 2/3（Mac / Win / Lin） いや
Firefox 3.1 / 3.5（Mac / Win / Lin） はい、フルサポート
Google Chrome 1（Win） いや
Google Chrome 2（Win） はい、フルサポート
IE 7/8（Win） いや
Konqueror（Lin / Mac / Win） はい、フルサポート
iPhoneのSafari はい、ただし複数の影なし
Nokia Symbian-Smartphones（シリーズ60） はい
Opera Mini 4.1 はい、ただしぼかしなし




ご覧のとおり、最新のブラウザの最新バージョンはtext-shadowをサポートしています 。 モバイルブラウザでも、いくつかの制限はありますが、このプロパティを既に理解しています。



text-shadowプロパティは、画像を使用せずにテキストで興味深い効果を作成できるため、優れています。 そのため、検索エンジンはテキストにアクセスしやすく、ページに簡単にアクセスできます。



このスタイルを使用する最も簡単な例は次のとおりです。 



 
 h2.shadow
 {
     text-shadow：2px 2px 1px赤;
 }




この例では、レベル2の見出しに赤い影を追加します。これは、テキスト自体に対して少し右下に投影されます。 この例では、インデントと影の色のパラメーターを使用しました。 影をぼかすオプションもあります。 これを行うには、インデントの後にオプションのパラメーターをもう1つ追加します（シャドウの色は最後または最初に指定する必要があることに注意してください）。 負の値を使用して、影の方向（左と上）を変更できます。 ところで、WebKitエンジンのブラウザーはrgba形式の色をサポートしているため、半透明性を使用できます。 



 
 h2.blurshadow
 {
    テキスト影：0.1em 0.1em 0.2em赤;
 }




ぼやけたヘッダー





このプロパティに基づいて、サイトページで興味深い効果を実現できます。 たとえば、影を使用すると、文字と背景のコントラストが小さい場合にテキストを読みやすくすることができます。 白いテキストの2つのバリエーションを淡い青色の背景と比較します。 



 
ライトバック{背景色：＃F0F8FF}
 .whitetext {色：白}
 .whitetext-shadow {色：白; テキストの影：黒0.1em 0.1em 0.2em}




例を見ると、最初の行はほとんど見ることができず、2行目に影のあるテキストがよく読めていることがわかります。



レイヤードシャドウ



text-shadowプロパティには興味深い機能が1つあります-複数の影を作成できます。 一見、これは異常に思えますが、グラフィックスを使用するユーザーは、いくつかの影を使用して3次元の文字（インデントまたは凸）を作成する手法に慣れています。



灰色の背景に、3次元テキストの2つのバージョンを作成します。 



 
 .ThreeD
 {
    背景：#CCC;
 }
 
 .a
 {
    色：＃D1D1D1;
     text-shadow：-1px -1px白、1px 1px＃333;
    フォントサイズ：24pt;
 }
 
 .b 
 {
    色：＃D1D1D1;
     text-shadow：1px 1px白、-1px -1px＃333;
    フォントサイズ：24pt;
 }






凸テキスト

インデントされたテキスト





ただし、すべてのブラウザが複数のシャドウをサポートしているわけではないため、これらの効果の使用には注意する必要があります。 たとえば、Operaは最大6つのシャドウをサポートし、Firefoxは1つのみをサポートします（最初のシャドウのみで、残りは無視します）。



アウトライン





複数の影を使用して、別の効果を実現できます-文字のアウトラインの作成。 



 
 p.contur
 {
    背景：#CCF; 
    パディング：1em;
 }
 
 .contexttext
 {
    フォントサイズ：24pt;
    色：#BBE; 
     text-shadow：-1px 0黒、0 1px黒、1px 0黒、0 -1px黒。
 }






ネオンの輝き





ディスプレイスメントなしでシャドウを作成してぼかした場合、ネオンの輝きの効果が得られます。 



 
 .neon 
 {
     text-shadow：0 0 0.2em＃87F、0 0 0.2em＃87F、0 0 0.2em＃87F
 }






JavaScriptを使用する





JavaScriptスクリプトでtext-shadowプロパティを使用することもできます。 Habréでスクリプトを使用できるかどうかはわかりません。そのため、例がページにあります 。



まとめると



IEがtext-shadowプロパティをサポートしていないという事実を考えると、多くの人はそれが注目に値しないことに気付くでしょう。 しかし一方で、IEユーザーはページを表示するときにエラーを受け取りません。 プレーンプレーンテキストが表示され、別のブラウザでページが見栄えが良いと言われた場合、ブラウザを変更することを考えさせられ、M $開発者は思慮深くなります。



追加情報



結論として、追加情報のリンクを提供します。

スクリプトを使用してtext-shadowプロパティを示す興味深い例 。

CSS text-shadowプロパティを使用したスタイリッシュなテキスト （燃えるようなテキストの例を含むいくつかの例）。

Safari、Opera、FirefoxなどのCSS Text-Shadowは興味深い例です。

Text-Shadow Exposed：css text-shadowを使用してクールで賢いテキスト効果を作成します -いくつかの例

ロシア語の例





More articles:


All Articles