Bootstrap text shadow effects with pure CSS: 2 demos
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:
|
1 |
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:
See online demo and code
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.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; } } |
The markup using the Bootstrap:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container"> <div class="row"> <div class="col-md-8"> <span class="shadow-effects">TEXT-SHADOW</span> </div> </div> </div> |
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.
See online demo and code
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<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> |
Get the complete code from the demo page.