CSS or Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in HTML or XML. It is used to style web pages and user interfaces written in HTML and XHTML. One of the most commonly used CSS properties is text-shadow. Text-shadow is used to add a shadow effect to the text in a web page. It is a simple and effective way to make text stand out and add depth to a design.
The text-shadow property is used to add a shadow effect to the text. It takes four values: the horizontal offset, the vertical offset, the blur radius, and the color of the shadow. The horizontal offset and the vertical offset determine the position of the shadow relative to the text. The blur radius determines the size of the shadow, and the color determines the color of the shadow.
Here is an example of how to use the text-shadow property:
<p style="text-shadow: 2px 2px 5px #000000;">This is a text with shadow effect</p>
In the above example, the text-shadow property is used to add a shadow effect to the text. The horizontal offset is 2px, the vertical offset is 2px, the blur radius is 5px, and the color of the shadow is black (#000000).
Here are some more examples of how to use the text-shadow property:
<p style="text-shadow: 1px 1px 1px #000000;">This is a text with a small shadow effect</p>
<p style="text-shadow: 5px 5px 10px #000000;">This is a text with a large shadow effect</p>
<p style="text-shadow: -2px -2px 5px #000000;">This is a text with a shadow effect on the top and left side</p>
<p style="text-shadow: 2px 2px 5px #ffffff, -2px -2px 5px #ffffff;">This is a text with a white shadow effect on the bottom and right side and a black shadow effect on the top and left side</p>
In the first example, the text-shadow property is used to add a small shadow effect to the text. In the second example, the text-shadow property is used to add a large shadow effect to the text. In the third example, the text-shadow property is used to add a shadow effect on the top and left side of the text. In the fourth example, the text-shadow property is used to add a white shadow effect on the bottom and right side of the text and a black shadow effect on the top and left side of the text.
The text-shadow property can also be used with other CSS properties to create more complex effects. For example, it can be used with the font-size property to create a 3D effect:
<p style="text-shadow: 1px 1px 1px #000000; font-size: 30px;">This is a text with a 3D effect</p>
In the above example, the text-shadow property is used with the font-size property to create a 3D effect. The horizontal offset, vertical offset, and blur radius are all set to 1px, and the color of the shadow is black (#000000). The font-size property is set to 30px to make the text larger.
The text-shadow property can also be used with the background-color property to create a text with a transparent background:
<p style="text-shadow: 1px 1px 1px #000000; background-color: rgba(255, 255, 255, 0.5);">This is a text with a transparent background</p>
In the above example, the text-shadow property is used with the background-color property to create a text with a transparent background. The horizontal offset, vertical offset, and blur radius are all set to 1px, and the color of the shadow is black (#000000). The background-color property is set to rgba(255, 255, 255, 0.5) to create a white background with 50% opacity.
The text-shadow property is a simple and effective way to add a shadow effect to the text in a web page. It can be used with other CSS properties to create more complex effects. It is supported by all modern web browsers and can be used in any web page.