CSS Text Shadow ジェネレーター - テキストエフェクトツール

A はい、1つの要素に5つ以上の影を重ねると、特にモバイル端末で描画が遅くなります。影1つにつきブラウザが計算を追加で行うからです。3pxのぼかしを1つだけなら問題ありません。装飾的なテキストなら、影は最大2～3個に抑えてください。動作がカクつくなら、ぼかし半径を減らすか影を減らしましょう。ツールのプレビューでリアルタイムに確認できます。

A いいえ、直接は影響しません。ぼかし半径は影の縁の柔らかさだけを制御します。0pxならスタンプのようにシャープなエッジになります。10pxにすると色が広がって薄く見えますが、実際のhex値やrgba値はまったく変わりません。影を濃くしたいなら、ぼかしを減らす代わりに色の不透明度を上げてください。例えば、ぼかし5pxで黒50%に設定するとバランスが良くなります。

A text-shadowプロパティ単体ではできません。CSSの影は文字全体を包み込みます。しかし疑似効果は可能です。Yオフセットを3～4px、ぼかしを1pxに設定し、暗い色を70％の不透明度で使います。すると鋭い影が真下に落ち、下線のように見えます。本当の片側だけの効果なら、border-bottomや疑似要素を使ったほうが確実です。

A はい、できます。多くのビジュアルジェネレーターは背景色を変更できます。明るいテキストに影をつけるなら、暗い背景で試してみてください。黒いテキストに黒い影は完全に見えません。このツールのライブプレビューには、キャンバス用のカラーピッカーが付いています。#333のグレーや白い背景でテストしましょう。コードをコピーする前にコントラストの問題を発見できます。

A ページのCSSがシャドウを上書きしている可能性があります。スタイルシートに既存のtext-shadowルールがないか確認してください。それらは新しいものと重なります。もう一つの原因は相対フォントサイズです。ジェネレーターで48pxのテキスト用に調整したシャドウは、16pxの本文では小さく見えます。ツールからX、Y、ブラーの値を正確にコピーし、ブラーを比例調整してください。サイズが400%違う場合、ブラーに0.25を掛けてみてください。

A できますが、大きなぼかし値は避けましょう。24pxのモバイル見出しに4pxのぼかしは問題なくても、同じ影を72pxのデスクトップヒーローに使うと濁って見えます。オフセットは10px未満に抑え、320px幅でテストしてください。このツールのプレビューはキャンバスをリサイズできるので、縮小して影がはっきり読めるか確認しましょう。不十分なら、ぼかしを半分に減らし、代わりに色の不透明度を60%に上げるのがコツです。深みは保てますが、にじみは防げます。

A できます。ネオン効果はまさにその方法で作ります。同じ色のシャドウを2～3層重ねてください。芯になる部分はぼかし2px、中間は8px、外側のハローは20pxに設定します。各層はカンマ区切りのtext-shadow値として指定します。暗い背景に#0ffのような明るい色を使い、外側の層は不透明度を50%に下げましょう。60pxのフォントサイズで試すと、光が実際に広がる様子を確認できます。

A はい、プレビューからコピーしたCSSはそのまま`.scss`ファイルに貼り付けられます。複数層の設定をカスタム変数に直接組み込めるため、カンマ区切りの手動調整が不要になります。まずは変数ブロックにそのままペーストしてみてください。

A 最近のブラウザのほとんどは、レイアウトの崩れなしにRGBA値をネイティブ処理します。レガシーシステムに対応する必要がある場合は、RGBA宣言の直上にフォールバック用の1進数カラーコードを記述してください。ツールの出力パネルを使えば、両方の形式を簡単に取得できます。不透明度を40%に設定して試してみましょう。

A CSSのtext-shadow値はデフォルトで固定ピクセルを使います。4pxのぼかしを設定した場合、ページを拡大しても4pxのままです。ツール内でrem単位に切り替えると、画面全体でスムーズに拡大縮小できます。オフセットをフォントサイズに連動させるのがコツです。