複雑に見えるCSSテキストエフェクトのほとんどは、1 つのプロパティから作られています。 ランディングページのネオンサイン、ゲームタイトルのハードアウトライン、1970 年代のレコードスリーブのように見える積み重ねられたオレンジ色のレタリング: それらのそれぞれはシングルです text-shadow いくつかのカンマ区切りレイヤーによる宣言。 syntax は短い。 hard 部分は、よく読み取るオフセットとぼかし値をピックアップし、どのレイヤーが上にペイントするかを記憶することです。
このガイドでは、 text-shadow 文法、レイヤーの仕組み、一般的なエフェクトの背後にあるレシピと、それらが使用する正確な値、およびシャドウ付きテキストの読みにくさやレンダリングの遅さの原因となる間違いなど、すべての例を で再構築できます CSS テキスト シャドウ ジェネレータ、これは結果をライブで表示し、あなたのために宣言を書き込みます。
tl;dr:
text-shadowは、それぞれ次のように書かれる影のカンマ区切りリストを取るoffset-x offset-y blur-radius color。 listの最初の影は上にペイントします。 spread値がなく、noinsetキーワード、違いますbox-shadow。 glows はぼかしが大きくなったいくつかのゼロオフセットシャドウであり、outline は 4 つの 1 ピクセルのハードシャドウであり、3D テキストは、それぞれ 1 ピクセルずつ外側にハードシャドウが積み重なったものである Toolz テキストシャドウジェネレータ これらはスライダーと 8 つのプリセットを使用して構築され、クライアント側で無料で、サインアップはありません。
CSS テキスト シャドウ プロパティとは何ですか?
ザ・ text-shadow プロパティは、要素& #39; sテキストのグリフの背後に1 つ以上の影を描きます。 W3Cで定義されています CSS テキスト装飾モジュール レベル 3、 であり、その値は のいずれかである none または、コンマで区切られた影のリスト。
各影には、次の4 つの部分まであります:
| パート | 必須 | それが何をするか | 許容値 |
|---|---|---|---|
| 水平オフセット | はいって | 影を右 (正) または左 (負) に移動します | 任意の長さ、例えば. 2px、 -0.1em |
| 垂直オフセット | はいって | 影を下 (正) または上 (負) に移動します | 任意の長さ |
| ブラー半径 | いいえ、デフォルトは です 0 |
エッジを柔らかくします; 大きいほどぼやけを意味します | ゼロまたは正の長さです 負は無効です |
| 色 | いいえ、デフォルトは です currentColor |
透明度を含む影の色 | 任意CSS色 |
色は最初または最後に行くことができます。 text-shadow: #000 1px 1px あんど text-shadow: 1px 1px #000 同じ影です。色を外すと、影はテキストと #39; の独自の色を取ります。これは、ドロップ シャドウにはほとんど必要ありませんが、テキスト カラーを素早く光らせるには便利です。
影は決してレイアウトを変えない それは隣り合う要素を離れて押したり、element& #39; sボックスを成長させないので、大きなぼかしはボックスの外にこぼれ、親によって切り取られる可能性があります overflow: hidden。
テキストシャドウはボックスシャドウとどう違うのですか?
text-shadow 各文字の形に従います box-shadow 要素& #39; s のボーダーボックスの長方形に従います。それが実際的な違いであり、どちらにリーチするかを決定します。文法も異なります。
| 特集 | text-shadow |
box-shadow |
|---|---|---|
| 影の形 | 各グリフのアウトライン | 要素'丸みを帯びた角を含むボックス |
| 半径の広がり | 利用不可 | はい、4 番目の長さです |
inset キーワード |
利用不可 | はいって |
| 複数の層 | はい、カンマ区切りです | はい、カンマ区切りです |
| ペイントオーダー | 最初に上にリストされています | 最初に上にリストされています |
| デフォルトの色 | currentColor |
currentColor |
| 通常の使用 | 見出し、ロゴ、画像上の読みやすさ | カード、ボタン、標高 |
欠落しているスプレッド値は、テキストの輪郭が1 つではなく4 つの影を必要とする理由です。 と box-shadow 書けます 0 0 0 2px black 固体のリングを成長させること テキストではグリフを展開する方法がないため、コピーをいくつかの方向にオフセットして偽造します 単語ではなくコンテナをスタイリングしている場合は、 ボックスシャドウジェネレータガイド スプレッド層、はめ込み層、昇降層をカバーします。
複数のテキストシャドウを重ねることはどのように機能しますか?
1 つの宣言は、カンマで区切って、好きなだけ影を保持することができ、ブラウザは、ビューアに最も近い最初のものをペイントします リストの最後の影は、後ろに座っています テキスト自体は、常にそれらのすべての上にペイントします。
その順序付けは、レイヤーが重なるたびに重要です これら2 つの宣言を比較してください:
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
1つ目は 鮮明な黒のコピーは 鋭く保たれ 黄色い霞が その後ろに鎮座します 2つ目は 黄色い輝きが 黒のコピーを洗い 柔らかくします 同じ影で 見た目も違います。
ジェネレーターも同じルールに従います。 layer タブの Layer 1 は出力の最初のシャドウなので、上にペイントされます。 layer を追加すると、リストの最後、他のシャドウの後ろに追加されます。 layer を前方に移動するには、それを削除して再作成するか、コピーした CSS を手動で編集します。
Toolzジェネレーターはどのような値を書きますか?
ザ・ テキストシャドウジェネレータ 各層に5 つのコントロールを与え、固定形式で宣言を書き込む。 「その形式を知ることは、結果を独自の規約を持つコードベースに貼り付けるときに役立ちます。」
| 制御 | 範囲 | ステップ | として表記 |
|---|---|---|---|
| オフセット X | 50pxに-50px | 1px の | Npx |
| オフセット Y | 50pxに-50px | 1px の | Npx |
| ぼかし | 0pxから100pxへ | 1px の | Npx、 含む 0px |
| 色 | カラーピッカー | ー | 6桁の16進数 |
| 不透明度 | 0% から100% までです | 1% | 色の後に 2 つの 16 進数として追加されます |
不透明度は、 に続いて 8 桁の 16 進値として色に折り畳まれます CSS カラー モジュール レベル 4 の 16 進表記。 最後の2 桁は0 から255 のスケールのアルファチャンネルなので、ツールは不透明度を255 倍にして、ラウンドし、16 進数に変換します。
いくつかの不透明度に対してそれがどのように機能するかは次のとおりです:
| 不透明度スライダー | 255倍 | 丸みを帯びました | ヘックスアルファ | 例の色 |
|---|---|---|---|---|
| 100% | 255 に所蔵されています | 255 に所蔵されています | ff |
#000000ff |
| 90% | 229.5 | 二 三〇 | e6 |
#4466eee6 |
| 70% | 178.5 | 179 に所蔵されています | b3 |
#4466eeb3 |
| 60% | 153 に準拠して、 | 153 に準拠して、 | 99 |
#00000099 |
| 35% | 89.25 | 89 に記載のものです | 59 |
#00000059 |
| 25% | 63.75 | 64 | 40 |
#00000040 |
現在のブラウザはすべて8 桁の16 進数を読みます 非常に古いブラウザをサポートする必要がある場合は、色を次のように書き換えます rgba() コピー後: #00000099 なる rgba(0, 0, 0, 0.6)。
ツールはスライダーとピッカー入力のみを受け入れるため、値はピクセル全体になります。 で測定されたシャドウの場合 em、フォントサイズでスケーリングする、CSSをコピーして、スタイルシートの単位を交換します。 A 2px 16px本文のoffsetは、 0.125em。
ネオングローのテキストエフェクトはどのように作成しますか?
ネオンの輝きは、オフセットがゼロのいくつかの影であり、同じ明るい色と増加するぼやけです。各層は、より広くて暗いハローを追加し、一緒になって周囲の空気に光が滲むように見えます。
ジェネレーターは、Neon Glowプリセットで開き、これが生成されます:
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
3 つのレイヤー、毎回 2 倍になるぼかし (7、14、28)、100% から 90%、70% への不透明度のステッピング。タイトな 7px レイヤーは文字に明るいコアを与え、28px レイヤーは色を広げます。暗い背景には白いテキストがあり、これは点灯したチューブとして表示されます。明るい背景では効果の大部分が消えます。そのため、プレビューには Light bg / Dark bg トグルがあります。テーマ スイッチを使用してサイトにグローを出荷する前に両方を確認してください。
グローをより強くするには、56pxのぼかしで4 番目のレイヤーを追加するか、7pxレイヤーを2 回繰り返します レイヤーを繰り返すと、その不透明度が積み重なり、コアを広げることなくより激しくなります。
テキストをテキストシャドウでアウトライン化するにはどうすればよいですか?
4 つのハードシャドウを配置します (ぼかし) 0)各対角線上に1 ピクセルアウトします. それらの重なりは,すべてのグリフの辺をたどります.
Outlineプリセットは、次のように書いています:
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
これは1 ピクセルでうまく機能します.2 または3 ピクセルでギャップが曲線や直線エッジの中点で現れ始めます.4 つのコピーは対角線しか覆わないからです.太い輪郭の場合は,直線軸にさらに4 つの層を追加します. ()0 -2px、 2px 0、 0 2px、 -2px 0)したがって、各文字を8部ずつ囲みます。
影のない代替手段があります。 -webkit-text-stroke グリフパスに沿って実際のストロークを描き、プレフィックスにもかかわらず現在のブラウザでサポートされています アウトラインを中心としているため、薄い文字に食べられ、CSSモジュールではなくWHATWG互換規格で指定されています 表示テキスト上の小さく鮮明なアウトラインの場合、4 つのシャドウトリックは最も予測可能なオプションのままです。
3Dまたは押し出しテキストを作る方法は?
同じ色でいくつかのハードシャドウを積み重ね、それぞれがさらに下と右に 1 ピクセルオフセットします。各コピーに 1 ピクセルの深さが追加され、目は山を実線の文字の側面として読みます。
レトロ3Dプリセット:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
3 つのオレンジ色の層が3 ピクセルの押出を構築し、25% の不透明度で4 番目の黒い層が文字を接地する接触影として1 ピクセルさらに外側に置かれます より深い押出のために、オフセット4、5、6 でオレンジ色の層を追加し続け、暗い層を最後に移動します 12pxの押出のための12 層は、大きな英雄の見出しのために正常です。
ロングシャドウのプリセットでは、ギャップやフェージングの不透明度で同じアイデアを使用しています:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
オフセットは成長しますが (1、3、6、10)、不透明度は低下します (20%、15%、10%、6%)。そのため、影は固体のブロックを形成するのではなく、斜めに外れます。
どのテキストシャドウレシピがどの効果に適合しますか?
ここでは、ジェネレーター内の 8 つのプリセットすべてを紹介します。それぞれの背後にあるアイデアを参考にして、それらを適応させることができます。
| プリセット | レイヤー | オフセット | ぼかし | アイデア |
|---|---|---|---|---|
| ソフト | 1です | 0、2px | 4px の | 黒 35% の微妙なドロップ シャドウ。ほとんどの見出しに安全です |
| ハード | 1です | 2px、2px | 0です | 60% ブラックで鮮明なオフセットコピー、フラットプリントルック |
| ネオン グロウ | 3つです | 0、0 | 7、14、28px | 同じ色、成長ぼかし、暗い色の光用 |
| レトロ 3D | 4です | 1 から4pxの対角線 | 0です | ステップドハードコピーとかすかな接触影 |
| 概要 | 4です | +/-1px 対角線 | 0です | グリフのエッジをトレースする 4 つのコピー |
| エンボス | 2です | ー1px/ー1pxと1px/1px | 0です | 白のハイライトが左上、濃い色合いが右下 |
| 火 | 3つです | 0, -1 / -2 / -4px | 4、10、18px | 黄色からオレンジ、赤、上向きに上がります |
| ロング シャドウ | 4です | 1、3、6、10px 対角線 | 0です | ギャップの拡大、不透明度の薄れ |
エンボスは、人々が読み間違えた人です。明るい影を上と左に暗い影を下と右にペアにし、左上が盛り上がった文字に当たる光に似ています。2 つの色を交換すると、テキストは代わりにページに押し込まれて見えます。古典的な活版印刷効果。どちらも、テキストの色が背景色に近い場合にのみ機能します。高コントラストのテキストでは、ハイライトが消えます。
負の垂直オフセットを持つ唯一のプリセットは火です。各層はさらに上に移動し、ぼやけて赤くなるため、熱が文字から上昇するように見えます。
テキストシャドウは読みやすさやアクセシビリティに悪影響を及ぼしますか?
それはできる、そしてリスクはぼかしとオフセットで成長します 影は、テキストの色と背景色の間で計算されるWCAGが測定するコントラスト比を変更しません 影は、WCAGが測定するコントラスト比を変更しません WCAG 2.1 コントラスト最小値 通常のテキストでは 4.5:1、大きなテキストでは 3:1 を要求しますが、輝きは紙でそれを満たすのに役立ちません。
実際には、忙しい写真の光のテキストの後ろの薄い暗い影は、グリフの端を画像から分離するため、文字を選びやすくします。小さなテキストで重く光るとは逆の効果があります。ハローは、"e" および "a" のような文字のカウンターを満たし、単語はドロドロに変わります。
保留するいくつかのガイドライン:
- Keep body text shadows subtle.とか
0 1px 2px rgba(0, 0, 0, 0.3)は 豊富. - 大規模な表示テキスト、およそ32px以上のマルチレイヤーエフェクトを保存します。
- サイトにテーマの切り替えがある場合は、明るい背景と暗い背景の両方への影響を確認してください。
- 低コントラストを救うために影に頼らないでください 最初にテキストの色を修正します。
- 電話機で見出しが届く最小サイズでテストします。このサイズでは、影が比例して最大になります。
何がテキストシャドウダウンを遅くし、一般的な間違いは何ですか?
ぼかしは高価な部分です。ぼかしを付けたレイヤーはすべて、再ペイントするたびにラスタライズしてぼかしをする必要があり、コストはぼかし半径とテキストの量に応じてスケールされます。 テキストシャドウの MDN リファレンス 構文をカバーします パフォーマンス面は推論が簡単です: 単一の見出しの3 層の輝きは安く、スクロール中に再塗装された長い記事のすべての段落で同じ輝きは、低電力電話のジャンクの一般的なソースです。
何度も現れる間違い:
| 間違い | 症状 | 修正 |
|---|---|---|
のようなスプレッド値を書く 0 0 4px 2px red |
宣言全体が無視されます | 4 番目の長さを削除します; text-shadowにはスプレッドがありません |
追加 inset |
宣言は無視されました | テキストではサポートされていません; 代わりに、より軽いエンボスを使用してください |
負のぼかし、例えば. -2px |
宣言は無視されました | ぼかしはゼロまたは正でなければなりません |
| レイヤー間のコンマが欠落しています | 宣言は無視され、何もレンダリングされません | 各影をカンマで区切ります |
| グローは端でクリップされています | 直線的にヘイローカット | 親は持っています overflow: hidden; パディングを追加します |
| グロー インビジブル | 何も起こらないようです | 光の背景の光輝; 暗いテスト |
ベンダープレフィックス -webkit-text-shadow |
無害だが役に立たない | プレーンを使用します text-shadow;プレフィックスは必要ありません |
最初の3 つは強調する価値がある。 1 つの無効な部分がそのレイヤーだけでなく宣言全体を無効にするので、12 層の3Dエフェクトのレイヤー4 の誤植は12 個すべてを削除する。 generator' sの出力は常に有効であり、それがそこにスタックを構築して貼り付ける理由の1 つである。
テキストシャドウを手書きで書く代わりにジェネレーターを使用するのはいつですか?
1 つのソフトシャドウはクリックするよりもタイプする方が早い 3 つ以上のレイヤーを持つものは、見た目を判断するため視覚的に構築するのが早く、見た目を数字から判断するのは難しい ジェネレーターは学習にも役立ちます。プリセットを選択し、1 つのレイヤーを変更し、エフェクトのどの部分が動くかを確認します。
Toolzジェネレータは完全にブラウザで実行されます プレビュー、レイヤーリスト、およびCSSはすべてページ上で計算され、何もアップロードされず、ロードされるとオフラインで動作し続けます 無料、サインアップなし コピーCSSは、サイト上の他のツールのように、毎日の使用手当にカウントされます; 編集とプレビューはそうではありません。
それがしないこと:それはない em や rem 単位、入力された数値フィールドなし、レイヤーのドラッグから並べ替えなし、プレビューのカスタム フォントなし。それらの場合は、宣言をコピーし、独自のスタイルシートまたはブラウザ開発ツールで調整します。
影ではなく、ぼかしや色直しの要素が必要な効果の場合、 CSS フィルター など drop-shadow() あんど blur() 画像を含む要素全体に適用します。 text の後ろにある Frosted パネルは、 のジョブです glassmorphism generator、およびソフト押し出しボタンはに属します neumorphism generator。ビジュアル CSS ビルダーの完全なセットは、 CSS ツールハブ、そして CSS勾配発生器ガイド 光るタイトルの後ろにグラデーションの背景が必要な場合は、テキスト効果とうまく組み合わせることができます。
うまくいった例: 写真の上に読みやすいヒーローのタイトルを付けます
明るいビーチの写真の上に白い 64 ペンス文字があり、その文字が砂の中に消え続けているとします。目標は、まず読みやすさ、次にスタイルです。
で開始します テキストシャドウツール softプリセットで: 0px 2px 4px #00000059。 淡すぎるビジーイメージで。 opacityを60% に上げ、8pxにぼかし、与える 0px 2px 8px #00000099。 背景からエッジが離れていますが、細いストロークはまだちらつきます。
ゼロオフセット、2pxぼかし、50% 黒で2 番目のレイヤーを追加します: 0px 0px 2px #00000080。 2 番目に追加したので、最初のレイヤーの後ろにペイントしますが、グリフのエッジを抱きしめ、すべてのストロークに薄い暗い縁を与えます。その結果:
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
2 つのレイヤー, レンダリングする両方安価, タイトルは、砂の上に持ち上げます, 空とサーフ. 、見出しが36pxにドロップする携帯電話で, 同じピクセル値は比例して重いです; に変換します em それらをステップに保ちます ()0 0.03em 0.125em 64px で.
