CSS3 Tutorial: text-stroke

CSS3 texteffects

Browser support

Example1: Text with a stroke

The HTML

<div id="textBlur" >
<h4>Like my shadows?</h4>
</div>

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#textStroke{ 
    padding:0 30px ; 
    border: 1px solid #666; 
    margin:30px; 
}
div#textStroke h4{ 
    font-family: 'VTCLettererProRegular'; 
    color: #337fb9; 
    font-size:5em; 
    -webkit-text-stroke-width:2px;
    -webkit-text-stroke-color:black;
    -webkit-text-fill-color:#337fb9;
}
text shadow Example 1
Image 1. HTML text with a stroke

Check this example in your browser

Leave a comment