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.
Updates Nov 2011: Love this post? You should also check out Danielle’s latest article on CSS3: Make Your Website Beautiful: 20 Must Read CSS3 Tutorials.
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.
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.
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.
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.
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.
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.
7. Round corner in 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.
9. Pure CSS 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.