Text Shadow Generator
CSS text shadow
CSS text shadow ブラウザ内でローカルに実行
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
テキスト シャドウ ジェネレーターは、ライブ プレビューと CSS を使用して、テキストの背後にあるシャドウのオフセット、ぼかし、色、不透明度を設定します。 box-shadow とは異なり、スプレッド値がありません。これが人々を惹きつけます。テキスト シャドウを重くする唯一の方法は、1 つの宣言に複数のシャドウを積み重ねることです。これは、写真上の明るいテキストの背後に微妙な暗い影を置き、読みやすさに最も役立ちます。背景が変わるとすぐに消えてしまうため、テキストを読みやすくするものであってはなりません。
Where people use the
- 微妙な影を追加して、写真の上にキャプションを読み上げます。
- プレスまたは彫刻された見出し効果を作成します。
- レトロまたはネオンのテキスト処理を作成します。
- 影が安っぽく見える前に、どのくらいの重さの影が必要かをテストします。
How to use the
- 1
オフセットを設定する
オフセット X は右に移動し、オフセット Y は下に移動します。 1 または 2 ピクセルのオフセットが深度として読み取られます。それより大きいものはドロップシャドウのように見え始めます。
- 2
ぼかしを設定する
ぼかしを加えるとエッジが柔らかくなります。ゼロはテキストの厳密な複製を提供し、これによりアウトラインとレトロな効果が作成されます。
- 3
色と不透明度を選択してください
明るい背景上の暗いテキストには明るい影が必要であり、その逆も同様です。明らかな効果を必要としない限り、不透明度は低くしてください。
- 4
CSSをコピーする
ルールには rgba カラーが含まれており、すぐに貼り付けることができます。
- 5
さらに重みが必要な場合は影を重ねる
スタイルシートにカンマで区切って 2 番目の影を追加します。広がりがないので、これがテキストの影を太くする唯一の方法です。
ヒントとベストプラクティス
- 少ないほど良い: 不透明度の低い 1 つまたは 2 つのピクセルは、強いぼかしよりも優れています。
- アクセシビリティを影だけに依存しないでください。下のコントラストを修正します。
- プロパティは継承されるため、対象となる要素をスコープとすることに注意してください。
よくある質問
スプレッド値がないのはなぜですか?
text-shadow がサポートしていないためです。その構文は、オフセット X、オフセット Y、ブラー、カラーのみです。スプレッドをシミュレートするには、オフセットがわずかに異なるいくつかの同一のシャドウをスタックします。
画像の上にテキストを読み取れるようにするために使用できますか?
あくまでも補足として。影は余白では役に立ちますが、混雑した領域では役に立ちません。背景色に対して測定される WCAG コントラスト比には考慮されません。可読性が本当に重要な場合は、スクリムまたは無地のパネルを追加します。
テキストのアウトラインを作成するにはどうすればよいですか?
ブラーをゼロにして、各方向にプラスおよびマイナス 1 ピクセルの位置に 4 つのシャドウをスタックします。これにより、-webkit-text-ストロークを必要とせずにアウトライン効果が生成されますが、これはどこでもサポートされているわけではありません。
ページの速度が遅くなりますか?
単一の静的シャドウにはほとんどコストがかかりません。テキスト シャドウをアニメートしたり、大きなぼやけたシャドウを多くのテキストに適用したりすると、再ペイントのコストが発生します。
子要素に継承されるのでしょうか？
はい。テキスト シャドウは継承されるため、コンテナに設定するとテキストを持つすべての子孫に適用されますが、これは驚くべきことです。