CSSテキストシャドウ

要素にシャドウを追加することは、魅力的なヘッダーを作成するための1つのコンポーネントです。たとえば、ウェブサイトをデザインしている場合、すべてのトップヘッダーに影を付けて、そのヘッダーをウェブページ上の他のヘッダーテキストから目立たせることができます。

そこで、CSS text-shadowプロパティが登場します。text-shadowプロパティを使用すると、テキスト要素に影の効果を追加できます。このチュートリアルでは、例を使用して、テキストシャドウの基本と、text-shadowプロパティを使用してWebページ上のテキストにシャドウを追加する方法について説明します。

CSSテキストシャドウ

影は、Webページ上の要素を区別する1つの方法です。たとえば、緑色の影が付いたテキスト行は、標準の黒いテキスト行よりもユーザーの目を引く可能性が高くなります。

text-shadowプロパティを使用すると、CSSのテキスト要素の周囲に影を追加できます。 text-shadow要素は、HTMLのヘッダー、段落テキスト、およびその他のテキストベースの要素に適用できます。

text-shadowプロパティの基本的な構文は次のとおりです。

text-shadow: offset-x offset-y blur-radius color;

text-shadowプロパティの構文は、ボックスベースのHTML要素にシャドウを適用するために使用されるbox-shadowプロパティの構文に似ています。 CSSのボックスシャドウの詳細については、CSSボックスシャドウの初心者向けガイドをご覧ください。

text-shadowプロパティの構文の主なコンポーネントは次のとおりです。

offset-xは、シャドウの水平（x軸）オフセットです（必須）。
offset-yは、シャドウの垂直（y軸）オフセットです（必須）。
blur-radiusは、シャドウのブラー効果の半径です（オプション）。
colorは影の色です。テキストシャドウのデフォルトの色は黒（オプション）です。

動作中のtext-shadowプロパティのいくつかの例を調べて、プロパティを使用して独自のテキストシャドウを作成する方法を説明しましょう。このチュートリアルでは、次のHTML要素を使用します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

<html>

<h1>Career Karma</h1>

<style>

h1 {
	color: lightblue;
}

CSSテキストシャドウ 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

コードを実行すると、

要素がレンダリングされ、`Career Karma`というテキストが表示されます。画面上。

は、HTMLでサポートされている最大のヘッダー要素です。 CSSコードは、ヘッダーのcolorプロパティの値を`lightblue`に設定します。これは、ヘッダーが水色のテキストで表示されることを意味します。

基本的なテキストシャドウ

text-shadowプロパティを操作するときに指定する必要がある必須属性は、offset-xとoffset-yの2つだけです。これらの2つのプロパティを指定すると、水平方向と垂直方向の影のあるテキストを作成できます。

これらの両方の値が指定されたtext-shadowプロパティの例を次に示します。

<html>

<h1>Career Karma</h1>

<style>

h1 {
	text-shadow: 1px 1px;
}

CSSテキストシャドウ 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

このコードでは、ヘッダーに単純なテキストシャドウを適用しました。この影は、横軸と縦軸の両方で1pxオフセットされています。コードの結果を見ると、テキストの下にわずかに黒い影が適用されていることがわかります。黒はシャドウのデフォルトの色です。

シャドウカラー

テキストシャドウをデザインするときに、シャドウにカスタムカラーを指定することを決定する場合があります。そこで、color属性が登場します。

影を淡いピンクにしたいとします。次のコードを使用して、影の色をピンクに変更できます。

<html>

<h1>Career Karma</h1>

<style>

h1 {
	text-shadow: 1px 1px pink;
}

CSSテキストシャドウ 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

このコードでは、color属性を指定し、その値をpinkに設定しました。。これにより、テキストの下にピンクの影を作成することができました。最初の例のように、影は水平軸と垂直軸の両方で1pxオフセットされています。

ぼやけた影

text-shadowプロパティをblur-radius属性と組み合わせて使用すると、ぼやけた影を作成できます。

ここで、水平軸と垂直軸の両方で3ピクセルオフセットされ、シャドウを囲む2ピクセルのぼかし効果を持つシャドウを作成するとします。次のコードを使用して、このシャドウを作成できます。

<html>

<h1>Career Karma</h1>

<style>

h1 {
	text-shadow: 3px 3px 2px pink;
}

CSSテキストシャドウ 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

ご覧のとおり、影は両方の軸で3pxオフセットされており、影はぼかし効果で囲まれています。ぼかし効果を強めるために、blur-radius属性の値を増やすことができます。よりぼやけた影が必要な場合は、使用するぼかしに応じて、blur-radiusの値を5pxまたは10px以上に設定できます。この例では、影はピンクです。

複数の影

これまで、text-shadowプロパティを使用して1つのシャドウをテキストのブロックに適用する方法について説明してきました。ただし、text-shadowプロパティを使用して、テキスト要素に複数の影を追加することもできます。

テキストのブロックに複数のシャドウを追加するには、シャドウのコンマ区切りリストを作成する必要があります。複数のテキストシャドウを作成するための構文は次のとおりです。

text-shadow: shadowOne, shadowTwo;

各シャドウがコンマで区切られている限り、必要な数のシャドウを指定できます。ただし、各シャドウに指定するxオフセットとyオフセットの値は、時間の経過とともに増加する必要があります。そうしないと、シャドウが重なり合って表示されない場合があります。

影は指定された順序で表示されます。したがって、shadowOneはshadowTwoの前に表示されます。

テキストの後ろにピンクとオレンジの影が付いたテキストバナーを作成するとします。このコードを使用してこれを行うことができます：

<html>

<h1>Career Karma</h1>

<style>

h1 {
	text-shadow: 3px 3px 2px pink, 6px 6px 5px orange;
}

CSSテキストシャドウ 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

このコードでは、2つのシャドウを指定しました。各シャドウに指定した値は次のとおりです。

プロパティ名	シャドウワン	シャドウ2
オフセット-x	3px	6px
オフセット-y	3px	6px
blur-radius	2px	5px
色	ピンク	オレンジ

ご覧のとおり、コードに2つのシャドウを作成し、それぞれに異なる値を設定しました。

結論

text-shadowプロパティは、HTMLのテキストブロックに影を追加するために使用されます。テキストシャドウは、ヘッダーや段落などのテキストベースの要素に適用できます。

このチュートリアルでは、例を参照して、テキストシャドウの基本と、text-shadowプロパティを使用してカスタムテキストシャドウを作成する方法について説明しました。これで、エキスパートWebデザイナーのように独自のCSSテキストシャドウの設計を開始するために必要な知識が得られました。

CSSテキストデコレーション

CSSメディアクエリ

CSSでのテキストのフォーマット
CSSを使用すると、テキストをフォーマットして視覚的に魅力的なコンテンツを作成できます。次のプロパティは、CSSを使用してテキストのスタイルを設定するために使用されます。色このプロパティは、テキストの色を変更するのに役立ちます。文字間隔このプロパティは、文字間の間隔を設定するために使用されます。行の高さ線の高さは、このプロパティを使用して指定されます。 text-align テキストの水平方向の配置は、text-alignプロパティによって制御されます。テキスト装飾下線、取り消し線、または上線を引いてスタイルを設定するには、テキスト装飾を使用し
CSSシャドウ効果
text-shadowプロパティとbox-shadowプロパティをそれぞれ使用して、テキストと要素に影を追加します。以下はCSSのシャドウ効果のコードです- 例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } h2 { color: rgb(28, 0, 128); text-s

CSSテキストシャドウ