I’ve noticed some hundred tweets on CSS3, every day. Check out the CSS3 Watcher for random updates. They actually mention really awesome and useful tutorials. So now, let’s look at some basic features that actually work cross-browser (with some tweaks). You can check some of the usage on two version of one of my projects: the alpha, which utilizes rounded corners, and the beta, which utilizes a lot of opacity features.

I’ll show you some fun features as well as ways to get around them.

Rounded Corners

Creating rounded corners has always been a challenge. People have used several methods to accomplish this. One was by creating corner images to over-lap the background and make the square part of the corner transparent. I won’t explain that method, I don’t use it. But let’s look at the CSS3 write up:

border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;

The short-hand property works very well here. It’s explained in my CSS Lesson 2. But let’s go over this in detail:

border-radius is the proper property mark-up in CSS3. There are variations to accommodate each corner of the object:

border-top-right-radius:
border-top-left-radius:
border-bottom-right-radius:
border-bottom-left-radius:

There, you can specify the exact curvature of each corner. You can do that in pixels, em, and other such length measurements. The larger the measurement, the more curved the corner will be.
Now, we all know that most browser today do not support pure CSS3 mark-up. There are two specific properties you can use.
For Mozilla, use these:

-moz-border-radius:
-moz-border-topleft:
-moz-border-topright:
-moz-border-bottomleft:
-moz-border-bottomright:

Yay! These work just as well and the same way as the original CSS3 markup.
For Safari and Chrome, use the following properties:

-webkit-border-radius:
-webkit-border-top-left-radius:
-webkit-border-top-right-radius:
-webkit-border-bottom-left-radius:
-webkit-border-bottom-right-radius:

But that’s about it. Unfortunately, none of these apply to Internet Explorer, (as was expected), so when you view my testing sites (links are at the beginning of this article), you won’t see anything different.

Input box

Here’s an input box modified by CSS3. Now to get the input box to look like this is a real problem without CSS but let me show you how you can bypass this CSS method on normal fields of text and html. Let me show you what I mean.

The “Div” Method

template diagram

Here’s a simple template diagram. The code for this would be as following:

<div id="container">
   <div id="topcontent"></div>
   <div id="content">
       <div id="clear"></div>
   </div>
   <div id="rightbar">
       <div id="clear"></div>
   </div>
   <div id="bottomcontent">
   </div>
</div>

Read my intro to divs to understand this structure better. But first, let me show you what I’m up to. Now, we know that most internet browsers these days support .PNG files, right? and .PNG files support transparency, yay! Instead of creating a mega background as I did in the case of one of my websites, we can simply take the top snippet of the background. Let me show you:

background diagram

You simply crop out the bottom and top into separate files. Make them as small as possible (height wise), let’s say ten pixels at most. Save them and insert them into the divs like this:

#topcontent {
height: 10px;
background: url(top.png);
width: 100%;
}

Do the same for the bottom content and you’re done! It’s really this easy and it saves a lot of space. You may have to create another div just for the content and right sidebar, but that all depends on what you’re doing with the site.
I hope that helped! Let’s move on to opacity!

Opacity

Opacity, yay! Or as you could call it, transparency. It’s a great CSS3 feature that I absolutely love because there is so much you can do with it. For me, it’s a great design feature because now, I don’t have to mess with new images. (I’ll show you the image method afterward). So let’s go for it. Here is the basic mark-up:

/* IE */
  filter:alpha(opacity=80);
/* CSS3 standard */
  opacity:0.8;

The CSS3 standard works on all browsers besides IE, which, luckily, has a simple work-around. The CSS3 standard works on the principle where “1″ is completely visible and “0″ is completely invisible. Anything in between is the opacity setting. The IE standard, works the same way except this time “100″ is the full opacity and “0″ is the complete transparency.
Unfortunately, this property has limitations. If used on my standard Div model, on the “container”, then not only will the background have a set transparency, but everything within the container will as well, including text, images, and everything else. I’ve tried to use the “!important” mark-up but that does not work either. Also, when another transparency is set, for example, a transparent “content” div, it will only subtract from the “container” transparency. Thus, when the “container” is set to 80 in IE, and .8 in standard, then the “content” will start with an 80/.8 transparency. So when you set a transparency of 80/.8 to the “content” it will be 80% of the original 80%. I know, confusing, but it makes sense in the end

Image Method

Okay, so let’s say you don’t want to put with this CSS3 crap, or you want only the background to be transparent. The method is simpler than you think. Create a 1 pixel x 1 pixel .PNG image, whatever color you want it, and set the transparency in the image, and save it. Then use this piece of CSS:

#container {
background: url (transparentimage.png) repeat;
}

The image will repeat indefinitely and create a transparent background. If you have an actual picture as a background, set the transparency same way.

So, this was it! I hope you enjoyed my tutorial. Spread the word ^.^