Background: Personalization and more...

Like most people, we like to personalize our own belongings to make it feel like "us". Something that will make it unique and distinguish it from the rest. What is the first thing you do to personalize your computer? Well, the first thing that most people and I tend to do is change the default wallpaper or background to personal picture or a picture that reflex us.

With personal home pages and social networking sites becoming so popular, everyone is jumping on the bandwagon. So is just changing the background on your page good enough to make it feel like you? Well, the answer is yes and no. If you just changing the background to a different image, it doesn't really speak much about you. But don't worry, with a bit of CSS, you can create multiple effects just by using the background.

One bad thing about web designing in the past was that everything we create has a boxy look, so web designers has gone to great lengths to create rounded-conrners. With CSS, rounded corners can be create by using rounded-corner images for the top heading and footer background. This method does the job but it was a painful because you will have to create the rounded-corner images to match the content and add nonsemantic markup to your code.



Another effect you can do using the background is to add the drop shadow effect. This method will need you to create a "drop shadow" image similar to the one below and using it as a background with its position set to "bottom right". Quite troublesome but it does the job.


Well, thanks to CSS3 you don't have to go through all that trouble just to create rounded-corners and drop shadows. The new "border-radius" property allows you to create rounded-corners just by setting the radius of the borders. But because it's still a new feature you will need to add add prefixes for browser-specific.
This can be done by adding " -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; " to the CSS. And for the "drop shadow" effect, you can use the "box-shadow" property.
This can be done by adding " box-shadow: 3px 3px 6px #666;" to the CSS.

The last effect I want to go over is the Opacity property which can give your design an extra dimension. This can be done by adding "opacity: 0.8;" to the CSS where "0.8 = 80% opacity.

Below are some screenshot from my current project using these effect. It's still unfinished and I'll be making many changing to it to make it more "pleasing to the eyes".



In this screenshot, you can see that I used a dark image for background and a lightbulb as the background for each menu selection to go with the "dark" theme.

Here is another screenshot of the bottom of the page:


In this screenshot, you can see the use of the rounded corners and the drop shadow effect at the bottom of the content box. The background of content box also has an opacity effect on it so the background image of the webpage will not get covered when you resize the browser window.

It's currently not that great of a design so as i learn more about CSS and continue to work on this, I will show you the new changes.


Reference: "CSS Mastery Advanced Web Standards Solutions Second Edition"