Graduated Backgrounds - Web Dev. - Neils Resource Web| Summary of Content |
| A gradient background provides a colourful
alternative background for a web page tables or cells. Just requires the
addition of a single tag. The real secret is in the colours you choose to
start and end the fill. The more limited the colour range the more subtle the
gradient especially over large areas. See the
Web Colours Page to choose
your own. Some of the examples here use the 'gradientType=0'
which defines a top / down gradient. Otherwise you could set it to '1' for a
left / right gradient, but this could make complimentary text colouring
difficult (unless you adopt a column format as in
example 6).
One set back here is that you won't get HTML / XHTML validation. The 'cleanest' way for a gradient background is to develop it in Photoshop or Paintshop Pro and save as .gif / jpeg file, then using the result as a background image. Make sure it is saved at at least 256 colours for a smooth transition. The only problem with this solution is scalability. 08/2005 Hold everything! Why am I bothering. I mentioned using using a graphics package to produce a 'cleaner', cross browser compatible gradient, but it would involve a lot of messing about. So what do I find....GRSITES.COM have now added a gradient image maker on their site! Just pick your colours, direction of flow etc.. and hey presto, a gradient background as a jpeg file is yours for downloading. A bunch of blue/grey gradient jpegs are located at the bottom of this page. |
| Site / Page Link | Description of linked Site / Page |
| ● Transitions / Filters | |
| Msdn.microsoft | Microsoft Transition / Filter sampler. With script generation of results. |
| ● Reference & Tutorials | |
| Msdn.microsoft | Visual Filters & Transitions Reference |
| Loriswebs.com | Gradient Background in Photoshop |
| Webreference.com | Gradients Overview + Photoshop, Paintshop & Fireworks tutorials |
| Esgn.com | Choosing Web Colours for your Site |
| Graphic-design | A nice site which covers complimentary colours |
| Graphic Design.com | Perfect! A complimentary colours finder and more.... (Thanks Fred Showker) |
| Grsites.com | This Site has it all, and the tools to manipulate the colours, textures and sizes. New Gradient maker. |
| Geocities.com | Plain Backgrounds for web pages |
| A double mouse click anywhere on the page (except when over hyperlinks) will take you back to the top. |
| add a Gradient Background |
| You can use the style tag to create a gradient background effect within your web page. This effect
can be used for your entire web page background, or within your table
cells. The filter must be applied to an element that has width or height
measurements. For example an image, table, table cell. You cannot, for
example apply it directly to the <p>, H1, <b>. The GradientType can equal '0' for top to bottom fill or '1' for left to right fill. |
| To use the gradient effect as your web page background, use the following BODY tag: |
| <body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"> |
| To use the gradient effect within your tables, use the following code within your table tag: |
| style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#000080', startColorstr='#FFFFFF', gradientType='0');" |
| Although you can edit the gradient colours indicated in red, keep in mind, in order for the effect to display properly, you must use a light colour and a darker colour. Don't forget the text colour may need changing to maintain contrast as this text shows. |
|
startColorstr='#FFFFFF endColorstr='#000080' gradientType=0 |
|
startColorstr='#FFFFFF endColorstr='#000080'(no table borders) |
|
startColorstr='#FFFFFF endColorstr='#33CC00' gradientType=1 (no table borders) |
|
startColorstr='#FFFFFF endColorstr='#FFD700' gradientType=1 (no table borders) |
|
This is a borderless two row table with the start and end colours of the second row reversed. |
|
This gives a graduation in both directions |
|
This is a multi row table with the start and end colours of the gradient in the last row reversed. |
|
Adding a third or more rows between the two graduated rows with solid matching background gives an area of solid colour for text use. |
|
Be careful though as you can end up with a convex illusion at the edges of the table. |
|
Note that the gradient effect is smoother the greater the area it spans |
|
This is basically the same as the above example except that the 'gradientType' has been set to 1 ( for a left / right hand gradient), the background is navy (#000080) and table borders are removed for a blend to the white page background. |
|
A ready made .jpeg gradient, note its rather weak over small distances despite using the same colours as above. Its worth bearing this in mind when choosing your start and finish colours. |
|
A ready made .jpeg gradient, note its rather weak over small distances |
|
A ready made .jpeg gradient, note its rather weak over small distances |
|
Grey/Blue 'Jpeg' Gradients. The higher gradients are more effective over a greater drop. | |||||||||||||||||||
| 50 | 75 | 100 | 125 | 150 | 175 | 200 | 250 | 275 | 300 | 350 | 400 | 450 | 500 | 750 | 1000 | 1250 | 1500 | ||
Hyperlink titles have been abbreviated, (right click on the link and select properties for the full URL)
Double mouse click anywhere on the page to take you back to the top (except when over the links)
Last Update: 05/06/2007 - Design - Pages Background Gradient Filter - Neils Resource Web