Does your website look outdated? No problem, with some changes to the CSS file and some other minor modifications your website will look as good as new.
I've created a list containing 9 easy-to-follow tips that can really make the difference.
With this new CSS3 available it's very easy to add shadows to the text. Adding a white 1px shadow really makes the text stand out and even makes it more readable.
This is the text without the shadow
This is the text with the shadow
The second text is simply wrapped inside a span that has this style attached:
text-shadow:-1px -1px 0px #FFD780,1px 1px 2px #59420F;
You can easily round corners by using the CSS3 "border-radius: X px;" , where X is the radius of the corner. This is great for buttons, form inputs, comment boxes,etc...
I call "spacers" that 1px lines used for separating website regions, buttons, articles, etc.
Instead of the simple 1px line you can make it look much better by using 2 lines. The upper line must be the same color as the background, but a little lighter. The lower line must be also the same color as the background, but darker.
Here's an example:
You can use CSS to add border and shadow to an image.
I usually use this CSS to add image border and padding:
border:1px solid #ccc;
If you have a website that has lots of text parapgraphs you can improve it by justify-aligning the text. Also, if the paragraphs have a colored background you may want to add padding.
Without padding and justify alignment
With padding and justify alignment
The CSS used:
Adding a simple, very subtle texture to a background or button really makes the difference.
It might not improve the "first impression" of your website, but will surely make your visitors think that this site really pays attention to the details.
Here's an image with textured (left) and untextured (right) backgrounds.
You can simply add this grainy texture (in Photoshop) by adding Filter->Noise->Add Noise :) .
Though this is not supported in IE it's still a very nice update for your website.
Making the color of a link change graduately instead of suddenly improves the user experience.
(Hover the divs below)
Also add the same code but replacing -webkit- with -o- for opera and -moz- for firefox.
Finally, a great way of making the user feel that the website is very interactive is to add hover effect on the buttons and also active effect (when the user clicks a button)
In my last post I've posted a CSS3 buttton class.
If there's anything unclear post a comment below. :)