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

Using the “text-shadow” property as a cross-browser replacement (at least to some extent) for its partner “text-stroke” is simple. If you only need to add a slim stroke to some web page elements and nothing else, "text-shadow" can perform pretty efficiently. .

Of course, the best way to demonstrate this is with some functional code, right? Below I created a web page similar to the one in the previous section. This time, it takes advantage of the functionality provided by “text-shadow” to decorate its H2 elements with a stylish stroke.

Here’s the code for this sample page:  

<!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-shadow' CSS3 property (creating a stroke of 1px)</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 text-shadow */
h2 {
    width: 600px;
    padding: 10px;
    background: #e9f3e2;
    font-weight: bold;
    color: #8dc473;
    font-size: 8em;
    text-shadow: -1px -1px 0 #4d7d35, 1px -1px 0 #4d7d35, -1px 1px 0 #4d7d35, 1px 1px 0 #4d7d35;
}
#wrapper {
    width: 660px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Using the 'text-shadow' CSS3 property (creating a stroke of 1px)</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>

While at first sight, it seems that the above code sample simply drops a shadow on the target H2 headers, this is a misleading impression. If you look more closely at the example, you’ll see that the amount of blur assigned to the “text-shadow” property is 0, which renders a “solid” shadow that resembles a stroke effect.

Moreover, if you try to view the web page using a browser that understands the “text-shadow” property, you should be confronted with an iamge similar to the one below.



That looks pretty engaging, doesn’t it? Contrary to what one might think, it’s possible to use the “text-shadow” property in a less traditional fashion and add some interesting stroke effects to the heading elements of a web page. What’s more, when combined with the functionality of the “text-stroke” property, the logic driving the earlier approach can be taken to the next level to generate pretty realistic 3D text.

Want to learn the fine details of this process? Then keep reading.  

Taking Advantage of Extrusion: Creating a 3D Text Effect

It's really simple to combine the functionality of the “text-stroke” and “text-shadow” properties and generate eye-catching 3D text effects without having to deal with a bunch of heavy background images. The underlying logic of this method is based on the power of extrusion, a technique internally used by most image editing programs available.

It's time to show how to implement this approach in a concrete use case. Pay attention to the following example, which shows how to put the pertinent properties to work hand in hand to decorate the same H2 elements shown previously with a nice 3D effect. Check it out:   

<!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>Combining the 'text-shadow' and 'text-stroke' CSS3 properties</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;
}
/* 3D text */
h2 {
    width: 600px;
    padding: 10px;
    background: #FFD7D7;
    font-weight: bold;
    color: #FF0909;
    font-size: 8em;
    -webkit-text-stroke: 1px #970000;
    text-shadow: -1px -1px 0 #970000, -1px 1px 0 #970000, 1px -1px 0 #970000, 7px 5px 0 #000, -2px -2px 0 #000, -2px 2px 0 #000,
                  2px -2px 0 #000, 9px 6px 0 #000;
}
#wrapper {
    width: 660px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Combining the 'text-shadow' and 'text-stroke' CSS3 properties</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>

Once the “text-stroke” property is used to add a stroke of 1px to the text of the target H2 elements, the functionality of “text-shadow” comes into play, this time to render the 3D effect previously mentioned. The entire effect is created by adding a set of solid shadows in increments. These shadows are strategically positioned around the elements, which produces a result pretty similar to the one depicted by the following screen capture:  



Mission accomplished. Now do you see how easy it is to manage the “text-stroke” and “text-shadow” properties and render pretty realistic 3D text effects? I guess you do. Arm yourself with the code samples developed in this series and start using the properties in many other creative ways. The possibilities are numerous.

Final Thoughts

In this two-piece tutorial, I provided you with a quick introduction to using the “text-stroke” CSS3 property. As you saw in the examples, the logic that stands behind the property is not complicated. You shouldn't have much trouble utilizing it on your own web pages, especially if you want to add a stylish touch without relying upon background images.

Again, keep in mind that the property still doesn’t enjoy full support by most browser vendors, so be cautious when using it, and be sure to provide the corresponding fallback options.

See you in the next web design tutorial!


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