Tips for Web Designers, Developers, and Bloggers

Top CSS3 Benefits

CSS3 came out a seemingly long time ago, but still many people don’t use it or they are not as comfortable with using it. This article will show you the top benefits of CSS3 and  maybe interest you into using CSS3 in your next project.

  1. Borders: Being able to create rounded corners on a box is a really cool feature on CSS3. There is now a simple way to create rounded corners on boxes without stressing out. Before you might have spent countless amounts of time arranging everything into tables and then adding in images and whatnot to create a box with rounded edges, but now you can do all of that with only a few lines of CSS, making this a great time-saver.
  2. Text Effects: Another great time-saver in CSS3 is the ability to create fancy text effects with (again) only a few lines of CSS. This means that, whereas before you might have to create the text in Photoshop and add effects and then export it and add text as an image, you only need to type in those few lines of CSS and you’re all done with your text-affects.
  3. Multi-Column Layouts: Though it is not supported in Safari and Mozilla based browsers, this feature is really nifty. With a couple of lines of code, like this:
     -moz-column-width: 15em; -webkit-column-width: 15em; -moz-column-gap: 2em; -webkit-column-gap: 2em;

    you can create a great multi-column layout. This kind of a layout would be ideal for people creating magazine websites or newspaper sites that will need more than the regular single-column outlook.

  4. CSS3 Transitions:This feature is probably the coolest thing I ever saw in CSS3. With the use of code as such:
    #box {
    width: 580px;
    padding: 9px 15px;
    background-color: #ED8029;
    color: white;
    border-radius: 5px;
    -webkit-transition: background-color 5s;
    -moz-transition: background-color 5s;
    -o-transition: background-color 5s;
    -ms-transition: background-color 5s;
    transition: background-color 5s;
    #box:hover {
    background-color: #A7B526;

    you can create a nifty hover action that will look great and save you time.

These are all great features and are also widely accepted in browsers, saving you both time and effort whenever you are working on something.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: