CSS3 Is Here Now

talking trash cans

LOL, Good One Frank

Why Wait to Use it?

I’ve started using some CSS3 styling here at the lab and on another site I’m currently developing.   I love it.   The formatting and “Eye Candy” ability with CSS3 is pretty amazing.   It used to be if you wanted rounded corners or drop shadows you had to create them as images and call them to be displayed.   Now you can add a couple lines of code and do both on the fly.   Want more curve, change a number, want a deeper shadow, change a number; it is that easy.

I’ll show you two examples in this post and provide the CSS3 behind the effect.   NOTE:   YOU WILL NOT SEE ANYTHING DIFFERENT IN IE.

You do have to have a “modern” full featured browser like Chrome, Firefox, Flock, or Safari (but safari requires it’s own code) in order to view CSS3.

Remember the post on add a callout box to your post?   I’ve added a little CSS3 styling to dress them up even more.   Below is a box and styling code.

This box has CSS3 Styles Added

  • CSS3 is easy to add
  • Add a drop shadow
  • Or Rounded corners
  • Even a gradient background
#calloutbox {
-moz-border-radius:10px 10px 10px 10px;
-moz-box-shadow:3px 3px 7px #333333;
background-image:-moz-repeating-linear-gradient(75% 75% 99deg, #EDEDED, #FFFFFF, #EDEDED 55%);
border:4px solid #990000;
margin:1px 10px 10px;
padding:7px 10px 10px;

Can you spot what I put in this code segment that isn’t actually what is being displayed?

Using CSS3 For your Theme

I like it on the call out box, but I really like using CSS3 on the theme elements themselves.

My site Tucson Tired, uses quite a bit of CSS3 styling for the theme layout. All those rounded corners and drop shadows are CSS3.

Of course you have to be using Firefox or Chrome to see it.

Want to really appreciate the difference? Open it in IE and in FF and compare.

There are plenty of CSS3 tutorials and sytax sites out there for you to find the code to create many more effects than the ones mentioned here.

This is just an introduction.   Have some fun.   Apply some CSS three to your styles and really add some “Style“.