Today summed up the text effect Text-shadow, if used well it can make a variety of different effects, is I made several effects.
What, it looks good, the following code.
- /* CSS */
- P{
- Width:300px;
- Margin:0 auto;
- Background:#e9e9e9;
- Padding:30px 0;
- Font-size:30px;
- Font-family:Arial, Helvetica, sans-serif;
- Font-weight:bold;
- Text-align:center;
- }
- . A1{
- Color:#fff;
- Text-shadow:0 0 5px #99FFFF,
- 0 0 15px #99FFFF,
- 0 0 25px #99FFFF;
- }
- . A2{
- Text-shadow:0 0 5px #30C;
- Color:transparent;
- }
- . A3{
- Text-shadow:-1px -1px 0 #fff, 1px 1px 0 #000;
- }
- . A4{
- Color:#fff;
- Text-shadow:1px 0px 0 #60F,
- 0px 1px 0 #60F,
- -1px 0px 0 #60F,
- 0px -1px 0 #60F;
- }
- . a5{
- Color:#fff;
- Text-shadow:0px 1px 0 #000,
- 0px 2px 0 #333,
- 0px 3px 0 #060606,
- 0px 4px 0 #020202,
- 0px 5px 0 #252525,
- 0px 6px 1px Rgba (0,0 ,0,0.5
- 0px 5px 4px Rgba (0,0 ,0,0.7
- 0px 2px 6px rgba(0,0,0,0.6);
- }
- <!--html --
- <div class="main">
- <p class="A1"> Glow </P>
- <p class="A2"> Blur </P>
- <p class="A3"> Emboss </P>
- <p class="A4"> Stroke </P>
- <p class="A5"> Stereoscopic </P>
- </div>
Text Effects Text-shadow Html+css