CSS3: Helpful Tricks and Resources

April 21, 2010
Posted By: Jonden Jackson

Unless you have been living under a rock you have seen the implementation of CSS3 slowly creeping it’s way into web development over the past year, further pushing our abilities as designers and developers to create cutting edge sites with cleaner and more lightweight code. CSS3 is providing new exciting features and functions throughout the web and if you are anything like us you love watching these new twists and turns pop up into modern day websites!

With all of these new features you would think we are all on the brink of development heaven, but as with any web development comes a few dark clouds to rain on the parade of all that is CSS3. What we are talking about is browser rendering. Luckily CSS3 isn’t so technical that all hope is lost, but the simple fact is some browsers just don’t render for it yet. *Cough* IE *Cough*. This is somewhat off putting for creating a full blown website layout using CSS3 but we can encourage some of the tastier and finer points of CSS3 that degrade rather gracefully and should be in your repertoire as soon as possible.

Now with all of that said we have created a list of tools, tutorials, and resources that will help with your learning of CSS3 so you can really start to envision all that it is capable of. The beauty of it is, even though some browsers aren’t rendering it all correctly currently doesn’t mean that it will look horrible on them, just absent. So check out these tasty treats and give them a try for yourself. You should find them to be as helpful as we have and will keep you sharp on that ever cutting edge of design and development.

Rounded Corners with CSS3

Web Source:
Border-Radius

Remember the days when you wanted a rounder corners on a an element you had to break out the old slice tool in Photoshop and basically go blind cutting them? It was a pain then and is a pain now. But with the beauty of CSS3 there is now a quick and painless solution for that. Head on over to Border-Radius created by Jacob Bijani, enter the pixel radius of the curve you want, and BAM! You got some lightweight code to create those rounded corners we all know and love.


CSS3 Generator

Web Source:
CSS3 Generator

With CSS3 we find more range than ever for editing visual displays of content, colors, and even columns. Check out this handy generator that gives you quick and full control of your styles and even giving you browsers that will display these options correctly. Definitely a handy little tool!


CSS3 Hover Form

Web Source:
Skyrocket Labs

CSS3 functions don’t stop at content styles and opacity ranges. With a little editing you can even create a beautiful hover style form as shown in this tutorial. While it may not be best to use this in common practice for creating your forms for sites, it wouldn’t hurt to take a couple of the lessons learned here and ‘Frankenstein’ this effect for other visual areas on your sites display.


CSS3 Gradient Generator

Web Source:
CSS3 Gradient Generator

This little gem doesn’t need much of an introduction without the name saying it all. CSS3 Gradient Generator. Yup, that’s right. With CSS3 your days of creating background gradient images for buttons and boxes can now take a hike. Simply use this little generator to create the gradient you want to your hearts content. Grab the code, paste it in and voilà!


Polaroid style image gallery

Web Source:
Zurb

Polaroids with CSS3 was one of the more innovative and creative tutorials we found when dealing with the new functions that CSS3 brings. Take a traditional list of images into a creative and fun set of polaroid pictures. Take a new approach to image galleries and more. Also scalable!


CSS3 Dropdown Menu

Web Source:
WebDesigner Wall

Who doesn’t love a good sub-level dropdown menu? Even better, who doesn’t love a sub-level dropdown menu using only your styles? Well check out this step-by-step write up of how to create one using only the border-radius, box-shadow, and text-shadow elements of CSS3. This dropdown menu renders great on Firefox, Safari and Chrome. As a special bonus it also works on non-CSS3 compitable browsers such as IE7+ sans the rounded corners and shadow elements.


Font Dragr

Web Source:
Font Dragr

With CSS3 and the @font-face property we are now able to find solutions to add truetype (ttf) and opentype (otf) into our designs without making them graphics. This little tool can give you a better idea of the way the web will display any graphic type you decide to substitute in your design. Check out Font Dragr, simply drag in the fonts you want to use and check out how they display. Pretty nifty!


CSS3 Text Emboss

Web Source:
Janko At Warp Speed

If there is anything that looks fantastic on the web it’s the letterpress / emboss effect to typography. With our old ways this effect wasn’t very obtainable without the use of our chosen graphic software, but now with the functions of the text-shadow property we can now letterpress and emboss text with ease. Always a thumbs up!


CSS3 Multi Columns

Web Source:
Zen Elements

Just when we can’t say enough about new CSS3 properties we stumble upon this fantastic new feature. The Column property. Just imagine, someday floating columns will be a thing of the past and hopefully with more support for CSS3 in the future we can say goodbye to it for it good. Checkout this tutorial on how to make multi-columns and prepare to be taken back by the simplicity of it all.


CSS Hidden Messages

Web Source:
PH-Creative

Working on an espionage, viral campaign site, or just want your site to have a little element of mystery to it? This might be of great use to you and is super simple. Create hidden message within your text that can only be revealed by selecting the text and styling it with the :selection declaration.


Get Rid of Link Outlines Using CSS

Web Source:
Sourcelink

Want to give your file links a little more stage time? Try using this great technique presented by CSS3.info. With CSS 3 selectors, you can use the same technique for any tag which has an attribute. What this means is you can easily give a type of document link ( i.e. PDF ) a certain icon and the selector attribute will recognize the file type and give that link a PDF icon. Fantastic.


Get Rid of Link Outlines Using CSS

Web Source:
Zurb

Lastly, check out this demo application of the CSS3 border-image property. As stated in this demo ‘The border-image property is tricky in the way it takes a single image and turns it into a complete object border for any sized element.’ We couldn’t agree more, however can be worth it in the end when executed properly.

Name:*
E-Mail:*
Website:
Message:*


  1. CSS-Design

    Posted on Apr 21st, 2010 at 4:00

    Very nice CSS3-collection, but I miss Bouncing Navigation (based on CSS3 -Animation) or Sliding Menu (based on CSS3 -Transition) ;o)

  2. Portland

    Posted on Apr 21st, 2010 at 4:00

    This is a great entry guys. I can’t wait to try some of these new tricks out! Thanks for the insight.

  3. LEFTY ARGONAUT

    Posted on Aug 17th, 2010 at 4:00

    This is a great post people! Thanks for sharing these with us, I’ll be sure to try some of these methods soon.

  4. Création de sites Belgique

    Posted on Feb 3rd, 2011 at 4:00

    It’s incredible to see what CSS3 can do… Thanks for this article!