Text effects as using Bootstrap with custom CSS
In this tutorial, I am going to use pure CSS with Bootstrap framework for creating text effects that you may use for headings or some other purpose.
Normally, as using the text-shadow CSS property, you will specify the horizontal and vertical shadows along with blur and color of the shadow, for example:
text-shadow: 2px 3px 4px #00BBff;
See the following demos where I will use multiple values for defining the shadow of the text.
A demo of CSS text-shadow with multiple values
See the demo of text shadow with code and output by clicking the link or image below:
CSS and Markup:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.shadow-effects{
font-size:80px;
font-weight:bold;
color: transparent;
letter-spacing: .10em;
text-shadow: -9px -8px 2px rgba(193, 94, 221, 0.43),1px -1px 0 #fe6161, 2px 1px 3px #737272,3px 3px 1px #37408C;
}
@media only screen and (max-width: 767px) {
.shadow-effects{
font-size: 30px;
}
}
@media only screen and (max-width: 479px) {
.shadow-effects{
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<span class="shadow-effects">TEXT-SHADOW</span>
</div>
</div>
</div>
</body>
</html>
Another demo of shadow-effect
See another demo of text-shadow by using pure CSS. Again, by using multiple values separated by commas, the shadow is created.
The CSS:
<style>
.shadow-effects{
display: block;
text-align: center;
font-size:70px;
font-family: verdana;
letter-spacing: .13em;
color:#fff;
text-shadow: 0.45rem -0.45rem #B41039, -0.45rem -0.45rem #F3819D, 0 0.5rem rgba(255, 88, 9, 0.75);
}
@media only screen and (max-width: 767px) {
.shadow-effects{
font-size: 50px;
}
}
@media only screen and (max-width: 479px) {
.shadow-effects{
font-size: 34px;
}
}
</style>