CSS Text Shadow
How to create text shadow?
CSS Shadow: Text shadow, box shadow
What is CSS shadow effects?
Shadow means a duplicate of the element but it only shows a shadow not complete element. shadow be always dark color form the element. here is the CSS shadow it’s kind of two type. text- shadow , box-shadow
What is the CSS text-shadow?
CSS text shadow has four properties: Horizontal, vertical, blur & color.
Shorthand property of the CSS text shadow: Horizontal, vertical, blur & color.
Text–shadow value also allow negative value.
Exampale: Text-shadow : 5px 2px 10px red.
The default value of the text-shadow: none;
We can use multiple text-shadow as given example:
For more modification visit URL:https://embed.plnkr.co/FwfR3ReXYSbQmj6Wyowq/
CSS Shadow: Text shadow, box shadow
What is CSS shadow effects?
Shadow means a duplicate of the element but it only shows a shadow not complete element. shadow be always dark color form the element. here is the CSS shadow it’s kind of two type. text- shadow , box-shadow
What is the CSS text-shadow?
CSS text shadow has four properties: Horizontal, vertical, blur & color.
Shorthand property of the CSS text shadow: Horizontal, vertical, blur & color.
Text–shadow value also allow negative value.
Exampale: Text-shadow : 5px 2px 10px red.
The default value of the text-shadow: none;
We can use multiple text-shadow as given example:
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
.anything1 p {
color: #fff;
text-shadow: 5px 0px 1px #000;
font-size: 50px;
margin-bottom: 30px;
}
.anything2 p {
color: #fff;
text-shadow: 1px -5px 10px #000;
font-size: 50px;
margin-bottom: 30px;
}
.anything3 p {
color: #fff;
text-shadow: 1px 1px 1px #000, -10px 0 10px #0bf, 0 0 10px #b06;
font-size: 50px;
margin-bottom: 30px;
}
.anything4 p {
color: #fff;
text-shadow: 1px 1px 1px #000, -10px 0 10px #0bf, 0 0 10px #b06;
text-shadow: -1px 0 0 #0bf, 0 1px 0 #0bf, 1px 0 0 #0bf, 0 -1px 0 #0bf;
font-size: 50px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="anything1">
<p>Text Shadow</p>
</div>
<div class="anything2">
<p>Text Shadow</p>
</div>
<div class="anything3">
<p>Text Shadow</p>
</div>
<div class="anything4">
<p>Text Shadow</p>
</div>
</body>
</html>
No comments:
Note: Only a member of this blog may post a comment.