We can create numerous font styles with CSS. Here I have used the CSS text-shadow property to create some cool CSS fonts. Using graphics for designing certain part of your website's font is not worth practicing. Because it may slow down your website load speed. So always try to use CSS for basic styling purposes.
Understanding text shadow property
The basic syntax for using the CSS text-shadow property is given below
text-shadow: h-shadow v-shadow blur color/none/initial/inherit;- h-shadow: it represents the horizontal offset of the text shadow .
- v-shadow: it represents the vertical offset of the text shadow.
- blur: it represents the blur weight.
- color: color of the shadow, supports hex, rgb, hsl etc.
- none: means no text shadow.
- initial: set the default color.
- inherit: takes the color of its parent element.
By using this property I have created five different text-shadow effects, about which I shall discuss in this tutorial. I shall give only the text-shadow property of these styles, however you may add more properties like font-family, shadow color, font-size, font-weight without affecting the text-shadow style.
text-shadow effect 1
This effect uses a text color followed by text-shadow with zero weighted blur. Since there is no blur the shadow will be of solid type.text-shadow: 1px 1px 0px #000000, 2px 2px 0px #0000FF, 3px 3px 0px #0000FF, 4px 4px 0px #0000FF;
text-shadow effect 2
Here at first applied a text color, followed by a text-shadow giving it a color which is a shade of text color. Finally we have chosen a brighter color with a weighted blur.
text-shadow: 0 0 3px #81BEF7, 0 0 4px #81BEF7, 0 0 5px #81BEF7, 0 0 20px #0080FF, 0 0 30px #0080FF, 0 0 50px #0080FF,0 0 60px #0080FF;
text-shadow effect 3
This effect is popularly known as neon effect. In this style we have used a white text color, followed by a white shadow and then a coloured shadow with weighted blur.text-shadow: 0 0 3px #FFF, 0 0 5px #FFF, 0 0 7px #FFF, 0 0 9px #FFF, 0 0 30px #B4045F, 0 0 40px #FA5882,0 0 50px #B4045F;
text-shadow effect 4
Here I have not used any text color, it takes the background color of its parent element. Since the parent element has a black background, the texts also appear as black, and finally given it a text-shadow.text-shadow: -1px -1px 0px #A4A4A4, 1px 1px 0px #A4A4A4,2px 2px 0px #A4A4A4,3px 3px 0px #A4A4A4;
text-shadow effect 5
This style is seemed to be rough, isn't it. But I have created it just to give you an idea about text-shadow. Here we used negative values, which resulted the top shadow.
text-shadow: 5px 5px 0px #FF8000, -6px -6px 0px #FF8000,7px 7px 0px #FF8000,-8px -8px 0px #FF8000;