12 Really Useful CSS3 Tips And Techniques
Posted on 23. Sep, 2009 by Web Design in Web Development
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 12 favorite tutorials to help you learn many of CSS 3’s 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!
* * * * *
Text Shadows & Background Sizing
Learn how to add shadows to text and to size your background images using CSS 3.
* * * * *
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!
* * * * *
CSS 3 Colour
Learn how to create a mock-up interface using CSS 3 colour. Check out the colour module demo, its outstanding!
* * * * *
Styling HTML Forms
Learn how to style HTML forms using CSS 3’s attribute selectors.
* * * * *
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!
* * * * *
International Languages
CSS 3 will introduce a large number of properties to support non Latin text.
* * * * *
Multi-Column Layout
CSS 3 has a cool newspaper type column feature. Now newspapers can be online!
* * * * *
CSS 3 Opacity
Learn how to properly use opacity in CSS 3.
* * * * *
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.
* * * * *
Link Creation & Usage
CSS 3 changes links slightly. This tutorial will guide you through the correct usage.
* * * * *
Multiple Backgrounds
Finally, you can apply more than one background image to the same class / id.
35 Responses to “12 Really Useful CSS3 Tips And Techniques”
Leave a Reply
Loading ...
geancarlo
23. Sep, 2009
it’s gold!
Ruben Marissen
23. Sep, 2009
Is there an good table with compatilbility info?
Andy
24. Sep, 2009
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.
dlv
23. Sep, 2009
lovely features ! thanks for the article, nice reading !
adeux
Montana Flynn
23. Sep, 2009
Great review of some CSS3 test, I really enjoyed CSS 3 COLOR link.
Andy
24. Sep, 2009
Rounded corners are the best thing ever!
david
23. Sep, 2009
thanks. good stuff
Chet Garrison
23. Sep, 2009
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.
Chris
23. Sep, 2009
Great examples of some real fun elements to add to design. Me too, can’t wait to move to CSS 3 and HTML 5!
Xara
24. Sep, 2009
Excellent, thanks for sharing.
ankur
24. Sep, 2009
its very very good
thanks gys
Lara
24. Sep, 2009
Thank you very useful
kingcul8r
24. Sep, 2009
CSS3 is nice! but i code native css, rocks also for my ie6 guys^^
Anne
24. Sep, 2009
@kingcul8r … you can serve alternative style sheets for IE6 etc. – that way you serve users who are stuck in the stone-age and the more hip up-to-date users.
http://www.w3.org/Style/Examples/007/alternatives
Motokazu
24. Sep, 2009
Great Article! Thanks.
Mike
24. Sep, 2009
would have preferred to see the demos live, instead of just images.
Susan
24. Sep, 2009
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!
Andy
24. Sep, 2009
Yep! But thing is not all browsers support it yet. And god help IE6 users.
Xoth Designs
24. Sep, 2009
Really good article! Thanx!
Tim Read: Ripplenet web design
24. Sep, 2009
Thanks for the list – It’ll go on my sites list of useful stuff.
Andre
26. Sep, 2009
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.
BebopDesigner
26. Sep, 2009
These are so handy! Thanks for sharing. Great post
web design hertford
26. Sep, 2009
CSS3 is just awesome. I use Mozilla most often and I can see very clearly the Rounded Corners. Thanks for sharing.
Paulo Carvalho
26. Sep, 2009
Very good, amazing tips.Thank you
Blog2Life
27. Sep, 2009
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.
Andy
27. Sep, 2009
Yeh, i don’t know why people live in the past. Browsers are FREE!
Anthony Rome
29. Sep, 2009
excellent resource for new css code!
Rogerio Fratin
06. Oct, 2009
Unfortunatelly Internet Explorer doesn’t work with rounded corners… =(
Tim Rombach
02. Nov, 2009
CSS3 is innovation pure!
J. Hendrix
22. Nov, 2009
Wow, CSS3 is amazing! Thanks for pointing out these functions.
web design London
08. Feb, 2010
@Andy , Yea, never understood why people would still be using the old browsers till I wanted to install firefox 3.xx on my girlfriends old mac… it didn’t let me do as her OS was to old to handle it.
So I guess many people have the same problem, just cannot be bothered or haven’t got the know how to upload it.
Some of our clients aren’t allowed to upload new programs full stop… A well, it keep us designers on our tows.
W3Promoter
06. Jun, 2010
CSS3 is really amazing.. i like it soooo much.
byanoski
16. Jun, 2010
CSS3 is epic. That’s all that needs to be said
50 CSS3 Tutorials That Makes Your Works Perfect - Smashingwebs
29. Jun, 2010
[...] 5. 12 Really Useful CSS3 Tips And Techniques [...]
Tim
01. Sep, 2010
I need more of these great hints !
Thank you !