CSS3 Tutorial: text-shadow effects

CSS3 texteffects

Browser support

Example 1: Text with a blur

The CSS

div#textBlur{ 
    padding:0 30px ; 
    border: 1px solid #666; 
    margin:30px; 
}
div#textBlur h4{ 
    font-family: 'VTCLettererProRegular'; 
    color: transparant; 
    font-size:5em; 
	text-shadow:0 0 20px rgba(255,0,0,0.7);
}
text shadow Example 2
Image 1. Blurred HTML text .

Check this example in your browser

Example 2: Text with background lightning

The CSS

div#textBgShadow{ 
    padding:0 30px ; 
    border: 1px solid #666; 
    margin:30px; 
}
div#textBgShadow h4{ 
    font-family: 'VTCLettererProRegular'; 
    color: black; 
    font-size:5em; 
	text-shadow:0 0 20px rgba(255,255,255,1);
}
text shadow Example 2
Image 2. HTML text with background lightning.

Check this example in your browser

Example3: Text reflection

The HTML

 
  <h4 class="reflected">I'am reflected!</h4>
 

The CSS

h4.reflected{ 
  position: relative;
  font-family: 'VTCLettererProRegular'; 
  color: white; 
  font-size:5em;
  letter-spacing:5px; 
  text-shadow:0 0 12px rgba(255,255,255,1);
  }
h4.reflected:after {
  content: "I'am reflected!";
  display: block;
  position: absolute;
  bottom: -.65em; /* adapt this value for your font */
  left: 0;
  right: 0;
  opacity: .2;
  color: white; 
 /* Flipping the text vertically */
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
}
text shadow Example 2
Image3 Reflected HTML text.

Check this example in your browser

Leave a comment