Okay, I’ve noticed some REALLY cool stuff on CSS3 online, so I thought to myself, how about I make my own experiment and teach you all about how to use this stuff?

Here are a couple of resources I’m using to learn about CSS3:

• CSS3 Info
• CSS3 Validator
• Intro to CSS3
• W3 Avenue
• Net Tuts Plus tutorial

I’ll start with the topic that everyone is concerned about. BORDERS! Okay, why are borders so important? Well, In the Web 2.0 design standard, it’s all about opacity, rounded corners, shadows, and everything else that’s just super awesome looking. I’ve already explained the rounded corners and opacity previously. So, I’ll skip that part. If you’re this far, you should probably learn the basics about CSS standards of borders and the markup.

Border Color

Okay, perhaps not necessarily “border color” but rather “border gradient” because that’s all border color is going to be used for in the future .
It’s currently supported solely by Mozilla Firefox, which is rather unfortunate for all you IE, Chrome, and Safari users.
What does it do? The property is “-moz-border-*side*-colors: value“, the sides are “top, bottom, left, right”. Well, the usual. The problem here is that you have to set up each side. There is no short hand as far as I’m aware (I’ve already tried a few variations but nothing worked).
Here’s what you have to do:

border: 4px solid;
	-moz-border-top-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-bottom-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-left-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-right-colors: #000099 #0033CC #0066CC #0099CC;

You’ll have to set up the border separately, set the pixel size according to how thick you want the border to be. It’s usually safe to set the pixel width to the number of colors used. Four for each gradient color (#000099 through #0099CC). If you set the width of the border to be thicker than 4px, the last color in the set will be repeated (#0099CC).
If you view my example, you’ll notice how differently each border looks with different widths (3px 7px 10px and 4px in a clockwise manner starting with the top). If you can’t see it, here’s a screenshot:

Screenshot of CSS3 example

That’s it for the border-color

Border Image

Border image is another border property that shows a lot of promise. Basically, it’s a property that allows you to use custom specific images that will go around a specific area. Instead of just using lines (or gradients described above), we can insert images for the border. It’s a really tricky property and there is no real documentation anywhere that explains it thoroughly.
Here’s the property “-*browser*-border-image:” for *browser*, you’ll have to use both “webkit” and “moz”, and even “o” (for opera) and “khtml” (konqueror). “border-image” is a shortcut for “-*browser*-border-*side*-image-”, and *side* works the same way as before.
The second part of our little CSS3 definition is the “value” which is in this order: “url(image.png) slicewidth stretch”, you also have to use the “border-width” property.

#borderedcontent {
 border-width: 10px;
-webkit-border-image: url(border.png) 10 stretch;
-moz-border-image: url(border.png) 10 stretch;

}

Again, check out my example.

As far as I can tell, the whole art of doing this is slicing the images right. If you have an image that is 99×99 pixels, such as the one below:

Now, I used a 33 point cutting, so that every 33 points, the images get cut (in all different ways). Once that is done (creating 33 x 33 pixel squares), the second value defines what happens to that little squares. In this case, each square is actually a single dot. I used this image as the second example on my example page. I set the “stretch” property to “stretch round” which made the top and bottom “round” and the sides “stretch” (by sides, I mean the middle row of squares). I know this is pretty confusing and it is even for me, but soon enough, it’ll make sense to you.

The round property scales the “squares” or “slices” of the original image in a way to incorporate the squares in a repeating fashion but so that it only includes WHOLE slices and not parts.

The repeat property does just that, it repeats the element, unscaled and thus results in incomplete repetitions of some slices.

The stretch property does its usual business, it stretches each part to fill the whole area.

The border-width sets the width of the border and in the case of image-border, it helps scale the slices again to fulfill the whole width of the border. You can also set the width to auto which uses the original width of the image slices as width. I used the “auto width” property on my second example (creates a pretty funky image)

Like I said, the trickiest part of the whole process is creating the slices. Oh, and remember that if you want to create ONLY the border images, you’ll have to create a blank middle and slice that out too.

Refer to the W3 Documentation, which, unlike in other cases, actually provides a comprehensive overview of the property. Check out the different examples and see what you can find out.

There’s also another website that deals with slicing and other methods to use border-image here.

And I found a great example on how to use this property.

Here’s my last example:

go back  to my CSS3 testing page and you’ll see a third example on the bottom. Here, I used the “stretch” property in combination with the right slicing. Here’s how I sliced up the image:

sliced image

And it worked! Somewhat. My border had to be about 30 px which really distorted the image. Oh, also, the slicing length is measure from the edge toward the center. ie, 40px from the right etc. Again, here are the screenshots:

Border examples

Box Shadow

Box Shadow is the last border-like property. I guess we could classify it under backgrounds as well but I’m including it here anyways. The property is EXACTLY like the text-shadow property described in an earlier tutorial except now, it involves a whole area.

Let’s look at the property a bit closer:

h1 {

box-shadow: x-offset y-offset blur color;

}

h1 {
box-shadow: 2px 1px 3px #000;
}

Once again, you’ll have to add the “-*browser*-” part to the property again because it’s not a “standard” property yet. So again -moz-box-shadow and -webkit-box-shadow. In the example, you don’t necessarily have to include the color of the shadow, the default will be black.  If you look at my example, you’ll see that it’s a pretty nice property For all of you who can’t view it, here’s the screenshot (*note the original example uses a green shadow):

Box Shadow

One thing you can do in mozilla firefox, and nowhere else, is an inner shadow by adding inset to your property value:

div {
-moz-box-shadow: inset 1px 3px 2px;
}

That results in the second example on my example page.

Inner Box Shadow

Conclusion

CSS3 is still in works, and as you might have noticed, many of these properties require the “-*browser*-” add-on at the beginning. Once CSS3 becomes a standard, we’ll be able to use all of these freely. Also, I regret to inform you that IE does not have any quick work around yet but apparently the new IE9 should work with CSS3 properties…finally.

I hope you enjoyed my tutorial and I can’t wait to show you some more CSS3 stuff!