[TIPS] Tips that will make your website look and feel better

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.

1) Textshadow
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;

2) Rounded corders
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...
    Square:

    Round:

3) Spacers
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:

1px, white:

2px, dual:

4) Image background
You can use CSS to add border and shadow to an image.

I usually use this CSS to add image border and padding:
 background-color:#f3f3f3;
padding:10px;
border-radius: 10px;
border:1px solid #ccc;

5+6) Padding and justify alignment
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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur tincidunt lectus, ut vestibulum nisi imperdiet ut. Pellentesque id lectus purus, nec pharetra risus. Mauris sed lectus ligula, quis hendrerit arcu. Phasellus eros nunc, porta in fermentum in, pellentesque eget leo. Suspendisse ultrices faucibus erat, vel volutpat sapien rutrum ut. Maecenas convallis rhoncus libero sit amet lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dictum dignissim metus, et ultricies dui laoreet a. Donec sed eros massa.

With padding and justify alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur tincidunt lectus, ut vestibulum nisi imperdiet ut. Pellentesque id lectus purus, nec pharetra risus. Mauris sed lectus ligula, quis hendrerit arcu. Phasellus eros nunc, porta in fermentum in, pellentesque eget leo. Suspendisse ultrices faucibus erat, vel volutpat sapien rutrum ut. Maecenas convallis rhoncus libero sit amet lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dictum dignissim metus, et ultricies dui laoreet a. Donec sed eros massa.

The CSS used:
padding: 10px;
text-align: justify;

7) Use textures
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 :) .

8) Smooth transition on link hover
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)

No transition:

 

With transition:

 

CSS:
-webkit-transition-property: color;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
Also add the same code but replacing -webkit- with -o- for opera and -moz- for firefox.

9) Button hover & active class

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