Cool HTML Effects – Easy to Do
HTML is a fantastic programming language for the web. It’s very simple to learn, yet has the ability to produce some really nice visual effects. I’m going to teach you one really nice effect using HTML, which will allow you to give your websites an extra layer of visual polish that will set them apart from the rest.
In this article we’re going to learn how to create a background with a colour fade, simply by using a simple trick involving a background image.
Firstly you’ll need to define a few things within the CSS of the page. Insert the code below into the CSS portion of the code.
body {
background-image: url(/);
background-repeat: repeat-x;
background-color: #b99450;
}
If you’re not sure, this portion of code should site just before the tag within your code.
Now you’ll need to create an image file called “”. This image should only be 1 pixel (1px) wide, and should be a colour which fades from solid through to transparent.
You’ll notice that the code specifies “background-repeat: repeat-x;”
This means that the files “” will be repeated only along the x-axis, or horizontally from left to right across the page. This will create the effect that there is a colour fading down the page, and it will scale 100% across the screen regardless of the size of the window. The benefit of making the image 1px wide is that it will be very fast to load.
The final part of the trick is “background-color: #b99450;”
This is the colour of the entire page which will sit beneath the background image pattern that you have just created. The end effect will be that it appears that a colour blends from the top down to a solid colour. The best part about that is that if you have a page where a lot of content flows down the page, it will have a nice even colour, and won’t create an ugly image repeat every time the page length doubles.
Experiment with some of your own designs and see what you like the best. You’ll be able to make some really nice colour schemes that compliment your designs nicely!
If you’re still unsure about how to create this background effect in your designs, or for any other questions, please feel free to contact me at Gold Coast Web Designer.
