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

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
TABLE OF CONTENTS:
  1. · More Engaging CSS3 and HTML Background Effects
  2. · Rendering Diagonal Lines

print this article
SEARCH DEVARTICLES

More Engaging CSS3 and HTML Background Effects - Rendering Diagonal Lines
(Page 2 of 2 )

In reality, creating a background pattern composed of diagonal lines isn’t very different from rendering one with horizontal or vertical lines. The only additional thing you must specify is the angle at which the pertinent lines will be displayed, and nothing else.

Again, the most effective way to grasp the underlying logic of this process is by studying an example. Given that, I suggest you take a look at the following code; it's pretty intuitive. 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>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;
}
/* Diagonal lines */
.lines {
     height: 300px;
     width: 300px;
     margin: 0 auto;
     background-color: #cb8705;
     background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, from(transparent), color-stop(0.15, transparent),
                        color-stop(0.15, rgba(252, 203, 7, .5)), color-stop(0.50, rgba(252, 203, 7, .5)),
                        color-stop(0.50, transparent), color-stop(0.65, transparent),
                        color-stop(0.65, rgba(252, 203, 7, .5)), to(rgba(252, 203, 7, .5)));                  
     background-image: -moz-repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(252, 203, 7,.5) 35px,
                        rgba(252, 203, 7,.5) 70px);
     background-image: -o-repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(252, 203, 7,.5) 35px,
                        rgba(252, 203, 7,.5) 70px);
     background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px,
                        rgba(252, 203, 7,.5) 70px);              
     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: 99px 99px;
     -webkit-background-size: 99px 99px;
     -moz-background-size: 99px 99px;
     o-background-size: 99px 99px;
     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 (diagonal 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 sample, the dimensions assigned to the target element's background area are 99px x 99px. With this area properly set, the diagonal lines are created by specifying an angle of 45 degrees for the linear gradient, along with a couple of color stops.

If this explanation sounds somewhat confusing to you, check the image below. It shows you the output that the example produces:

That looks pretty attractive, doesn’t it? However, by far the most appealing facet of the example is that the pattern has been rendered by means of a few linear gradients. It uses not even a single background image (a big plus for people like me with rather limited graphic design skills).

Naturally, it’s feasible to use the “background” property in more creative ways and generate a bunch of different background effects, not only the ones that you just saw. So, if you feel adventurous and want to face this challenge on your own, there’s no better time than now to start tweaking the property and get the most out of it.  

Closing Remarks

Nothing lasts forever, and this tutorial certainly isn’t the exception. You've learned how to exploit the functionality offered by the “background” CSS property (or its CSS3 enhanced version, to be more exact) to create a variety of background patterns: horizontal, vertical and diagonal lines, and even tiled squares.

To sum up: if you’re looking for an approach that lets you give your web page elements a refreshing look without having to open Photoshop even once, then what you learned in this two-part tutorial might fit the bill quite nicely.

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