DELETE ME

Rendering CSS shadows: altering shadow offsetsalexthecoder

Although the creation of shadowed elements on web pages is a fairly simple process that can be tackled by having minimal skills, it demands in most cases the use of background images or eventually the implementation of an additional JavaScript layer capable of adding shadows to the target selectors on the fly.

While it’s fair to admit that these approaches in any of its forms will function properly in most modern browsers, many web designers are reluctant to use them due to the extra work that they require. However, not all is so disappointing and arid when it comes to embedding shaded elements into an (X)HTML document, as the CSS3 specification includes two handy properties, called “text-shadow” and “box-shadow” which permit to perform this task without having to appeal to background graphics or use a single pinch of JavaScript.

What’s more, if you already had the chance to read the chapter of the series that precedes this one, it’s quite probable that at this time you have a clearer idea on how to use the mentioned “text-shadow” property to add some stylish shadows to the text wrapped by a web page element. And I say this because in the course of that installment I explained how to apply this effect to some H2 headers included in a trivial (X)HTML document.

Of course, not all browser vendors have added support to the pertaining properties (being Microsoft not surprisingly the most notorious case), something that hopefully will happen in the near future. This fact shouldn’t be, for obvious reasons, an obstacle for exploring the functionality that these whole new properties bring to the table. In line with this concept, in this second episode of the series I’m going to develop another approachable example, which will demonstrate how easy is to render different types of shadows by altering only the vertical and horizontal offsets of the “text-shadow” property.

Eager to see how this will be accomplished in a few simple steps? Then jump forward and start reading!

Adding a shadow to the text of a web page element: a brief review of some previous examples

Taking into account the possibility that you still haven’t read the introductory chapter of this series, where I explained with a couple of examples how to use the “text-shadow” CSS3 property to decorate the H2 elements of a sample web page, below I reintroduced the source code corresponding to these examples, so you can catch quickly how they work.

First off, here’s the example that employs the property to add an “inset-like” effect to the mentioned elements. Take a peek 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>Example using the ‘text-shadow’ CSS3 property (inset-like text)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#header, #content, #footer {
    padding: 20px;
}
.shadowed_text {
    padding: 20px;
    color: #969696;
    background: #e0e0e0;
    text-shadow: 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Example using the ‘text-shadow’ CSS3 property</h1>
        <h2 class="shadowed_text">Header section</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>
    <div id="content">
        <h2 class="shadowed_text">Main content section</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>
    <div id="footer">
        <h2 class="shadowed_text">Footer section</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>
</div>
</body>
</html>

From the previous example, it’s clear to see that the utilization of the “text-shadow” property is really a simplistic process that doesn’t differ too much from using other older CSS properties. Considering that the first two arguments taken by the property assign the top and left offsets of the shadow while the remaining ones control its blur and color respectively, creating an “inset” effect is reduced to dropping a white shadow shifted 1px to the right and bottom of the target element. Precisely, the result of this process is depicted by the following image:

Not too bad huh? Taking into account that rendering this effect only required to code only a few CSS styles, the output is more than acceptable. However, the flexibility offered by “text-shadow” permits to create different shading effects with minor hassles. If you’re still skeptical about my affirmation, simply look at the following example which adds a black shadow to the selected H2 elements while the wrapped text this time is white:

<!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>Example using the ‘text-shadow’ CSS3 property (altering the colors of text and shadow)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#header, #content, #footer {
    padding: 20px;
}
.shadowed_text {
    padding: 20px;
    color: #fff;
    background: #e0e0e0;
    text-shadow: 1px 1px 1px #000;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Example using the ‘text-shadow’ CSS3 property</h1>
        <h2 class="shadowed_text">Header section</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>
    <div id="content">
        <h2 class="shadowed_text">Main content section</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>
    <div id="footer">
        <h2 class="shadowed_text">Footer section</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>
</div>
</body>
</html>

As you’ll agree with me, the above example is pretty similar to the one shown previously. Therefore, move on and look at the below screen capture, which shows how the target H2 headers look after adding to them this new shading effect:

There you have it. A subtle change in the colors assigned to the text of the HTML elements and the corresponding shadows can yield quite impressive results, indeed. But hold one a second! What if you need to highlight even more the wrapped text? Well, in a case like this, the task can be easily accomplished by assigning higher values to the shadow’s left and top offsets.

That’s exactly the use case that I plan to discuss in the coming segment. Thus to get there, now click on the following link and keep reading. 

Creating a subtle variation of the earlier examples: tweaking the shadow’s vertical and horizontal offsets

Certainly, there’re many ways to make a heading element stand out from the background of its containing web page. However, one approach that works remarkable well in most cases consists of adding to it a dark shadow slightly shifted away from the wrapped text.

Considering that the “text-shadow” property makes this process a no-brainer one, below I redefined the “shadowed_text” CSS class that you saw in the previous section, which this time places displaces the shadow 2px to the right and bottom of the target element. The revamped version of this class now looks like this:  

.shadowed_text {
    padding: 20px;
    color: #fff;
    background: #e0e0e0;
    text-shadow: 2px 2px 1px #000;
}

Definitively, the way that the above CSS class has been rewritten is pretty self-explanatory, as all that it does is to use the “text-shadow” property to drop a black shadow, which is shifted 2px to the right and down from the text of the target selector.

While the definition of this class admittedly can be caught in the flicker of an eye, it’s necessary to attach its styles to the markup of the web page containing the sample H2 elements, so you can see the results that it produces. That’s exactly what I’m going to do in the following section, so jump forward and read the lines to come.
   
Rendering shadowed H2 elements in a snap: including the previous CSS styles into a web page 

If you’re like me, then it’s probable that at this time you feel eager and want to see the appearance how the previous H2 elements after adding to them this new shading effect. To make your anxiety disappear quickly, look at the following web page which assigns the “shadowed_text” CSS class just defined to these elements:

<!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>Example using the ‘text-shadow’ CSS3 property (altering the left and top offsets)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#header, #content, #footer {
    padding: 20px;
}
.shadowed_text {
    padding: 20px;
    color: #fff;
    background: #e0e0e0;
    text-shadow: 2px 2px 1px #000;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Example using the ‘text-shadow’ CSS3 property</h1>
        <h2 class="shadowed_text">Header section</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>
    <div id="content">
        <h2 class="shadowed_text">Main content section</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>
    <div id="footer">
        <h2 class="shadowed_text">Footer section</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>
</div>
</body>
</html>
 
As the above code sample illustrates, effectively each H2 header included into the main sections of the previous web page has been styled with the amended version of the “shadowed_text” class. When tested on any browser that supports the “text-shadow” property, this page generates the following output:

That’s pretty good, right? Even when this example is somewhat contrived, it shows in a nutshell how easy is to create different shading effects by altering either individually or at the same time, the parameters of the “text-shadow” property. In this specific case, I deliberately modified the top and left offsets of the dropped shadow; it’s feasible, however, to produce interesting variations by changing the values assigned to its blur. Considering that this topic will be discussed in detail in the next tutorial, for the moment feel free to stop by the article’s conclusions.

Final thoughts

In this second installment of the series, I demonstrated through another basic example how easy is to render a different shading effect by simply modifying the parameters of the “text-shadow” property that control the shadow’s top and left offsets. Of course, there’s plenty of room to experiment here, as it’s also possible to play around with the argument that determines the amount of blur applied to the shadow in question.

Given this interesting possibility, in the forthcoming tutorial I’m going to show with some functional code, how to create a blurred shadow by tweaking the aforementioned parameter.

Don’t miss the next part!  

 

[gp-comments width="770" linklove="off" ]

chat sex hikayeleri Ensest hikaye