Home arrow Style Sheets arrow CSS3 Properties: Altering Strokes and 3D Effects
STYLE SHEETS

CSS3 Properties: Altering Strokes and 3D Effects


If you think the only way to add appealing stroke effects to your web page elements is via Photoshop, think again. CSS3 includes a brand new property, called “text-stroke,” which permits you to render this popular effect without the complexities of an image editing application. Creating eye-catching text strokes with the property is a snap; you simply specify the size of the stroke in pixels along with its foreground color. This is all you need to do.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
November 01, 2011
TABLE OF CONTENTS:
  1. · CSS3 Properties: Altering Strokes and 3D Effects
  2. · Using the text-shadow property

print this article
SEARCH DEVARTICLES

CSS3 Properties: Altering Strokes and 3D Effects
(Page 1 of 2 )

Unfortunately, the "text-stroke" property is only supported (at least at this moment) by webkit-based browsers, like Safari and Chrome. This shouldn’t prevent you, however, from giving the property a try and seeing what it can do. With that idea in mind, in the first part of this two-part tutorial, I developed some examples which showed you how to use the property to decorate the H2 elements of a sample (X)HTML document with different types of stroke effects. The entire styling process was limited to specifying distinct stroke sizes and varying the corresponding foreground colors.

If you missed the first part - or need a refresher - you can view it here:

http://www.devarticles.com/c/a/Web-Style-Sheets/CSS3-Properties-TextStroke/


It’s valid to point out, though, that the existing functionality of “text-stroke” can be boosted when used side by side with its partner, “text-shadow.” This simple combination allows you to create native strokes, and even realistic 3D effects that will be rendered consistently across most modern browsers (except for Internet Explorer, of course). Thus, in this final post, I’ll be demonstrating how easy it is to render these effects on a web page by using these two properties together. 

The “text-stroke” Property: Creating a Thicker Stroke

As I explained, polishing the visual presentation of any text-based HTML element with the “text-stroke” property is straightforward. Just in case you missed the previous installment of this tutorial, where I explained how to do this in depth, below I coded a basic example. It adds a stroke of 6px to the H2 elements of a trivial web page. Take a look at it:

<!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 6px)</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: #daf1fe;
    font-weight: bold;
    color: #39b7fb;
    font-size: 8em;
    -webkit-text-stroke: 6px #0484c8;  
}
#wrapper {
    width: 660px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Using the 'text-stroke' CSS3 property (stroke of 6px)</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 previous code sample, it’s clear to see that using the “text-stroke” property is a breeze. The only arguments that it requires to work correctly are the size of the stroke in pixels that will be applied to the target element(s), and its color. In the above example, the values assigned to the arguments are 6px and a dark blue (#0484c8). When rendered on any webkit-based browser, each H2 element should look like this:



As this image shows, the results yielded by the property are more than acceptable, especially since the stroke effect was generated natively. Even so, I have to admit that "text-stroke" is a mixed blessing, due to its currently limited support. So, the question is: is it feasible to create this kind of text with a different, more cross-browser approach? Well, in fact it is!

In the next section I’ll be modifying the earlier example to make use of the “text-shadow” property to add a sleek stroke effect to the same H2 elements.

To learn how this will be done, click on the link that appears below and keep reading. 


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