Exploring Advanced CSS

Now that you know the basics of CSS in one of my other posts, Exploring CSS, there are many more advanced CSS properties that you'll need to know if you want to make your website look more advanced as well. Here are a few of these advanced properties.

---

CSS3

Before I get on to some advanced CSS3 tricks, it's necessary for you to know what CSS3 actually is. 

CSS stands for cascading style sheets, which let you style virtually anything with CSS alone (except for check boxes and some other elements). CSS3 is the third revision of CSS, which adds more properties that allow webmasters to style their websites like never before. CSS3's new properties are supported in Firefox, Chrome, Safari, maybe the new Yahoo! Axis browser, and possibly Opera. But Internet Explorer 8 and below do not support CSS3.

---

Border-radius

CSS3's border-radius property is probably my favorite. It lets webmasters take their sites to the next level in design: Curved corners on elements.

Using this property on elements is easy. Just come up with the pixel value of how curved the corners should be, and use this code in your site: 

{-moz-border-radius: (x)px; -webkit-border-radius: (x)px; border-radius: (x)px;}

With the border-radius property added, this is what a normal text box should look like:

---

Box Shadow

Box-shadow is a CSS3 property that lets webmasters put natural-looking shadows in or around various elements on the page. It also gives elements dimension. Two examples of the code for box shadow (minus the -moz and -webkit prefixes) are below.

{box-shadow: 0 1px 2px (color)} or {box-shadow: inset 0 1px 2px (color)}

These examples put a little bit of box shadow on the bottom or inside (with the inset property) of an element.

You have a few different options for the color of the box shadow. If you want it to look more like a border, use hexadecimal or RGB (red, green, blue). If you want it to look like a real shadow (in IE9+ and all modern browsers), I highly recommend using RGBA, a CSS3 color selector. Try using rgba(0,0,0,0.2) as the color. This is what a box looks like using it.

---

Selection

Selection is a new favorite CSS3 property of mine. It lets you control how selected (or highlighted) text looks. Instead of having the usual background color appear, you can make it so that just the text turns red. Here's an example of it.
(element)::selection {color: red;} (element)::-moz-selection {color: red;}

Notice how there's a regular selection property and one with the -moz prefix. This is necessary so that it appears in Firefox.

Try selecting/highlighting this text.

---

That's all for now. Enjoy CSS3!