As a web developer or designer, one of your main goals is to create visually appealing and easy-to-read websites.
One way to achieve this is by playing with text styles and effects.
In this CSS tutorial, we’ll explore how to add white text with a black shadow using CSS.
First, let’s understand the basics of text shadows.
A text shadow is a visual effect added to text that creates a shadow behind the text.
It’s created by specifying the horizontal and vertical offsets of the shadow, as well as the blur radius and color.
To add a black shadow to white text, we’ll use the following CSS code:
p { color: white; text-shadow: 2px 2px 2px black; }
In this code, we’ve set the color of the text to white and added a shadow with a horizontal offset of 2px, a vertical offset of 2px, a blur radius of 2px, and a color of black.
The result will be white text with a subtle black shadow.
Another way to achieve the same effect is by using the CSS box-shadow
property.
This property allows you to add a shadow to any element, including text.
To add a black shadow to white text, we’ll use the following code:
p { color: white; box-shadow: 2px 2px 2px black; }
By using the box-shadow
property, we can add a shadow to any element, including text.
You can also add multiple shadows by comma-separating multiple values for the text-shadow
or box-shadow
property:
p { color: white; text-shadow: 2px 2px 2px black, -2px -2px 2px black; }
In this example, we’ve added two shadows to the text.
The first is the same as before, with a horizontal offset of 2px and a vertical offset of 2px.
The second shadow is the same, but with a negative offset of -2px and -2px.
This creates a more dramatic effect and makes the text appear to be raised.
In conclusion, creating visually appealing text on a website can be achieved by playing with text styles and effects.
Adding a shadow to text is a great way to make text stand out and be more readable.
With the help of CSS text-shadow
and box-shadow
properties, you can add a shadow to any element including text, making it easy to create an eye-catching design.