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.

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

Hoverbox Image Gallery

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

BBC A-to-Z index

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

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

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

Gradient Text Effect

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

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

Spiffy Corner

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

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

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

Pure CSS Line Graph

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

  • Pingback: 10 CSS Tricks That Make Website Look Cool Instantly! | Design Newz

  • http://www.cmather.com/ Dave

    I am so glad I found these tutorials. I can barely even spell CSS

  • http://www.art2code.com art2code

    nice tricks! thx

  • http://1-cent-web-hosting.com/specialdeal web hosting

    Nice tips and tricks its really help me out thanks a lot.

  • http://www.webhostingsecretrevealed.com Jerry

    Thanks for all the good words – I’m glad the list helps.

  • http://electrophonicdesign.com Ezra Sandoval

    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.

  • Mostafa Issa

    Nice Material you got here Jerry ,specially 5 , 8

    Thanks

  • Pingback: 10 CSS Tricks To Boost Your Website Wow Factor | Choose Daily

  • http://www.best-web-hosting-sites.com lovephileo3

    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.

  • Pingback: The week in links 03/07/09 - Craig Baldwin's Blog

  • http://www.webintellects.com Ellen

    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.

  • Mara

    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.”

  • A Browser

    Nice article, but you really could use a proofreader. Your (assumed) expertise is diminished by your glaring grammatical errors.

  • http://www.webhostingsecretrevealed.com Jerry

    @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.

  • Pingback: DotNetShoutout

  • Gianni

    Thanks man!this is a very useful article.
    very good work.keep up like this.

  • http://jamesmcwhorter.com James McWhorter

    I’ll have to add these to my bag-o-tricks. Thanks!

  • http://EnglishProfi.com Kenny

    Love the sliding image gallery!

  • Pingback: links for 2009-07-07 « Mandarine

  • http://www.borgetsolutions.com Siddharth Menon

    Thanks,

    I like the part … pure CSS

    Siddharth Menon
    Creative Director
    Borget Solutions

  • http://www.northstar-website-design.com/ Fred Campbell

    Thanks for the info – really good web design tips!

  • http://www.hasfa.myportal.my hasfa

    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.

  • Pingback: Website Review: Web Hosting Secrets Revealed | Dev Tips | Become a Better Developer, One Tip at a Time.

  • http://www.ckcybers.com Cakka

    very nice tips, it will be usefull for my blog.
    thanks

  • http://simmessa.com Simmessa

    Wow, so many neat things to do via CSS only, and I wasn’t aware!

    Thx! Great post as always man.

  • Pingback: CSS For Everyone!!! Yay!! « Janelle Paquin NMED 3520

  • http://www.bloggingtutorial-aio.blogspot.com Raj

    nice tips

  • http://hostipedia.com Jimmy MRR2

    Thanks. The attention css helps me a lot.

  • http://izdelava-spletnih-strani-1a.blogspot.com/ Spletne Strani

    Excellent tips, if i may, i’m would like to refer to this post and translate it into slovene language?

  • http://www.csstune.com Kamal

    Very Useful post

  • http://www.exquisite-erleben.de Mike

    cool tips and tricks. thanks for your ideas.

  • http://www.natehull.com Nate

    I had no idea there were picture viewers like these, made purely from CSS. wow.

  • http://luxis.co.uk Alex

    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!

  • http://www.prestonracette.com Preston Racette

    Very great and useful post. Keep up the good work.

  • tori

    I don’t see these working in my browser, I have a new IE not sure which. (year 2010)

  • http://purses3handbags5satchel6bags.wetpaint.com/rss2_0/pageReport/updated Purses for cheap

    im feeling this post. I’ve been looking the net for more on this on this. good looking.

  • http://www.open-source-development.com/ PHP Web Developers

    Really cool CSS tricks, I have stepped into website design and development and adhering to these best CSS practices is of great help. Thanks!

  • http://edu.alegoo.com Josh

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

  • http://www.mindurge.com PHP Developer India

    Its useful posting..Thanks for this useful posting.

  • http://www.gothicshopping.co.uk Gothic Jewellery

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

  • http://www.emaginationz.net ERP Development

    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.

  • http://www.varadesigns.com vara

    Amazing! I searched something like CSS Sliding Sprite Windows

  • http://www.bestcoolwebsites.net/ Cool Websites

    very useful. Thanks!

  • http://www.makeawebsitehere.com Chris Farrell Membership

    Thanks so much! You provided some much needed information. Thanks again.

  • http://www.sansatechnology.com Elvis

    Great tutorial – Thanks for your help.

  • http://slateblank.com Slate Blank

    Very cool, thanks a lot!

  • http://www.labwebdesigns.com Andy

    Very Nice, Thanks for the effort. Much Appreciated =)

  • http://www.iatrum.de Rene

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

  • http://www.eddturtle.co.uk Edd Turtle

    I think using a CSS3 Button Framework like http://css3framework.co.uk can make a real difference to a site

  • http://www.studyhtml.com Brian

    Some sweet ways to tweak your website!

  • http://www.tokentools.com.au welder

    Thanks, I am in search of CSS info because I have to redesign the entire site.

  • http://www.sohamsss.weebly.com Soham Dongargaonkar

    Thanks dude!!!

  • http://micleaningmelbourne.com.au/ Cleaning Melbourne

    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.

  • shreshtt

    thanks lot of help

  • http://www.crunchyblogger.com Romy

    Thanks Jerry . For sharing cools css tuts……..

  • http://www.sarcinapesaptamani.ro Sarcina

    excelent css example, love the css acordion.

  • http://www.futuregothic.co.uk Cyberdog

    I find CSS really difficult to pick up so thanks very much for this, very helpful!

  • Kristin

    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!

  • http://www.pinoyden.com.ph/ Wonka

    Cool! Thank you for mentioning spiffy box the website is very nice…

  • http://www.thetercetgroup.in mobile app developers

    I always wanted to know more about “CSS accordions”. An excellent resource of information. I will certainly return to check on the latest posts.

  • http://deliverymusic.net Descarga musica mp3

    Thanks very good information, clear and precise

  • http://www.linetoweb.com Raj Mehta

    Nice css tricks for websites

    :)

  • http://bloggingtalks.com bloggingtalks

    Anyways cool ha this is one of the collest css tricks i have ever known keep it up…

  • http://www.gothic-gifts-galore.co.uk gothic jewellery

    I love the sliding image gallery!

  • http://www.pewter-galore.co.uk pewter necklace

    Great tips, easy to understand, Thanks

  • Bacha

    that is realy cool and perhaps we expect some more if u could!

  • http://www.webhostingsecretrevealed.com Jerry

    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/

  • http://www.bootland.nl Pter

    Thanks for the help, I am a newbie with css and this was helpful!

  • Prodyot

    Jerry
    Great collection.
    Helpful utilities.
    Thanks for sharing.
    Best wishes bud.

  • http://idyllic-software.com/ Dhanesh T S

    I loved reading the tut for Creating Gradient text….Very cool ways to create the glossy /gradient text for different browsers… keep posting :)

  • Donovan

    Great tips! I buy templates from titantemplates.com and they include some of the features. But things like graphs are really great!

  • Sanjeev Khadka

    Its good…

  • http://www.skinlaptopku.com Fazri

    Cool css triks. Thanks for sharing

  • sss

    Cool

  • http://EFUNERALCEMETERY.INFO great deal on FUNERAL CEMETERY

    Hi, Neat post. There is an issue along with your website in internet explorer, might check this? IE nonetheless is the marketplace leader and a huge section of other folks will miss your great writing because of this problem.

  • http://www.eenaducinema.com eenadu cinema

    nice that was good cool

  • http://www.umairsario.info umairsario

    cool cooler coolest web :)

  • http://www.logopunching.com sashacarey

    i learn more from here. i like it.

  • # steve

    All the douchebags above who still create keyword links despite being told rel=’external nofollow’ is in use… links from these tags don’t count at all and are completely ignored by google. Move on and better luck next time.

  • http://trickphotographyideasebook.blogspot.com/ Elliot Spencer

    This is such a cool post. I have had a great interest in trick photography and reading this is a real inspiration.