Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

5. Introduction to Cascading Style Sheet... > 5.8. (Optional: WebKit Only) Text St...

5.8. (Optional: WebKit Only) Text Stroke

The -webkit-text-stroke property is a nonstandard property for WebKit-based browsers that allows you to add an outline (text stroke) around text. Four of the seven browsers we use in this book are WebKit based—Safari and Chrome on the desktop and the mobile browsers in iOS and Android. Currently, the CSS3 specification is evolving and this property is not likely to appear as part of the standard in the short term. However, WebKit tends to be leading edge, so it’s possible that this feature could be added later.

Line 12 in Fig. 5.7 sets the color of the h1 text to LightCyan. We add a -webkit-text-stroke with two values (line 13)—the outline thickness (2px) and the color of the text stroke (black). We used the font-size 500% here so you could see the outline better. This nonstandard effect can be implemented for a one pixel stroke—with a bit more effort—using pure CSS3 as shown at http://css-tricks.com/7405-adding-stroke-to-web-text/.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint