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