Written by Jerry . Published on 29 Jun, 2009 . 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.
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.
[...] 10 CSS Tricks That Make Website Look Cool Instantly! [...]
I am so glad I found these tutorials. I can barely even spell CSS
nice tricks! thx
Nice tips and tricks its really help me out thanks a lot.
Thanks for all the good words – I’m glad the list helps.
There are some very nice tips here. Now I’m going to have to come up with a project to use some of them on.
Nice Material you got here Jerry ,specially 5 , 8
Thanks
[...] Choose It AKPC_IDS += "10,"; This entry was posted on Wednesday, July 1st, 2009. You can leave a comment, or trackback from your own site. [...]
Cool offers! Professionally designed websites that are easy to navigate as well are usually the hallmarks of professional web hosting service providers, but you can find some affordable web hosting providers that are capable of these, too.
[...] 10 CSS Tricks That Make Websites Look Cool Instantly (webhostingsecretrevealed.com) [...]
The round corners remind me of a Mac interface, really clean and clear. I think that is the best kind of design for any user interface.
I think this article should have been researched with a little more diligence. The “CSS accordions” are nothing more than a proof of concept, and a very rough draft at that.
Hardly something that should be included in “10 CSS tricks that make your site look cool instantly.”
Nice article, but you really could use a proofreader. Your (assumed) expertise is diminished by your glaring grammatical errors.
@A Browser: Point noted and agreed. I’m on my second English writing book now, will write better in the future (hopefully).
Thanks for the suggestion.
10 CSS tricks that make website looks cool instantly!…
Thank you for submitting this cool story – Trackback from DotNetShoutout…
Thanks man!this is a very useful article.
very good work.keep up like this.
I’ll have to add these to my bag-o-tricks. Thanks!
Love the sliding image gallery!
[...] 10 CSS tricks that make website looks cool instantly! (tags: webdev list tutorial css) [...]
Thanks,
I like the part … pure CSS
Siddharth Menon
Creative Director
Borget Solutions
Thanks for the info – really good web design tips!
Thanks guys. U all work very hard and most perfect work for us for having a nice n cool web.I must try and learn here and tell my group so.
[...] to WebHostingSecrets for taking the time to write articles that actually help people. For example, 10 must learn CSS tutorials and 43 ways to improve your blog are both articles that provide quality content to its [...]
very nice tips, it will be usefull for my blog.
thanks
Wow, so many neat things to do via CSS only, and I wasn’t aware!
Thx! Great post as always man.
[...] http://www.webhostingsecretrevealed.com/web-hosting-knowledge/10-css-tutorials-that-will-make-your-w... [...]
nice tips
Thanks. The attention css helps me a lot.
Excellent tips, if i may, i’m would like to refer to this post and translate it into slovene language?
Very Useful post
cool tips and tricks. thanks for your ideas.
I had no idea there were picture viewers like these, made purely from CSS. wow.
All credit for those sliding galleries should go to “css play” – They are the true masters of CSS combined with (X)HTML. Check ‘em out!
Very great and useful post. Keep up the good work.
I don’t see these working in my browser, I have a new IE not sure which. (year 2010)
im feeling this post. I’ve been looking the net for more on this on this. good looking.
Really cool CSS tricks, I have stepped into website design and development and adhering to these best CSS practices is of great help. Thanks!
I love the gradient text with css! I’ve been searching for this a long time. I’m glad I found this site. Thanks very much!
Its useful posting..Thanks for this useful posting.
I’ve only just found this site and I’m really impressed with amount of useful articles, I think you’re going to keep me reading for some time lol thanks
Now a days the use of css has increased tremendously everywhere, and you have explained here the important aspects of css is what i was looking for thanks once again for that.
Amazing! I searched something like CSS Sliding Sprite Windows
very useful. Thanks!
Thanks so much! You provided some much needed information. Thanks again.
Great tutorial – Thanks for your help.
Very cool, thanks a lot!
Very Nice, Thanks for the effort. Much Appreciated =)
I like the really easy way of making glossy text by css.
Nice imagegallery and phantastic accordeon.
thanks for sharing
I hope there will be more
I think using a CSS3 Button Framework like http://css3framework.co.uk can make a real difference to a site
Some sweet ways to tweak your website!
Thanks, I am in search of CSS info because I have to redesign the entire site.
Thanks dude!!!
Interesting perspective, I’m impressed the entire post. I always wanted to know more about “CSS accordions”. An excellent resource of information. I will certainly return to check on the latest posts.
thanks lot of help
Thanks Jerry . For sharing cools css tuts……..
excelent css example, love the css acordion.
I find CSS really difficult to pick up so thanks very much for this, very helpful!
I found that the Sliding image gallery doesn’t work in newer I.E. versions.. is there a work around for this?
Thanks and great tips!
Cool! Thank you for mentioning spiffy box the website is very nice…
I always wanted to know more about “CSS accordions”. An excellent resource of information. I will certainly return to check on the latest posts.
Thanks very good information, clear and precise
Nice css tricks for websites
Anyways cool ha this is one of the collest css tricks i have ever known keep it up…
I love the sliding image gallery!
Great tips, easy to understand, Thanks
that is realy cool and perhaps we expect some more if u could!
Guys, thanks for all the good words! I’m glad that some of y’all love the post. Do check out Danielle’s (my co-writer) latest writing on similar topic (a nice round up on latest CSS3 tutorials): http://www.webhostingsecretrevealed.com/featured-articles/make-your-webite-beautiful-20-must-read-css3-tutorials/
Thanks for the help, I am a newbie with css and this was helpful!
Jerry
Great collection.
Helpful utilities.
Thanks for sharing.
Best wishes bud.
I loved reading the tut for Creating Gradient text….Very cool ways to create the glossy /gradient text for different browsers… keep posting