Home arrow Style Sheets arrow Page 2 - 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 - Using the text-stroke property with H2 elements
(Page 2 of 2 )

Decorating the earlier H2 elements with an engaging stroke effect is as simple as adding some common borders to them. Take a look at the following code fragment. It uses the “text-stroke” property to provide these elements with a more appealing look:

<!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 (using a stroke of 2px)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font: 3.5em Arial, Helvetica, sans-serif;
    font-weight: bold;
}
/* text with stroke */
h2 {
    width: 600px;
    padding: 10px;
    background: #ffeaff;
    font-weight: bold;
    color: #ff80ff;
    font-size: 8em;
    -webkit-text-stroke: 2px #7d007d;  
}
#wrapper {
    width: 660px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Using the 'text-stroke' CSS3 property (using a stroke of 2px)</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>

From the above example, it’s clear to see that the logic driving the “text-stroke” property is a breeze to understand. In fact, the only things that must be specified are the size in pixels of the stroke that will be applied, along with its color. This is pretty similar to what you do with plain borders. The entire styling process is that simple.

In addition, you may have noted that the property uses the “-webkit” vendor prefix. The reason it does that is because, at this time, only web-kit based browsers offer support for “text-stroke.” If you test the earlier example using any browser that fit that category (Safari, Chrome, etc.), the target H2 elements should look like this:



That looks like it was created with Photoshop, right? The image shows the actual functionality of the “text-stroke” property, and its potential, as well. Speaking of functionality, how about tweaking the previous example and demonstrating how easy it is to create a different text stroke effect? That’s exactly what I plan to do in the following section, so keep reading. 

Altering the Stroke of  Styled Elements

As you saw in the previous section, adding an attractive text stroke effect to elements of a web page (in this case, a few H2 selectors) is a breeze. The "text-stroke" property is so versatile that it lets users generate different variations in a snap.

Want to see proof of this? Look at the following example. This time, it adds a stroke of 4px to the same H2 elements, and alters its foreground color:

<!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 (using a stroke of 4px)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font: 3.5em Arial, Helvetica, sans-serif;
    font-weight: bold;
}
/* text with stroke */
h2 {
    width: 600px;
    padding: 10px;
    background: #ffeadf;
    font-weight: bold;
    color: #ff915b;
    font-size: 8em;
    -webkit-text-stroke: 4px #882d00;  
}
#wrapper {
    width: 660px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Using the 'text-stroke' CSS3 property (using a stroke of 4px)</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>

There you have it. Now the target elements have been decorated with a dark orange stroke of 4px, pretty similar to the one shown by the following screen shot:


As the above image shows, producing different and appealing text effects with the “text-stroke” property is a straightforward process that is easy to master. Obviously, the property’s major drawback is its lack of support by some browser vendors. Therefore, if you’re planning to use it on your web pages, make sure to provide the target elements with the appropriate fallback options.

Final Thoughts

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

While the functionality offered by the property on its own is quite remarkable, the best results are achieved when it’s combined with its partner, “text-shadow.” In the next (and final) installment I’ll be setting up a couple of additional examples to show you how put these two properties to work side by side to create some appealing 3D text effects.

Don’t miss the final part! 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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