What CSS3 Can Do For You: CSS3 Generators and Other Helpful Tools

By -
In my last few posts, I have gone over just some of the many things CSS3 can do—this post will explore some useful tools to help you in your journey of learning and manipulating CSS3.

Generators

Generators can be helpful if you need to get a lot done in a hurry. Deadlines come quicker than you think, and generators can really help you out when you are in a pinch. They can also help you with code if you aren’t quite familiar with it yet.

CSS3 Generator

As the name implies, this is a fully automated generator to help you writing your CSS3 code. The CSS3 Generator will show you the code for all CSS3 compatible browsers (when applicable) and for the following functions:
  • border radius
  • box shadow
  • text shadow
  • RGBA
  • @font-face
  • multiple columns
  • box resize, box sizing and outline
css3 generator

Gradient Generator

Creating the perfect gradient can take a lot of time and effort. I created the sample button below using the Gradient Generator V2.0

As you can see it also created the code for both webkit browsers and FireFox, which are currently the only types of browsers that support gradient CSS3 code.

CSS3 Sandbox

Going a little bit further into gradients, you can use the CSS3 Sandbox tool to create different effects such as linear and radial gradients. You need to be in a gradient supported browser to see the preview box, but the code will generate in a non-supported browser.
css3 sandbox

Cross Browser Rule Generator

CSS3 please! allows you to, “edit the underlined values in this css file, but don’t worry about making sure the corresponding values match, that’s all done auto magically for you. Whenever you want, you can copy the whole or part of this page and paste it into your own stylesheet.”

Resources

Knowing the names for colors is an important piece of knowledge. Codenique CSS3 Color Names is a great resource to keep on hand for many common colors you should know.

Another great tool to have on hand is the CSS3 Selectors Test. Once this test is running, “it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests.”
CSS3 Selectors Test

Compatibility

With all the features that CSS3 and HTML5 bring to the table, it can get confusing fast what features are compatible on what browsers. Html5readiness offers you some great help. It has broken down the different features these codes can bring, and what browsers are able to support the code.
html5 and css3 readiness

Modernizr

This is a Javascript library that, “adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any Javascript to use it.”
Modernizr Javascript Library
Modernizr can help you with border-radius along with other CSS3 codes such as RGBa. How it works is that it sends a test of the browser you are viewing in against upcoming features such as border-radius and RBGa. This allows you to have a backup plan for any browsers that don’t support the features you are implementing.

CSS3 watch

The web design community, for the most part likes to share. Someone comes up with a great new way to do something, and many different websites start using it on theirs. CSS3Watch does just that—it keeps an eye out for all CSS3 updates and great designs using CSS3.

The Font Dragger

The Font Dragger is a great tool to utilize when you have written some code and need to test it out. The only catch is you need to be working in FireFox 3.6 to have it work properly. Although this is still a work in progress, this app provides the following:
  • Custom fonts with @font-face
  • Gradients
  • Rounded corners using border-radius
  • Drop shadows with text-shadow & box-shadow
  • Attribute and pseudo selectors
  • Multiple border colours
  • Box model adjust using box-sizing
Font draggr
Between all of the many features CSS3 now offers and the tools available, it is a very exciting time for web programmers. Implementing tools along with new techniques will set you up for success. Browser compatibility may be something of concern for now—but it shouldn’t stop you from practicing these new skills to help you when the compatibility becomes universal.

CSS3: Visual QuickStart Guide (5th Edition)
Beginning HTML5 and CSS3: Next Generation Web Standards
HTML5 Straight to the Point: Using HTML5 with CSS3 and JavaScript
Learn CSS with w3Schools

Comments

Post a Comment

Popular posts from this blog

Smart Storage Tips for a Clutter Free Bedroom

By -
Image
The  bedroom  is the area in the house that is more personal and private. One spends most of his time inside the bedroom especially when much rest is needed. Hence, since it is a personal room, one’s belongings and important stuff including clothes, jewelries and others are also inside it. There would be a need to organize all the things inside the bedroom in order to make it clutter free. It is also necessary to do that so that you will not find it hard to look for your own stuff. There are many ways to create storage spaces in your bedroom. Choosing one depends on the type of room you have and it also depends on your storage needs. Today, we will give you some tips on how to create  smart storage space  in your bedroom to have a  clutter free room . Look into the tips below and choose which one best suits you. 1. Open storage. Image:  Vhychenq Try for open storage especially if your bedroom is only small. Place some items on it like some displays, books and others. Lo
Read more

29 Semi-Productive Things I Do Online When I’m Trying to Avoid Real Work

By -
You don’t always have to work hard to be productive.  Productivity can simply be the side effect of doing the right things. So here’s a list of 29 semi-productive things I do online when my mind is set on avoiding ‘real work.’ Check delicious popular tags like ‘ useful ,’ ‘ tutorials ,’ ‘ tips ,’ ‘howto ,’ ‘ advice ,’ ‘ entrepreneurship ,’ etc. for interesting, educational articles to read. Watch one of the thousands of educational videos streaming at TED.com , Academic Earth and Teacher Tube . Read an online book list and find a new book to grab next time I’m at the library.  Here’s another list .  And another .  And another . Read a classic book online for free at Project Gutenberg , Planet eBook , or the E-books Directory . Research a new Do It Yourself project at DIY Network , Instructables , eHow , or WikiHow . Add to, delete from, or just generally sort my ongoing to-do list at Remember The Milk . Create a cool graphical mind map of some of my recent ideas at bubbl.us .
Read more

Top 5 Most Alcoholic Drinks (Cocktails)

By -
Image
5 Strongest Drinks Mixed Drink Recipes #5: The Long Island Ice Tea. This one is a classic. I can remember the first time a friend introduced me to this. After three I was laughing because they were so smooth then I stood up. Then something happened (obvious censoring) and everyone laughed at me for months after. Good times. The Long Island Ice Tea was long the king (queen?) of all strong alcoholic mixed drinks, and still deserves a place on the list. Recipe: 1 shot of vodka, 1 shot of rum, 1 shot of gin, 1 shot of gin, 1 shot of triple sec, 1 lemon, coke. Fill a cocktail shaker with ice add the spirits into the cocktail shaker. Squeeze a fresh lemon into the shaker as well. Put the lid on and shake, add to a tall glass then add lots of ice before slowly pouring the coke on top of the ice. Note: many bartenders will make a weaker version with only half a shot of each. #4: Irish Car Bomb. Many versions of this have a ½ shot of whiskey mixed with a ½ shot of Irish Crea
Read more