影を持つ文字。テキスト効果HTMLとCSS

description

影をテキストに追加し、そのパラメータを設定します。影の色、碑文の相対的なオフセットとぼけの半径。 Text-Shadowプロパティは、疑似要素と連携して動作できます。最初の文字と：1行目。

構文

テキストの影：なし影[、影] *
影はどこにありますか？
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

値

なしシェードの追加をキャンセルします。利用可能なCSSフォーマットのカラーカラーシャドウ。デフォルトでは、影の色はテキストの色と一致します。オプションのパラメータ xのシフトシェードはテキストに対して水平方向にシフトします。このパラメータの正の値は、シャドウシフトを右側に設定します。必須パラメータテキストに対する影の垂直に影のシフトをシフトさせます。テキストの上に影を上げる負の値を使用することもできます。必須パラメータ半径は影のぼかしの半径を設定します。この値が大きいほど、シャドウスムージングが強くなり、より軽くなります。このパラメータが指定されていない場合、デフォルトは0に設定されます。ブラウザのスムージングアルゴリズムは通常異なりますので、影の種類は多少異なる場合があります。指定されたパラメータ平滑化

複数のシャドウパラメータを指定して、互いに区切って指定できます。次の順序がCSS3で考慮されます。リスト内の最初の影は非常に上にありますが、リストの後者は非常に底です。 CSS2では、注文は反対にあります。最初の影は下部に置かれ、最後のものは非常に上にあります。

HTML5 CSS2.1 CSS3 IE CR OP SA FX

テキストの影。

Cytrusは南に住んでいますか？はい、しかし偽のインスタンス！

実施例の結果を図4に示す。 1。

図。 1. Safariブラウザのシェードの種類

ブラウザ

Operaは最大6-9シェードパラメータをサポートしています。この値を増やすとともに、100px以上のぼけ半径の増加はブラウザの生産性に影響します。 Operaバージョン9.5-10は、CSS2のように、いくつかの影のマッピングを使用します。

Safari Toバージョン4.0では、Shadowパラメータが1つだけサポートされていますが、残りは無視されます。バージョン4.0では、すでに多くの影があります。

Internet Explorerブラウザは、Text-Shadowプロパティをバージョン10.0からのみ理解しています。代わりに、Filterプロパティ：Shadowプロパティを使用します。例えば、次の設計は、シェードの色（＃666666）、その方向（垂直から45°）および変位値（4ピクセル）を設定する。

フィルタ：シャドウ（色\u003d＃666666、方向\u003d 45、強度\u003d 4）;

Text-Shadowプロパティは、シェードをテキストに追加するために使用されます。テキストの影はあなたが素晴らしい効果を作成することを可能にする興味深いツールです。影は、単層または多層、ぼやけ、色または半透明であり得る。 elementのシャドウを設定すると、1つの長さと色のみを指定できます。したがって、別のシンボルまたはワードのカラーコピーを作成できます。

テキストの影を作る方法

サポートブラウザ

IE： 10.0
縁： 12.0
Firefox： 3.5
クロム： 4.0
サファリ： 4.0
オペラ： 10.1
iOSサファリ： 3.2
Androidブラウザ： 2.1
クロム。アンドロイド用: 55.0

1. Text-Shadow Propertiesの構文

各シャドウは、テキスト自体とそのデザインの要素（テキストデコレーションプロパティ）の両方に使用されます。同時に、いくつかの影を設定して、それらをコンマに指しています。影は互いに重ね合わされますが、テキスト自体は重ならない。最初の影は常に他の影の上の上にあります。プロパティは継承されます。

各シャドウは、2つか3つの長さの値（3番目の値が必須です）、色（オプションの値）によって決まります。色合いが指定されていない場合は、テキストの色が使用されます。

第1の長さはX軸に沿ってオフセットを設定し、2番目はY軸に沿ったオフセットです。長さが負の場合、影はテキストから左右にシフトされます。

第3の値はぼけ半径を確立し、これはシェード回路からぼけ効果の端までの距離として定義される。

図。 1. Text-Shadow Propertiesの構文

テキストの影。
値：
xオフセット	必須値。テキストに対する水平方向にシェードの変位。正と負の両方の値を取ります。
yオフセット	必須値。テキストに対する垂直に陰影の変位。正と負の両方の値を取ります。
ぼうっと	オプションの値影のぼかしの半径を決定します。半径が多いほど、シャドウがぼやけているのがぼやけています。
色	オプションの値デフォルトではテキストの色を取ります。値を確立するには、次のカラーレコーディングフォーマットを使用できます。＃RRGGBB、RGB（赤、緑、青）、RGBA（赤、緑、青、アルファ）。
無し	デフォルト値は、テキストシェードが欠けていることを意味します。指定されたプロパティを持つ要素のグループから要素の影を削除します。
初期	デフォルトのプロパティ値を設定します。
継承します。	親要素からプロパティの値を継承します。

2.テキストのシェードの例

2.1。ポスターの影

テキストの影

text-shadow-1（背景：＃77f7de;カラー：ホワイト;テキスト - シャドウ：-2px -2px 0＃4D4644、-2px 2px 0＃4D4644,2px 2px 0＃4d4644,4px 4px 0ホワイト、5ピックス5ピックス0ホワイト、6px 6px 0ホワイト;文字間隔：0.1em;）

2.2。 3D影

テキストの影

text-shadow-2（線形グラデーション（-45deg、＃fee864、＃F5965E）;カラー：＃F4F4F4; text-shadow：-1px -1pxホワイト、1px 1pxグレー、2px 2px＃7a7a7a、3px 3px＃757575 、4px 5px＃666666、6px 6px＃666666、7px 8px＃575757、9px 9px＃575752,18px 10px＃575252,18px 18px 30px RGBA（0,0,0,,4）、18px 18px 10px RGBA（0,0,0,,4）;）

2.3。シャドウテキスト

テキストの影

Text-Shadow-3（バックグラウンド：＃FFE6DB; COLOR：＃FFE6DB;文字間隔：.1em; Text-Shadow：3px 0 RGBA（250,111,142,,5）、6px 0 RGBA（250,111,142）、.4）、9px 0 RGBA（250,111,142 ,.3）、12px 0 RGBA（250,111,142 ,.2）、15px 0 RGBA（250,111,142 ,.1）;）

2.4。 retro-shadow.

テキストの影

text-shadow-4（カラー：＃FB631E;文字短期間：.1em; text-shadow：4px 4pxホワイト、6px 6px #d7cc88;）

2.5。多層の影

テキストの影

text-shadow-5（バックグラウンド：＃F1F1F1;カラー：＃FCC105;文字脊髄; Text-Shadow：4px 4px＃ff981d、7px 4px #ff981d、7px 7px）;）;）;）

2.6。透明な影

テキストの影

text-shadow-6（色：透明; text-shadow：4px -4px RGBA（157,217,227,,7）、-2px -2px RGBA（159,141,105, .7）、0 2px RGBA（254 216,21,7）;）;）

2.7。シャドウシマウマ

テキストの影

Text-Shadow-7（バックグラウンド：＃E02A91;カラー：ホワイト、ホワイト;テキスト - シャドウ：2ピックス2ピクセル、4ピキス4ピクセル、8ピキス6ピックス白、10ピックス10ピックスブラック、12ピックス12ピックスホワイト、14ピックス14ピックス白、16px 16ピックスホワイト、18px 18pxブラック、20px 20px白、22px 22pxブラック、24px 24px白、26px 26pxブラック;）

2.8。ネオンの影

テキストの影

text-shadow-8（背景：黒;カラー：白;テキスト - シャドウ：0 0 0 0 0 0 15ピックスホワイト、0 0 0 0 15ピックスクリムゾン、0 0 4 35ピックス深紅色、0 0 40ピックスクリムゾン、0 75pxクリムゾン;）

2.9。シャドウストローク

テキストの影

text-shadow-9（カラー：ホワイト;テキスト - シャドウ：1px 1px＃732372、-1px＃732372、-1px -1px＃732372、3px 3px 6px RGBA（0,0,0,5 ）;）;）

2.10。活版スタイル

テキストの影

Text-Shadow-10（バックグラウンド：＃F9C941; COLOR：＃F9C941;文字間隔：2px; text-shadow：1px 1px＃f3e7cf、-1px -1px＃56433d;）

2.11。 Twitterスタイル

テキストの影

text-shadow-11（カラー：＃3cf;テキスト - シャドウ：-1px 0 1pxホワイト、0 -1px 0 1pxホワイト、0 x 0 1ピクセルホワイト、0 0 8ピキスホワイト、0 0 0 8ピックスホワイト、0 0 0 8ピキス白、2px 2px 3px黒;）

2.12。ストロークで影

テキストの影

Text-Shadow-12（カラー：＃E34C38;テキストシャドウ：1ピクセルホワイト、2ピックス2ピクセルホワイト、2ピックス2ピクセル、-1pxホワイト、-2px -2pxホワイト、1ピクセル、1ピクセル、1px -1pxホワイト、-2px 2pxホワイト、 2ピクス-2px white、-3px -3px 4px RGBA（0,0,0 ,.3）、-3px 3px 4px RGBA（0,0,0 ,.3）、3px 3px 4px RGBA（0.0.0、3）、3px -3px 4px RGBA（0,0,0、.3）;）

description

構文

テキストの影：なし影[、影] *
影はどこにありますか？
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

値

なしシェードの追加をキャンセルします。利用可能なCSSフォーマットのカラーカラーシャドウ。デフォルトでは、影の色はテキストの色と一致します。オプションのパラメータ xのシフトシェードはテキストに対して水平方向にシフトします。このパラメータの正の値は、シャドウシフトを右側に設定します。必須パラメータテキストに対する影の垂直に影のシフトをシフトさせます。テキストの上に影を上げる負の値を使用することもできます。必須パラメータ半径は影のぼかしの半径を設定します。この値が大きいほど、シャドウスムージングが強くなり、より軽くなります。このパラメータが指定されていない場合、デフォルトは0に設定されています。ブラウザのスムージングアルゴリズムは通常異なりますので、指定された平滑化パラメータによっては、シェードの種類が多少異なることがあります。

HTML5 CSS2.1 CSS3 IE CR OP SA FX

テキストの影。

Cytrusは南に住んでいますか？はい、しかし偽のインスタンス！

実施例の結果を図4に示す。 1。

図。 1. Safariブラウザのシェードの種類

ブラウザ

フィルタ：シャドウ（色\u003d＃666666、方向\u003d 45、強度\u003d 4）;

最も緑色のデザイナーでさえ、Photoshopで影を作る方法を知っています。影はデザインの量を与え、今それは非常に人気があります。テキスト、メニュー項目、および見出しの例外や影はありません。 Appleインタフェースを覚えておくのに十分です

それは、その兵器の技術にテキストの影を持つスキルを持つことが有用であろうでしょう。

仕事

写真を使用せずに、CSSでテキストの影をつける。これを達成するのは何ですか？

柔軟性 - 写真を使用せずに、テキストは変更が簡単です
スピード - レス画像 - ページ重量を少なく、サーバーへの呼び出しが少ない
SEO - テキストより良い写真テキスト置換技術画像を使用するよりも最適化し、信頼性があります

通常のブラウザのテキストの影

通常のブラウザの下では、最新のブラウザがすべてヒットされました。これはW3Cの推奨事項で多かれ少なかれます。この場合、これらのブラウザは2003年に推奨されていたCSS3プロパティText-Shadowを理解しています。

そのため、text-shadowプロパティをサポートするブラウザのリスト

Safari 3.1（Mac / Win） - サポート、複数の影はサポートされていません。
Safari 4（Mac / Win） - 完全にサポート
Opera 9.5以降（Mac / Win / Lin） - 完全に維持
Firefox 3.1 / 3.5（Mac / Win / Lin） - 完全にサポート
Google Chrome 2（Win） - 完全にサポート
shiira（Mac） - 複数の影がサポートされていません。
Konqueror（LIN / MAC / WIN） - 完全にサポート
icab（Mac） - 複数の影がサポートされていません。
SafariのiPhone - サポート、複数の影はサポートされていません。
Nokia Symbian-Smartphones（シリーズ60） - サポート
Opera Mini 4.1 - サポートは、影のぼかしをサポートしていません

これらのブラウザにシャドウテキストを作成するには、CSSの1行だけです。

H1（Text-Shadow：0px 1px 3px＃000;）

私たちはそのようなファッショナブルなタイトルを得ます：

テキストの影の助けを借りて、さまざまな興味深い効果を得ることができます。

ぼやけたテキスト

H1（カラー：#FFF;バックグラウンド：＃666; text-shadow：0px 0px 3px #fff;）

テキストの重複

H1（Text-Shadow：0px 20px＃000;）

複数の影には、より多くの効果があります。

意気消沈したテキスト

h1（＃ccc; color：#ccc; text-shadow：-1px -1px＃666、1px -1px＃666、1px＃666、Font-Face：Serif;）

凸のテキスト

H1（＃999;カラー：＃999; text-shadow：1px 1px＃666、-1px -1px＃666、-1px -1px＃666、-1px -1px＃666; Font-Face：Serif;）

（つまり、テキストの影をサポートしていないため、美しさを楽しむことはできません）。あなたはまだテキストの影を使って様々な効果を思いつくことができます、あなたはまだ大量に、唯一の事実上の制限はあなたのファンタジーです。

今悲しいことについて - 暑いすべての「お気に入り」IE？

IEのテキストの影

IEは、8番目のバージョンまで、テキストの影を理解していないが、それは彼の「子羊」を十分に持っています。特に、影を作成するためのDrophadow（）フィルタがあります。影が表示されるように、要素はレイアウトをインストールする必要があります。いくつかの方法で設定できます。

プロパティ要素を指定することによって：block + height（）またはwidth（））
要素を設定することによって：絶対値
設定：左/右
設定ズーム：1

h1（filter：progid：dximageTransform.microsoft.dropshadow（color \u003d "＃666666"、offx \u003d 2、offy \u003d 2、position \u003d "true"）;ズーム：1;）

あなたが「万歳!!!」に叫ぶことができるように思われたそして人生の中で喜ぶ、しかし、このフィルターが現実の機能を作る方法を見ます：

これは、Dropshadowフィルタが適用されている場合、テキストがどのように表示されるかです。

理解していない人のために、このフィルターの欠如の欠如：

影はひどいように見えます：角度、滑らかな、半透明のバックグラウンドへの移行
フォント碑文は歪んでいます
影は実質的に規制に適していません（シャドウ位置を管理できます） - Dropshadowの代わりにシャドウフィルタを部分的にバイパスすることができますが、重要な最初の2つの欠陥が残っています。
レイアウトの必須存在は、開発者を幾分制限します

この結果は実際のプロジェクトでは受け入れられません。開発者のためにそのような仕事をどのように受け入れたかを明確にしません。

Kilian Valkhofはシャドーエミュレーションを使用して提案されています。

テキストに直接フィルタを適用しないでください
ドロップサイドとシャドウの組み合わせの代わりに輝きとぼかしの代わりに使う

これにより、テキストの歪みが回避され、日陰をより柔軟にします。

テストヘッダーТестовый заголовок

h1（text-shadow：3px 3px 3px #cccccc;位置：相対; zoom：1; color：＃000;）H1スパン（位置：絶対;左：-3px; top：-1：-1; filter：progid：dximageTransform.microsoft.glow（color \u003d＃cccccc、強度\u003d 1）progid：dximageTransform.microsoft.blur（pixelradius \u003d 3、enabled \u003d "true"）;ズーム：1;）

しかし、そのようなアプローチでさえも、まだいくつかの欠点があります。

禁煙の要素、およびテキストの重複があることでさえ、エクストラエレメント、さらにはコンテンツの論理構造には影響しません。 SEO最適化。この問題は解決できます javaScriptを使用してページをロードするときに追加の要素に挿入されます
他のブラウザでは適切な表示（どのテキストシャドウ理解） - フィルタが最小限の設定で影を失うことができます。他のブラウザと同様のシャドウが常に達成するようになるわけではありません
ほとんど柔軟性 - フィルタはテキストシャドウのすべての機能を与えません、たとえば、複数の影を実現することはできません

IEの影を作成するには、JavaScriptを使用できます（初めてJavaScript Savesが保存されていません）。

JavaScriptを使用したテキストの影

テストされたスクリプトから、自分自身がjQuery「Drop Shadow」のプラグインで停止しました。彼の利点：

一連のコンテンダーの挿入を使用して影を乳化します。 IEにフィルタを使用せずに。これにより、IEの中で最も類似の影を他のブラウザとすることができます+ IEのレイアウトについて心配する必要はありません。
iEだけでなく影を作成します。
スクリプトの小さい重み - 4KB（コードからコメントを削除した場合）、および圧縮を適用した場合は、さらに少なくなります。スクリプトの聖書では要件 - jQuery.dimensions.jsスクリプトの存在ですが、私はなぜ彼が理解していませんでした。影が作成、削除、IDを識別し、それがありません。
単純で理解できない
いくつかの成功を収めて複数の影を失うことができます。

デメリット：

要素IDスクリプトを初期化することはできません
要素がバックグラウンドで指定されている場合、シャドウはテキストに対してはなく、その要素全体として作成されます。
jQueryライブラリの必須接続（そしてこれは50KB以上）です。しかしjQueryの人気は実質的にこの欠陥を証明しています
スクリプトアジアはjQuery.dimensions.js（さらに2kb）を接続する必要があります。しかし、私はこの図書館、そう思われる理由は理解していませんでした。

ドロップシャドウプラグインの適用

構文：

jQuery（セレクタ）.dropshadow（オプション）; // jQuery要素（セレクタ）.redrawshadow（）でシャドウを作成する。 // Shadow JQuery（セレクタ）.removeshadow（）。 // jQueryのシェードを削除する（セレクタ）.shadowid（）; //要素の影IDを返します

左：[integer]（デフォルト\u003d 4）上：[整数]（デフォルト\u003d 4）BluR：[整数]（デフォルト\u003d 2）不透明度：[分数番号]（デフォルト\u003d 0.5）色：[LINE]（デフォルト\u003d "ブラック」）スワップ：[論理値]（デフォルト\u003d false）

左右のパラメータ - 碑文（またはオブジェクト）の左上隅の影の座標。正の値は影を右下にシフトします。負の左右に移動します。

タイポグラフィ - 私のお気に入りのおもちゃ、それがWebデザインに関しては。それはその助けを借りて、あなたは人の注意を引くことができます、ただ碑文やフォント箱を少し変えるだけです。非常にシンプルで非常に効果的な、本の多くはこのトピックで書かれており、紛争にはかなりのコピーがあります。今日私は全体としてのタイポグラフィにアドバイスをしません - 私は十分な資格を持っていませんが、あなたのサイトのテキストを作る方法はいつもお願いします。だから今日私はCSS3プロパティを使用していくつかのバリエーターを表示します テキストの影。非常にシンプルですが、巧みな手で、それは不思議に働くことができます。

テキストシャドウ基本構文

この財産 CSS3 -MOZと-WebKitなどのベンダーの接頭辞がない、新規のブラウザで機能します。すなわち、このプロパティを理解するために学習することができます、あなたはModernizrや類似体を使う必要があります。

TEXT-SHAGHE：XシフトUオフセットぼかし色。

それがすべての基本的な構文です。最初の値は、水平オフセット、2番目の垂直方向、色合いのぼかし、影の色です。例を考えてみましょう。

text-shadow：2px 4px 3px RGBA（0,0,0,0.3.3）;

影は却下され、3ピクセルでぼやけ、30％の透明性を持つ黒い色を規定しました。なぜ私はアルファチャンネルや透明度を使っていますか？それはアクションの中でより多くの自由を与えるので、色の選択にぼやけていて透明度の値を単純に変えるだけで少し軽くまたは暗くすることができます。それは非常に早く判明しています。

購入した文字

体（バックグラウンド：＃222;）＃テキストH1（色：RGBA（0,0,0,0,6）;テキスト - シャドウ：2px 2px 3px RGBA（255,255,255,0,0.1）

ここでの仕事の原則は、少し軽い文字、小さな透明性の明るい影の背景です。結果が絵にある、試してください。

硬い影

TEXT-SHAGHE：6PX 6PX 0PX RGBA（0,0,0,0,0.2）;

今、レトロなスタイルのファッションで、ぼかしなしでシャドーが使われています。さて、私たちはこれの準備ができています

二重影

text-shadow：4px 3px 0px #fff、9px 8px 0px RGBA（0,0,0,0,0.15）;

そしてここで別のトリッキーな財産です テキストの影。セレクタはカンマを通して転送することができ、必要に応じて多くの影を作成します。最初の影はバックロージストのような色を割り当てることができます、そして、写真のように効果があるでしょう。

downと離れた

Text-Shadow：0px 3px 0px＃b2a98f、0px 14px 10px RGBA（0,0,0,0,0,0,05）、0px 24px 2px RGBA（0,0,0,0,0,0,0）、0,2）、0px 34px 30px RGBA（0,0,0,0,0.1）;

テキストは体積計、背景の上にどのように掛かっているのですか？ぼけと場所のレベルが異なる4つの影があります。一般的には、影がより多くの影が使用されているが、より現実的な効果はあなたのプロジェクトでそれを考慮してください。

小さい3Dテキスト

Text-Shadow：0px 4px 3px RGBA（0,0,0,0,4.4）、0px 8px 13px RGBA（0.0,0,0,0,0,0,2）、0px 18px 23px RGBA（0.0,0 、0,0,0）。

前の例と同様に、3つの影が近く、したがって、3次元と織物の重量の影響です。

Mark Dottoから3Dテキスト

テキスト - シャドウ：0 1px 0 #ccc、0 2px 0 #bbb、0 4px 0 #bbb、0 4px 0 #aaa、0 6px 1px RGBA（0,0,0 ,.1）、0 0 5PX RGBA（0,0,0 ,.1）、0 1PX 3PX RGBA（0.0.0、0,0,0,0,0,0,0,0,0,0,0,0,0,0,0）、0 5px 10px RGBA（0,0.0 、.25）、0 10px 10px RGBA（0,0,0 ,.2）、0 20px 20px RGBA（0.0.0、0.15）;

私はこのデザイナーを働かせ、通過できなかったためにネットワークを渡って来ました。印象的な現実的です。