10 CSS tricks that make website looks cool instantly!

There are numerous ways a Cascading Style Sheets (CSS) can improves our web design and it’s not difficult to implement a few to make our website looks better and more user-friendly. Listed below are 10 cool CSS tricks that will improve your web designs instantly. The good thing about these tutorials is that they make complicated CSS tricks look easy (and you don’t have extensive coding work to do!).

If you are new to web design and development, I suggest you bookmark this article for further reference in future.

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

Greg Johnson offers more than just tutorial in making round corners using CSS; more over, he 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. (Greg also offers Spiffy Box – another great tool to create simple rounded CSS box.)

Learn how round corner can be created in pure CSS.

8. Pure CSS Line Graph

Okay I admit this is not as easy as I promised earlier in this article; but this is certainly a cool (and extraordinary) way to use CSS. Alan’s experiment demonstrates the power of css and present a way of using css a bit differently – to create a line graph. His 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 Alen’s 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