Home arrow HTML arrow More Engaging CSS3 and HTML Background Effects

More Engaging CSS3 and HTML Background Effects

In this second part of a two-part tutorial on CSS3's "background" property, we'll take another look at its enhanced features. Before you know it, you'll be decorating your HTML pages with all sorts of lovely background effects, without resorting to Photoshop, JavaScript, or overly complicated code.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
November 15, 2011
  1. · More Engaging CSS3 and HTML Background Effects
  2. · Rendering Diagonal Lines

print this article

More Engaging CSS3 and HTML Background Effects
(Page 1 of 2 )

There’s no shortage of options for adding eye-catching background effects to elements on a web page; you can use a variety of resources, including images, plain background colors, and even  some “dynamic” approaches. This last option relies heavily on JavaScript to perform some DOM and styles manipulation behind the scenes to implement the desired effect(s).

With the release of CSS3, though, it’s fair to stress that one additional contender must be added to this already prolific landscape. As you may know, the new standard includes a revamped version of the “background” property. It will let you decorate your HTML elements with all sorts of gradients. This powerful additional ability can be used to render decorative patterns in a jiffy.

In the first part of this two-part tutorial I created a couple of examples that showed how to utilize the “background” property to decorate a web page container with some background patterns, composed of vertical and horizontal lines respectively. In both cases, the entire styling process required only that we define a pair of linear gradients, and add some color stops to them at the appropriate places.

As one might expect, it’s possible to use this approach to generate different kinds of patterns. In this last installment of the tutorial I’ll be setting up a few additional examples. These will demonstrate how to decorate an HTML element with diagonal lines and a square-like background pattern as well.

Having said that, jump ahead and start reading!

Complex Background Effects: Rendering a Pattern of Squares

While it may sound intimidating at first, the truth is that creating a background pattern made up of small squares is pretty straightforward. Essentially, the task is reduced to first assigning a square background area to the target HTML element, and then creating a linear gradient within the pertinent area.

Here is the CSS code that accomplishes this trick: 

<!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">
<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;
/* squares */
.squares {
     height: 300px;
     width: 300px;
     margin: 0 auto;
     background-color: #cb8705;
     background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(252, 203, 7, .5)), color-stop(.5, transparent),
                        to(transparent)),-webkit-gradient(linear, 100% 0, 0 0, color-stop(.5, rgba(252, 203, 7, .5)), color-stop(.5,                              transparent), to(transparent));
     background-image: -moz-linear-gradient(0, rgba(252, 203, 7, .5) 50%, transparent 50%),-moz-linear-gradient(rgba(252, 203, 7, .5) 50%,                        transparent 50%);
     background-image: -o-linear-gradient(0, rgba(252, 203, 7, .5) 50%, transparent 50%),-moz-linear-gradient(rgba(252, 203, 7, .5) 50%,                          transparent 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: 50px 50px;
     -webkit-background-size: 50px 50px ;
     -moz-background-size: 50px 50px ;
     o-background-size: 50px 50px ;
     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;
<div id="wrapper">
    <h1>Cool backgrounds with CSS3 (squares)</h1>
    <div class="squares">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>

As the above code fragment shows, the linear gradient has been placed inside a background area of 50px x 50px. You can easily change these dimensions to suit more specific needs, so feel free to do so if you want to. In any case, if you give the previous example a try using your browser, here’s how the target div should look:

Admittedly, the above squared pattern isn’t the most sophisticated one that you’ll ever see; even so, it shows you how the creative (and meticulous, by the way) usage of the “background” CSS property allows you to render all sorts of appealing background effects, without having to use a single image.

But, if you think that we're finished, think again! In the next section I’ll show you how to add to the same target div another appealing background pattern, comprised of diagonal lines.

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

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials