CSS3 Tutorial: text shadow

CSS3 textshadow

Using the next CSS3 rules, we can add shadows and highlights to real (HTML) text. In addition we can create so called ‘drop shadow ‘ as well as inner shadow, outer- and inner glow.

text-shadow

    Syntax: none | [<shadow>,]* <shadow> 
                     where <shadow> is: [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]
    
    /* Example
    <color> <offset-x> <offset-y> <blur-radius>*/
    text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;
    
    /*inner and outer shadow (2 shadows with different colors)
     <color> <offset-x> <offset-y> <blur-radius>, 
    <color> <offset-x> <offset-y> <blur-radius>*/
    text-shadow:
    rgba(0, 73, 127, 1.0) -1px -1px 0, 
    rgba(255, 255, 255, 0.1) 1px 1px 0; 
    
    /*3 shadows with different colors (in second notation)*/
    text-shadow: 
    1px 1px 2px black, 
    0 0 1em blue, 
    0 0 0.2em blue;
    

Browser support

Example1: Text with shadow

The HTML code

    <!DOCTYPE html>
      <html>
      <head>
      <title>Text schaduw met CSS3 Example1</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
      </head>
      <body>
      <div id="text-shadow_test1" >
      <h4>Like my shadow?</h4>
      </div>
      </body>
    </html>
    

The CSS

     /* Generated by Font Squirrel (http://www.fontsquirrel.com)*/
    @font-face {
      font-family: 'NobileRegular', Arial, Verdana;
      src: url('../fonts/nobile/regular/nobile-webfont.eot');
      src: url('../fonts/nobile/regular/nobile-webfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/nobile/regular/nobile-webfont.woff') format('woff'),
      url('../fonts/nobile/regular/nobile-webfont.ttf') format('truetype'),
      url('../fonts/nobile/regular/nobile-webfont.svg#NobileRegular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    div#text-shadow_test1{  
        width:500px;  
        padding:0 20px 30px 40px;  
        border: 1px solid #666;  
        margin-top:30px;  
    }
      
    div#text-shadow_test1 h4{  
        font-family: "NobileRegular";  
        color: #337fb9;  
        font-size:50px;  
        /*text-shadow: rgba(red, green,blue, opacity) offsetRight offsetBottom blur; */  
        text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;  
    }
    
    
    
text shadow Example 1
Image 1. Real (HTML) text with shadow.

Check this example in your browser

Example 2: Text with drop shadow

The HTML code

     <!DOCTYPE html>
      <html>
      <head>
      <title>Text schaduw met CSS3 Example2</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
      </head>
      <body>
      <div id="text-shadow_test2" >
      <h4>Like my shadows?</h4>
      </div>
      </body>
      </html>
    

The CSS

     /* Generated by Font Squirrel (http://www.fontsquirrel.com) */
    @font-face {
      font-family: 'VTCLettererProRegular';
      src: url('../fonts/VTC_letterer_pro-webfont/VTC_letterer_pro-webfont.eot');
      src: url('../fonts/VTC_letterer_pro-webfont/VTC_letterer_pro-webfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/VTC_letterer_pro-webfont/VTC_letterer_pro-webfont.woff') format('woff'),
      url('../fonts/VTC_letterer_pro-webfont/VTC_letterer_pro-webfont.ttf') format('truetype'),
      url('../fonts/VTC_letterer_pro-webfont/VTC_letterer_pro-webfont.svg#VTCLettererProRegular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    div#text-shadow_test2 {
      width:500px;
      padding:0 20px 30px 40px;
      border: 1px solid #666;
      margin-top:30px;
      background-color: #4488bb;
    }
    
    div#text-shadow_test2 h4 {
      font-family: "VTCLettererProRegular";
      color: #337fb9;
      font-size:70px;
      text-shadow: rgba(0, 73, 127, 1.0) -1px -1px 0,
      rgba(255, 255, 255, 0.1) 1px 1px 0; 
    }
    
text shadow Example 2
Image 2. Real (HTML) text with shadow.

Check this example in your browser

Leave a comment