Home arrow Style Sheets arrow CSS3 Properties: Text-Stroke
STYLE SHEETS

CSS3 Properties: Text-Stroke


In this introductory part of a two-part tutorial, I provide you with a quick and practical guide to using the brand new “text-stroke” CSS3 property. This property permits you to create eye-catching text effects in a snap.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
October 31, 2011
TABLE OF CONTENTS:
  1. · CSS3 Properties: Text-Stroke
  2. · Using the text-stroke property with H2 elements

print this article
SEARCH DEVARTICLES

CSS3 Properties: Text-Stroke
(Page 1 of 2 )

Most programmers, if asked which features of CSS3 they consider the most engaging, would probably reply with something like native shadows, rounded corners or transitions. They'd be right, too, as these capabilities have generated the most hype in the last few months. They're also decently supported by most modern browsers, with the usual exception of Internet Explorer.

It’s fair to note, however, that CSS3 comes bundled with other handy properties. These have been somewhat overlooked because they lack proper cross-browser implementation (at least at the time of this writing). A good example of this is “animation,” a powerful property that allows you to animate HTML elements in all sorts of clever ways, as if you were working directly with jQuery or any other popular JavaScript library. Nevertheless, “animation” isn’t the only contender that belongs to this dismissed group. The standard provides another property, called “text-stroke,” which can be used to add some engaging stroke effects to any text-based web page element.

While “text-stroke” unfortunately doesn’t enjoy the popularity of its cousins “text-shadow,” “box-shadow” and “border-radius” (to name only a few), the property is useful in a number of situations. For example, it can help you add a refreshing touch to the heading elements of your website.

What’s more, it's easy to learn how to use “text-stroke.” The best way to understand its functionality and how to put it into action is by example. Therefore, in this two-part tutorial I’ll be coding a few approachable examples to show you how easy it is to create some eye-catching text effects with the property.  

Getting started: Defining a Basic Web Page

As I just said, the best way to learn how to use the “text-stroke” CSS3 property is through some easy-to-follow code samples. Given that, the first step is to create a web page containing a few text-based elements. These elements can be decorated afterward with the pertinent property.

In this case, this sample web page looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the 'text-stroke' CSS3 property</title>
</head>
<body>
<div id="wrapper">
    <h1>Using the 'text-stroke' CSS3 property</h1>
    <h2>Sample text</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    <h2>Sample text</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
</body>
</html>

Definitely, the structure of the above (X)HTML document is so trivial that it doesn’t bear any further discussion. You should notice, however, that the document also includes some simple H2 elements. In their current state, they look rather unpolished and primitive, so my plan is to make them look a bit more engaging by adding a nice text stroke effect to them.

Not surprisingly, this cosmetic process will be achieved thanks to the functionality offered by the “text-stroke” property. To learn the fine details of the process, click on the link that appears below and read the lines to come.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials