12 Really Useful CSS3 Tips And Techniques


CSS 3 no doubt is amazing. I have been using slight bits of it in some of my other web projects, and I am more than pleased with it. Its simplicity runs so well with its advanced features such as rounded corner rendering and font file reading. Rounded up here are my favorite 12 Really Useful CSS3 Tips And Techniques, to help you learn new and exciting features very quickly. Please fell free to drop us a comment showcasing what you have made with CSS 3. Enjoy!

Rounded Corners

With CSS 3, you don’t have to have images for each corner (like the old days). It can now render itself!

Rounded Corners Useful CSS3 Tips

* * * * *

Text Shadows & Background Sizing

Learn how to add shadows to text and to size your background images using CSS 3.

Text Shadows & Background Sizing  Useful CSS3 Tips

* * * * *

Using Any Custom Font

This is amazing! CSS 3 can actually read a font file if you specify the path, and then it can render the text that you apply the CSS class or id. So the user doesn’t even have to have the font!

Using Any Custom Font  Useful CSS3 Tips

* * * * *

CSS 3 Colour

Learn how to create a mock-up interface using CSS 3 colour. Check out the colour module demo, its outstanding!

CSS 3 Colour  Useful CSS3 Tips

* * * * *

Styling HTML Forms

Learn how to style HTML forms using CSS 3’s attribute selectors.

Styling HTML Forms  Useful CSS3 Tips

* * * * *

Apply Link Icons

In this tutorial you will learn how to use CSS 3’s attribute selectors to put different icons infront of different link file types. You will need a better browser that IE6 to see them!

Apply Link Icons  Useful CSS3 Tips

* * * * *

International Languages

CSS 3 will introduce a large number of properties to support non Latin text.

International Languages  Useful CSS3 Tips

* * * * *

Multi-Column Layout

CSS 3 has a cool newspaper type column feature. Now newspapers can be online!

Multi-Column Layout  Useful CSS3 Tips

* * * * *

CSS 3 Opacity

Learn how to properly use opacity in CSS 3.

CSS 3 Opacity  Useful CSS3 Tips

* * * * *

Border Image

Now you can apply background images to borders, and there are many different parameters you can play around with to style your border just the way you want it.

Border Image  Useful CSS3 Tips

* * * * *

Link Creation & Usage

CSS 3 changes links slightly. This tutorial will guide you through the correct usage.

Link Creation & Usage  Useful CSS3 Tips

* * * * *

Multiple Backgrounds

Finally, you can apply more than one background image to the same class / id.

Multiple Backgrounds  Useful CSS3 Tips

About the Author

Iggy Ko

Facebook Twitter Google+

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

Iggy Ko12 Really Useful CSS3 Tips And Techniques

Comments 35

  1. geancarlo

    it’s gold!

  2. Ruben Marissen

    Is there an good table with compatilbility info?

    1. Andy

      Im not sure. Smashing Magazine have a cheat sheet, but as for a browser compatibility table, i don’t think there is one yet.

      This may be because all different browsers support different CSS 3 techniques.

  3. dlv

    lovely features ! thanks for the article, nice reading !

  4. Montana Flynn

    Great review of some CSS3 test, I really enjoyed CSS 3 COLOR link.

    1. Andy

      Rounded corners are the best thing ever!

  5. david

    thanks. good stuff

  6. Chet Garrison

    Great article! Can’t wait till the old web browsers fade out and we can finally code in CSS 3 and HTML 5. There’s so much more you can do to push web design to the next level.

  7. Chris

    Great examples of some real fun elements to add to design. Me too, can’t wait to move to CSS 3 and HTML 5!

  8. Xara

    Excellent, thanks for sharing.

  9. Lara

    Thank you very useful

  10. kingcul8r

    CSS3 is nice! but i code native css, rocks also for my ie6 guys^^

  11. Motokazu

    Great Article! Thanks.

  12. Susan

    Fantastic article, many thanks! Just yesterday I was wondering when we would be able to spec a custom “border” and there is the solution in CSS 3!

    1. Andy

      Yep! But thing is not all browsers support it yet. And god help IE6 users.

  13. Tim Read: Ripplenet web design

    Thanks for the list – It’ll go on my sites list of useful stuff.

  14. BebopDesigner

    These are so handy! Thanks for sharing. Great post

  15. Andre

    thanks for that useful tips. i will try it out these days. i hope there will be more browsers understanding css3 and html5 in the near future.

  16. web design hertford

    CSS3 is just awesome. I use Mozilla most often and I can see very clearly the Rounded Corners. Thanks for sharing.

  17. Blog2Life

    Very nice. I think I’ll create a WP theme which relies heavily on CSS3… After all, the only way the web will ever move forward is if we stop living in the past.

    1. Andy

      Yeh, i don’t know why people live in the past. Browsers are FREE!

  18. Anthony Rome

    excellent resource for new css code!

  19. Rogerio Fratin

    Unfortunatelly Internet Explorer doesn’t work with rounded corners… =(

  20. Tim Rombach

    CSS3 is innovation pure!

  21. J. Hendrix

    Wow, CSS3 is amazing! Thanks for pointing out these functions.

  22. W3Promoter

    CSS3 is really amazing.. i like it soooo much.

  23. byanoski

    CSS3 is epic. That’s all that needs to be said :)

  24. Pingback: 50 CSS3 Tutorials That Makes Your Works Perfect - Smashingwebs

  25. Tim

    I need more of these great hints !

    Thank you !

  26. Anees

    All these properties are good but not supported on all Browsers….So from a client point of view for a developer to keep same on all browsers is a nightmare.

  27. designerbooster

    Nice css collection. Better clear up my schedule this weekend so I study these! cheers

  28. akonter

    I need this Good CSS3 Tips thanks you

  29. VanLinhEx

    Awesome !
    But it’s just work on IE !

  30. Justin Decker

    Hey that is a good post & a good set of coversations too. Keep sharing, that is good…

Leave a Reply

Your email address will not be published. Required fields are marked *