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

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

Teenage Diaries: The Days That Were

By -
Teenage Diaries: The Days That Were ~Saurabh Sharma Language: English Binding: Paperback Publisher: Leadstart Publishing Pvt Ltd Genre: Humor ISBN: 9789352017263, 9352017269 Edition: First, 2016 Pages: 320 A simple read which takes you back to school days and relights your old memories. It can engulf you in the plots you made during school days, the vivid imagination you had during those days and how you took interest in every little detail of what happens around you. Ghanshyam and Vikram, their friendship, love and the plots \ schemes for an 8th grader students. A new turn to the adolescence life and learning human aspects like love, friendship and moreso who to trust and how difficult it is to trust is what the book is all about. Saurabh Sharma has done a very well thought character development and gives it all to make sure that the readers connect well with the protagonist and can communicate with self regard. To sum it up, this books takes you back to your school
Read more

Fables from India: A Collection of Short Stories by Uday Mane

By -
Fables from India: A Collection of Short Stories by Uday Mane A King’s negligence costs the Prince his eyes. A farmer is torn between resurrecting his wife and upholding his duties. A jester lives two lives – Masked for others. Unmasked for himself. A magnificent tree bears fruits of different kinds, but the King wants it to be cut down to serve justice. An orphan boy is in search of the world’s bestselling book. A dog struggles to uncurl his tail. Many other stories apart from the above. Set in ancient times 22 short stories by Uday Mane keeps you guessing and takes you back to the young age. It reminds you of your childhood, your imagination is uplifted and refreshed all over again while reading the book. You are swept away in Kingdoms and Kings with all the Castles and Prince's, all these are lively and eccentric yet very close to your heart. Uday Mane keeps you held in every story plot which is simple and straight-forward and with a twist that either makes you happy or s
Read more