HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Shadows
With CSS you can add shadow to text and to elements.
In these chapters you will learn about the following properties:
text-shadowbox-shadowThe CSS text-shadow property applies shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):
h1
{
text-shadow: 2px 2px;
}
Next, add a color to the shadow:
h1
{
text-shadow: 2px 2px red;
}
Then, add a blur effect to the shadow:
h1
{
text-shadow: 2px 2px 5px red;
}
The following example shows a white text with black shadow:
h1
{
color: white;
text-shadow: 2px 2px 4px #000000;
}
The following example shows a red neon glow shadow:
h1
{
text-shadow: 0 0 3px #FF0000;
}
To add more than one shadow to the text, you can add a comma-separated list of shadows.
The following example shows a red and blue neon glow shadow:
h1
{
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
The following example shows a white text with black, blue, and darkblue shadow:
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
You can also use the text-shadow property to create a plain border around some text (without shadows):
h1
{
color: coral;
text-shadow: -1px 0 black, 0 1px
black, 1px 0 black, 0 -1px black;
}