CSS Text Shadows and Effects: Add a variety of shadows and special effects to your text

CSS text shadows and effects: Add various shadows and special effects to text, specific code examples are required

In web design, text is an important way to display information one. In order to make the page presentation more vivid and attractive, we can add various shadows and special effects to the text through CSS. This article introduces some common text shadows and special effects and provides corresponding code examples.

1. Text shadow effect

1. Add text shadow

You can add a shadow effect to text through the text-shadow property of CSS. The text-shadow property accepts four values, namely horizontal offset, vertical offset, blur radius and shadow color. For example:

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

In the above code, 2px represents the horizontal offset, 2px represents the vertical offset, 4px represents the blur radius, and rgba(0, 0, 0, 0.5) represents the shadow color. You can adjust these values ​​as needed to get different shadow effects.

2. Inner shadow of text

In addition to adding a shadow effect around the text, we can also add an inner shadow effect to the text. This can be set using the CSS text-stroke property. For example:

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

In the above code, -webkit-text-stroke means setting the stroke style of the text, 2px means the stroke width, and rgba(0, 0, 0, 0.5) means the stroke color. You can adjust the width and color of the stroke as needed.

2. Special text effects

1. Text gradient effect

You can use the linear-gradient or radial-gradient property of CSS to add a gradient effect to text. For example:

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

In the above code, -webkit-linear-gradient means setting the gradient background color, and #FFC600 and #FF6A00 represent the starting and ending colors. -webkit-background-clip: text means that the background color is applied only to the text content, and -webkit-text-fill-color: transparent means that the text color is set to transparent. This will give the text a gradient color.

2. Text stroke effect

You can use the CSS text-stroke property to add a stroke effect to text. For example:

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

In the above code, -webkit-text-stroke means setting the stroke style of the text, 2px means the stroke width, and black means the stroke color. color: white means the text color is white. This will give the text a stroked effect.

3. Text reflection effect

You can use the CSS text-overflow and white-space properties to add a reflection effect to text. For example:

.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));
}

In the above code, the reflective-text class represents the text to which the reflection effect is to be added. Use the ::after pseudo-element to create a pseudo-element the same size as the text and set its background to a gradient color from top to bottom. Through the overflow: hidden and white-space: nowrap attributes, the display range of the pseudo-element is limited to the bottom part of the text content, thereby achieving the reflection effect.

The above are some common examples of text shadows and special effects. You can adjust these codes as needed and add different shadows and special effects to the text to achieve better page beautification. Hope this article is helpful to you!

The above is the detailed content of CSS Text Shadows and Effects: Add a variety of shadows and special effects to your text. For more information, please follow other related articles on the PHP Chinese website!