10 CSS tricks that make website looks cool instantly!

1. Image gallery with hover box preview

Isn’t it nice to allow your users to preview thumbnail images by just rolling their mouse over? The Hoverbox Tutorial offers free coding sample and detail guides on how to do just that. If you wish to build a fast loading image gallery then this is a must-read.

See how hoverbox image gallery can be made.

2. Style A-to-Z index like BBC

It’s tedious to deal with index files – especially when you have a lot of glossary terms. Christian Watson offers a wonderful way to organize and style your index files using simple CSS tricks.

Learn how to make your A-to-Z index file looks cool.

3. Alert Box

Creating an alert box is certainly good way to attract users’ eyeballs and make sure the users pay enough attention to the important content. Bruce shares his idea how this can be done nicely with some neat CSS code.

Learn how to create an alert message in CSS.

4. CSS Sliding Sprite Window

CSS allows you to show different images in different states of a link – Rogie’s tutorial shows how ‘dynamic’ a link can be with a little work on CSS. It’s not something new but I’m certain that it’s a good read for newbies.

Read tutorial on CSS sliding sprite window.

5. Gradient text effect using CSS purely

Stop rendering every single heading text on your website using Photoshop. There’s better way to get the job done – CSS! Not many webmasters are aware that text can be rendered using CSS. If you are one of them, read Nick La’s tutorial on how to create a gradient text effect easily with pure CSS.

Learn how to create gradient effects on text.

6. Creating a sliding image gallery

Often used in photographers’ website, the sliding image gallery is a simple yet beautiful way to organize your web images. You’ll learn how a horizontal or vertical sliding image gallery can be made in Stu Nicholls’s tutorial.

Read sliding image gallery tutorial.

7. Round corner in CSS

created a web apps to automated the process. With just a few clicks, you can generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.

Learn how round corner can be created in pure CSS.

8. Pure CSS Line Graph

To create a line graph. this tutorial and sample codes are as valuable as gold for experienced web designers and I strongly recommend everyone to spend some time crunching his article.

Read guide on CSS Line Graph.

9. Pure CSS Accordion Effect

The Accordion Effect is becoming a common effects of the Web 2.0 world. We’ve seen a lot how this can be done using JavaScript frameworks but can we do this in CSS? Well the answer is yes. Learn from Rob Glazebrook how this effect can be made by only using CSS.

Learn how to create the CSS-only Accordion Effect.

10. CSS rollover buttons

Rollovers are a nice way to add visual feedback to your website’s buttons. As a visitor moves their mouse over a rollover button, it changes to indicate that it’s click-able. It looks something like the ‘Sliding Sprite Window’ we talked about earlier but the mechanics behind this is quite a difference.

Read on to learn how you can make rollover buttons in CSS