➢With CSS you can add shadow to text and to elements.
In these chapters you will learn about the following properties:
➢text-shadow
➢box-shadow
➢The CSS text-shadow property applies shadow to text.
EXAMPLE:
h1 {
text-shadow: 2px 2px;
}
RESULT:
EXAMPLE:
h1 {
text-shadow: 2px 2px green;
}
RESULT:
EXAMPLE:
h1 {
text-shadow: 2px 2px 5px green;
}
RESULT:
EXAMPLE:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
RESULT:
EXAMPLE:
h1 {
text-shadow: 0 0 3px green, 0 0 5px lightgreen;
}
RESULT:
EXAMPLE:
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px lightgreen, 0 0 5px green;
}
RESULT:
➢The CSS box-shadowproperty is used to apply one or more shadows to an element.
EXAMPLE:
h1 {
box-shadow: 10px 10px;
}
RESULT:
EXAMPLE:
h1 {
box-shadow: 10px 10px lightgreen;
}
RESULT:
EXAMPLE:
h1 {
box-shadow: 10px 10px 5px lightgreen;
}
RESULT:
EXAMPLE:
h1 {
box-shadow: 10px 10px 5px 12px lightgreen;
}
RESULT:
EXAMPLE:
h1 {
box-shadow: 10px 10px 5px lightgreen inset;
}
RESULT: