Home arrow HTML arrow Page 2 - Engaging HTML and CSS3 Background Effects
HTML

Engaging HTML and CSS3 Background Effects


In this first part of a two-part tutorial, I develop a pair of examples to demonstrate how to use the “background” CSS3 property to create attractive background effects. We'll render these effects without relying on background images or dealing with the complexities of JavaScript.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
November 08, 2011
TABLE OF CONTENTS:
  1. · Engaging HTML and CSS3 Background Effects
  2. · Building a CSS3-based Background Effect

print this article
SEARCH DEVARTICLES

Engaging HTML and CSS3 Background Effects - Building a CSS3-based Background Effect
(Page 2 of 2 )

The process of creating a background effect using a horizontal-line pattern is quite meticulous, but not complex. CSS3 lets us render gradients by means of several “color stops,” or points where one color starts to fade into another one. Because of this, the entire rendering procedure is limited to defining a fixed background area and placing the stops at the proper places. It’s really as simple as that.

To see this in concrete code, take a look at the improved version of the previous web page. It uses the functionality of the “background” property to add the background effect to the earlier div: 

<!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>Cool backgrounds with CSS3</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
h1 {
    font-size: 3.6em;
    font-weight: bold;
    color: #808080;
}
/* Horizontal lines */
.lines {
     height: 300px;
     width: 300px;
     margin: 0 auto;
     background-color: #cb8705;
     background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #fca704), color-stop(.5, transparent), to(transparent));
     background-image: -moz-linear-gradient(#fca704 50%, transparent 50%, transparent);
     background-image: -o-linear-gradient(#fca704 50%, transparent 50%, transparent);
     background-image: linear-gradient(#fca704 50%, transparent 50%, transparent);
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#cb8705',endColorstr='#fca704');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#cb8705',endColorstr='#fca704')";
     background-size: 70px 30px;
     -webkit-background-size: 70px 30px;
     -moz-background-size: 70px 30px;
     o-background-size: 70px 30px;
     border-radius: 50px;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
     o-border-radius: 50px;
     box-shadow: 2px 1px 7px #808080;
     -moz-box-shadow: 2px 1px 7px #808080;
     -webkit-box-shadow: 2px 1px 7px #808080;
     filter: progid:DXImageTransform.Microsoft.Shadow(color='#808080', Direction=120, Strength=7);
     border: 1px solid #808080;
     text-indent: -9999px;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Cool backgrounds with CSS3 (horizontal lines)</h1>
    <div class="lines">This is a sample element</div>
    <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>

As you can see from the above code, the class assigned to the target div makes heavy use of the revamped abilities of the “background” shorthand to create a simple pattern made up of a few horizontal lines. This is achieved by generating a linear gradient with fixed dimensions (in this case, an area of 70px x 30px) which contains several color-stops. Naturally, it’s possible to tweak these values and produce a different pattern. But before you do that, make sure to test the example in its current incarnation. If all went well, you should see a result similar to the screen shot below.

That looks fairly attractive, right? Since the pattern was rendered without having to use a single background image, the output is quite nice. By the way, you may have noticed that I used the “filter” property. This is a proprietary implementation of Internet Explorer which, among other things, allows it to create gradients. In this case, it was employed to get a more “cross-browser” result. Unfortunately, “filter” will make your CSS code fail any type of standard validation, so bear this issue in mind if you’re planning to use the property in the future.

So, now that you understand this example, what's the next step? Well, I imagine you'd like to see how easy it is to generate a vertical-line pattern by changing only a few parameters of the example.

That’s exactly what I’ll be doing in the following section, so keep reading.

Rendering Vertical Lines

As I explained, it’s simple to create a brand new background pattern composed of vertical lines. All we need to do is change the dimensions of the background area and the direction of the gradient applied to the target HTML element.

If my explanation sounds confusing, take a look at the example below: 

<!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>Cool backgrounds with CSS3</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
h1 {
    font-size: 3.6em;
    font-weight: bold;
    color: #808080;
}
/* Vertical lines */
.lines {
     height: 300px;
     width: 300px;
     margin: 0 auto;
     background-color: #cb8705;
     background-image: -webkit-gradient(linear, 100% 0, 0 0 , color-stop(.5, #fca704), color-stop(.5, transparent), to(transparent));
     background-image: -moz-linear-gradient(0, transparent 50%, #fca704 50%);
     background-image: -o-linear-gradient(0, transparent 50%, #fca704 50%);
     background-image: linear-gradient(0, transparent 50%, #fca704 50%);
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#cb8705',endColorstr='#fca704');
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#cb8705',endColorstr='#fca704')";
     background-size: 30px 70px ;
     -webkit-background-size: 30px 70px ;
     -moz-background-size: 30px 70px ;
     o-background-size: 30px 70px ;
     border-radius: 50px;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
     o-border-radius: 50px;
     box-shadow: 2px 1px 7px #808080;
     -moz-box-shadow: 2px 1px 7px #808080;
     -webkit-box-shadow: 2px 1px 7px #808080;
     filter: progid:DXImageTransform.Microsoft.Shadow(color='#808080', Direction=120, Strength=7);
     border: 1px solid #808080;
     text-indent: -9999px;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Cool backgrounds with CSS3 (vertical lines)</h1>
    <div class="lines">This is a sample element</div>
    <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. Even though this new code sample looks pretty similar to the earlier one, it introduces a few subtle changes worth noting. First and foremost, the direction of the gradient applied to the target div has been set to 90 degrees; and second, the dimensions assigned to the element have been reversed. These modifications generate a completely different pattern, like the one depicted by the following image:

As the above screen capture shows, adding a pattern of horizontal lines to a given HTML element is a straightforward process. It can be customized at will. So fire up your own creativity and start creating your own background effects! 

Closing Remarks

In this first part of a two-part tutorial, I went through the development of a pair of approachable examples to demonstrate how to use the “background” CSS3 property in the creation of  some attractive background effects. In doing this, we didn't need to rely on a bunch of background images, or deal with the complexities of JavaScript. Naturally, rendering the effects is a process that requires patience and a pinch of trial-and-error tests. Keep this in mind if you plan to implement similar effects on your own web pages.

In the last chapter I’ll be teaching you how easy it is to modify the examples to use “background” to style the same target div with diagonal lines and even a square-like pattern.

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
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials