By using the CSS FONT and TEXT properties, the style of the headline and the printed text on the web page can be highlighted and beautified.
TEXT properties:
FONT properties:
In the following examples, we will demonstrate CSS styling with text formatting by adding webkit-stroke properties and text-shadow effects.
<p class="c">CSS -webkit-text-stroke example</p>
<style>
.c {
font-size: 50px;
font-weight: bold;
text-align: center;
font-family: "Arial Black", sans-serif;
background-color: #FF4500;
-webkit-text-fill-color: blue;
-webkit-text-stroke: 2px lightgray;
}
</style>
<p class="b">CSS text-shadow standard effect example</p>
<style>
.b {
text-align: center;
font-weight: bold;
font-size: 45px;
color: white;
text-shadow: 3px 3px 6px black;
}
</style>
<p class="m">CSS text-stroke and text-shadow combination</p>
<style>
.m {
text-align: center;
font-size: 70px;
font-weight: bold;
color: darkslategray;
background-color: #6495ED;
-webkit-text-stroke: 2px #E0FFFF;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666,
0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
</style>
<p class="blur">CSS text-shadow blur effect example</p>
<style>
.blur {
text-align: center;
font-style: italic;
font-weight: bold;
font-size: 45px;
color: #2F4F4F;
text-shadow: 3px 3px 5px red;
}
</style>
<p class="a">CSS horizontal shadow example</p>
<p class="aa">CSS vertical shadow example</p>
<p class="aaa">CSS diagonally shadow example</p>
<style>
p {
font-family: "Arial Black";
text-align: center;
font-size: 45px;
color: blue;
}
.a {
text-shadow: 3px 0px 0px red;
}
.aa {
text-shadow: 0px 3px 0px red;
}
.aaa {
text-shadow: 3px 3px 0px red;
}
</style>
<p class="neon">CSS text-shadow neon effect example</p>
<style>
.neon {
text-align: center;
font-weight: bold;
color: Coral;
font-size: 55px;
font-family: "Arial Black";
background-color: black;
-webkit-text-stroke: 2px red;
text-shadow: 0 0 10px #FF7F50, 0 0 20px #DC143C, 0 0 30px #DC143C, 0 0 40px #DC143C;
}
</style>
<p class="d">CSS text-shadow inset effect example</p>
<style>
.d {
text-align: center;
font-size: 60px;
font-weight: bold;
background-color: #6495ED;
-webkit-background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
</style>
<p class="angl">CSS Anaglyph Text Effect Example</p>
<style>
.angl {
position: relative;
font-size: 50px;
font-family: 'Arial Black', sans-serif;
color: lime;
}
.angl:after {
position: absolute;
content: "CSS Anaglyph Text Effect Example";
left: 1px;
top: -5px;
color: rgba(254, 0, 2, 1);
mix-blend-mode: multiply;
}
</style>
<div id="vintage">
<p>CSS text-shadow retro effect example</p>
</div>
<style>
#vintage p {
text-align: center;
font-weight: bold;
font-size: 60px;
margin: 30px auto;
font-family: Courier;
text-transform: uppercase;
color: #2F4F4F;
text-shadow: 3px 3px 0 #eee, 4px 4px 0 #2F4F4F;
}
</style>
<div id="max">
<p class="g">CSS text style example</p>
<p class="h">CSS text style example</p>
</div>
<style>
#max {
background-color: #00BFFF;
}
p {
text-align: center;
font-size:55px;
font-weight: bold;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.g {
color: red;
}
.h {
color: white;
}
</style>
<p class="abc">CSS multiple color shadow effect</p>
<style>
.abc {
text-align: center;
font-size: 50px;
color: #8A2BE2;
font-weight: bold;
text-shadow:
0 0 4px white, 0 0 5px white,0 0 6px white, 0 0 7px yellow, 0 0 8px yellow,
0 0 10px yellow, 0 0 11px yellow,0 0 12px yellow, 0 0 13px yellow, 0 0 14px yellow,
0 0 16px yellow, 0 0 17px yellow,0 0 18px yellow, 0 0 19px yellow, 0 0 20px yellow,
0 0 21px yellow, 0 0 22px yellow, 0 0 23px yellow,0 0 24px yellow,0 0 25px yellow,
0 0 26px green, 0 0 27px green, 0 0 28px green,0 0 29px green,0 0 30px green,
0 0 31px green, 0 0 32px green, 0 0 33px green,0 0 34px green,0 0 35px green,
0 0 36px green, 0 0 37px green, 0 0 38px green,0 0 39px green,0 0 40px green,
0 0 41px green, 0 0 42px green, 0 0 43px green,0 0 44px green,0 0 45px green;
}
</style>
<p class="flame">CSS Blaze Effect Example</p>
<style>
.flame {
padding: 10px;
text-align: center;
font-size: 40px;
background: #A0522D;
font-family: 'Arial Black', sans-serif;
color: Maroon;
text-shadow:
0 0 15px white, 0 0 16px white, 0 0 17px white,0 0 18px white, 0 0 19px white, 0 0 20px white,
0 0 21px yellow, 0 0 22px yellow, 0 0 23px yellow,0 0 24px yellow,0 0 25px yellow,
0 0 26px orange, 0 0 27px orange, 0 0 28px orange,0 0 29px orange,0 0 30px orange,
0 0 31px red, 0 0 32px red, 0 0 33px red,0 0 34px red,0 0 35px red,
0 0 36px darkred, 0 0 37px darkred, 0 0 38px darkred,0 0 39px darkred,0 0 40px darkred;
}
</style>
<p class="abg">CSS multiple text-shadow effect</p>
<style>
.abg {
text-align: center;
font-size: 50px;
color: #800080;
font-family: 'Arial Black', sans-serif;
text-shadow: 3px 3px #ff0000, 5px 5px #00ff00, 8px 8px #0000FF;
}
</style>