10 CSS3 Properties you Need to be Familiar With

We've already covered the thirty CSS selectors that we should all memorize; but what about the new CSS3 properties? Though most of them still require a vendor-specific prefix, you can still use them in your projects today. In fact, it's encouraged!

The key is to first determine whether or not you're okay with a slightly different presentation from browser to browser. Are you okay with, say, IE displaying 90 degree corners, rather than slick rounded ones? That's up to you to decide. However, always remember that websites needn't look identical in every browser. At the conclusion of this article, we'll work on a fun final project.

1. border-radius

Easily the most popular CSS3 property in the bunch, border-radius was sort of the flagship CSS3 property. While many designers were still terrified of the idea that a layout could be presented differently from browser to browser, a baby-step, like rounded corners, was an easy way to lure them in!

The irony is that we're all perfectly fine with the idea of providing an alternate viewing experience for mobile browsers. Strangely, however, some don't feel the same way when it comes to desktop browsing.

Circles

...And, if we want to have some fun, we can also take advantage of the Flexible Box Model (detailed in #8) to both vertically and horizontally center the text within the circle. It requires a bit of code, but only because of the need to compensate for various vendors.

Now, what many don't realize is that you can apply multiple box-shadows at a time. This can lead to some really interesting effects. In the following screenshot, I use a blue and green shadow to magnify each shadow.

3. text-shadow

text-shadow is one of the few CSS properties that we can omit the use of vendor-prefixes. Quite similar to box-shadow, it must be applied to text, and receives the same four parameters:

x-offset

y-offest

blur

color of shadow

h1 {
text-shadow: 0 1px 0 white;
color: #292929;
}

Text-Outline

Again, much like its sibling, box-shadow, we can apply multiple shadows, by using a comma as the separator. For example, let's say that we want to create an outline effect for the text. While webkit does offer a stroke effect, we can reach more browsers by using the following method (though not quite as pretty):

4. Text-Stroke

Be careful with this method. Only webkit, for the last few years, supports it (Safari, Chrome, iPhone). In fact, though I could be wrong, `text-stroke` isn't yet part of the CSS3 spec. In this case, with white text, Firefox will display a seemingly blank page. You can either use JavaScript feature detection to get around this, or make sure that your base text color is not the same as the body's background.

h1 {
-webkit-text-stroke: 3px black;
color: white;
}

Feature Detection

How can we provide one set of styling for, say, Firefox, and another set for Safari or Chrome? One solution is to use feature detection.

With feature detection, we can use JavaScript to test if a certain property is available. If it's not, we prepare a fallback.

Let's refer back to the text-stroke issue. Let's set a fallback color of black for browsers which don't support this property (all but webkit currently).

First, we create a dummy h1 element. Then, we perform a full cavity search to determine if the -webkit-text-stroke property is available to that element, via the style attribute. If it's not, we'll grab the Hello Readers heading, and set its color from white to black.

Please note that we're being generic here. If you need to replace multiple h1 tags on the page, you'll need to use a while statement to filter through each heading, and update the styling or class name, accordingly.

We're also testing only for webkit, when it's possible that other browsers will eventually support the text-stroke property as well. Keep that in mind.

If you want a more comprehensive feature-detection solution, refer to Modernizr.

5. Multiple Backgrounds

The background property has been overhauled to allow for multiple backgrounds in CSS3.

Let's create a silly example, simply as a proof of concept. For lack of any suitable images nearby, I'll use two tutorial images as our backgrounds. Of course, in a real-world application, you might use a texture and, perhaps, a gradient for your backgrounds.

Above, by using a comma as the separator, we're referencing two separate background images. Notice how, in the first case, it's placed in the top left position (0 0), and, in the second, the top right position (100% 0).

Make sure that you provide a fallback for the browsers which don't provide support for multiple backgrounds. They'll skip over the property entirely, leaving your background blank.

Compensating for Older Browsers

To add a single background image for older browsers, like IE7, declare the background property twice: first for old browsers, and the second as an override. Alternatively, you could, again, use Modernizr.

6. background-size

The code above will direct the background image to take up all available space. As an example, what if we wanted a particular image to take up the entire background of the body element, regardless of the browser window's width?

A bit oddly (unless I'm mistaken), there doesn't seem to be a way to reset the text-overflow property, or "turn it off." To mimic this "off" functionality, on :hover, we can set the white-space property back to normal. This works, because text-overflow is dependent upon this to function correctly.

Did You Know? You can also specify your own string, that should be used in place of the ellipsis. Doing so will render the string to represent the clipped text.

8. Flexible Box Model

The Flexible Box Model, will finally allow us to get away from those mangy floats. Though it takes a bit of work to wrap your head around the new properties, once you do, it all should make perfect sense.

With this property in place, regardless of the width of the #main content area, the aside will consume every spec of available space. Even better, you don't have to worry about those pesky float issues, like elements dropping below the main content area.

The reason why we don't directly apply the transition to the hover state of the anchor tag is because, if we did, the animation would only take effect during mouseover. On mouseout, the element would immediately return to its intial state.

Note that we've also instructed this element to listen for any changes to the state of the element. When they occur, we'll transition the changes (if possible) over the course of one second (transition: all 1s).

Step 4. An Effective Shadow

Next, as we learned earlier this article, we'll apply a cool shadow by using the ::after pseudo class.

Step 6. Fixing the "Front"

Refer to the image above; notice how the back-side of our card is displaying by default? This is because, due to the fact that the element occurs lower in the markup, it, as a result, receives a higher z-index. Let's fix that.

/* Make sure we see the front side first */
.box > div:first-child {
position: relative;
z-index: 2;
}

Step 7. Rotating the Card

Now for the fun part; when we hover over the card, it should flip around, and display the "back-side" of the card (at the least the illusion of the "back-side"). To achieve this effect, we use transformations and the rotateY function.