CSS テキストのシャドウと効果: テキストにさまざまなシャドウと特殊効果を追加します。

CSS テキストのシャドウと効果: テキストにさまざまなシャドウや特殊効果を追加します。具体的なコード例が必要です。

Web デザインでは、テキストは情報を表示する重要な方法です。 1つ。ページのプレゼンテーションをより鮮やかで魅力的なものにするために、CSS を通じてテキストにさまざまな影や特殊効果を追加できます。この記事では、いくつかの一般的なテキスト シャドウと特殊効果を紹介し、対応するコード例を示します。

1. テキストのシャドウ効果

1. テキストのシャドウの追加

CSS の text-shadow プロパティを使用して、テキストにシャドウ効果を追加できます。 text-shadow プロパティは、水平オフセット、垂直オフセット、ぼかし半径、影の色という 4 つの値を受け入れます。例:

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

上記のコードでは、2px は水平オフセット、2px は垂直オフセット、4px はぼかし半径、rgba(0, 0, 0, 0.5) は影の色を表します。必要に応じてこれらの値を調整して、さまざまなシャドウ効果を得ることができます。

2. テキストの内側の影

テキストの周囲に影効果を追加するだけでなく、テキストに内側の影効果を追加することもできます。これは、CSS の text-ストローク プロパティを使用して設定できます。例:

.text-inner-shadow {
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
}

上記のコードでは、-webkit-text-stroking はテキストのストローク スタイルの設定を意味し、2px はストロークの幅を意味し、rgba(0, 0, 0, 0.5) はストロークを意味します。色。必要に応じて、ストロークの幅と色を調整できます。

2. 特別なテキスト効果

1. テキスト グラデーション効果

CSS の Linear-gradient または Radial-gradient プロパティを使用して、グラデーションを追加できます。テキストに効果を与えます。例:

.gradient-text {
  background: -webkit-linear-gradient(#FFC600, #FF6A00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

上記のコードでは、-webkit-linear-gradient はグラデーションの背景色の設定を意味し、#FFC600 と #FF6A00 は開始色と終了色を表します。 -webkit-background-clip: text は背景色がテキスト コンテンツにのみ適用されることを意味し、-webkit-text-fill-color:parent はテキストの色が透明に設定されることを意味します。これにより、テキストにグラデーションカラーが与えられます。

2. テキスト ストローク効果

CSS の text-ストローク プロパティを使用して、テキストにストローク効果を追加できます。例:

.stroke-text {
  -webkit-text-stroke: 2px black;
  color: white;
}

上記のコードでは、-webkit-text-stroking はテキストのストローク スタイルの設定を意味し、2px はストロークの幅を意味し、黒はストロークの色を意味します。 color:white は、テキストの色が白であることを意味します。これにより、テキストにストローク効果が与えられます。

3. テキスト反射効果

CSS テキスト オーバーフロー プロパティと空白プロパティを使用して、テキストに反射効果を追加できます。例:

.reflective-text {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.reflective-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
}

上記のコードでは、reflective-text クラスは、反射効果が追加されるテキストを表します。 ::after 疑似要素を使用して、テキストと同じサイズの疑似要素を作成し、その背景を上から下へのグラデーション カラーに設定します。 overflow:hiddenとwhite-space:nowrap属性により、擬似要素の表示範囲がテキストコンテンツの下部に限定され、リフレクション効果が得られます。

上記は、テキストの影と特殊効果の一般的な例です。必要に応じてこれらのコードを調整し、テキストにさまざまな影や特殊効果を追加して、ページをさらに美しくすることができます。この記事がお役に立てば幸いです!

以上がCSS テキストのシャドウと効果: テキストにさまざまなシャドウと特殊効果を追加します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。