1. Borders

Borders have been totally revamped in CSS3, allowing you to do loads of stuff like rounded corners, etc. Hopefully this will help to simplify what was once an overly complicated solution to a simple problem

New in CSS3

• border-radius
• border-break
• border-image

How they are used

Border-radius: <length> <length> <length> <length>

Border-radius will allow you to add rounded corners to <div>s and things like that. The four <length>s represent the four corners of the box or shape, in the order top-left, top-right, bottom-left and bottom-right. For instance, the below code:

border: 2px solid #434343;
padding: 10px; background: #e3e3e3;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
width: 500px;

Results in this:

border-break: close | [border-width || border-style || <color>]

If you have a page break, a line break, or something broke into columns, what usually happens is the border is broken, and continues after the break. If you set border-break to is set to close, each element after and before the break are bordered individually, and if you want, you can style the border differently after the break by adding a width, style and color after the word close.

border-image: url(‘link.gif’) [<length> <length> <length>] [ stretch | repeat | round ]

This is a way to add an image as a border. You first specify a url to the image you want to use as a border. The length elements (can be expressed as percentages) specify the width of the sides in the order top, right, bottom and left. Stretch, repeat and round are ways to alter how the border image is manipulated. You can define the stretch/repeat/round rule twice, so you could have stretch repeat, or stretch round for instance. The first occurance is for the top and bottom sides of the border, whereas the second is for the left and right.

You can find an example of this on CSS3.info here. The image used in each is this:

2. Animation

Animations have never been supported in CSS before, but with the coming of CSS3 come promises of the ability to animate things. Of course, there have been ways to animate things with CSS and HTML before but the W3C hopes to simplify this process way down.

The elements you will be using

• animation (a shorthand property)
  
• animation-delay
• animation-direction
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function

Example

<div>
This is some content for the div.</div>
</div>

div {
     animation-name: 'move';
     animation-iteration-count: 7;
     animation-duration: 10s;
}

Next we have to use a new CSS property, the @keyframes rule. This will define what happens. So first we start the rule:

@keyframes 'move' {

}

Notice how we’ve referenced back ot the animation-name by writing “move” after the word keyframes. Now there are many things we could do here. For instance, lets say you want something to happen 20% into the animation (thats 2 seconds in), we can do this:

20% {

}

However instead, we could move the div from somewhere to somewhere else by doing this:

from {
     left: 0px;
     top: 0px;
}
to {
     left: 100px;
     top: 100px;
}

Other Resources

• W3C CSS3 Animation Specification

3. 3D and 2D Transforms

3D and 2D Transforms will, simply, allow you to transform things in both 3D and 2D. For instance, you could have a rectangle, and you could rotate it in 2D, or you could change a 3D shape in some form. Along with animation this will help developers create awesome and interactive interfaces, without flash.

Elements you’ll be using

• transform
• transform-origin

On top of those you will be able to use a bunch of CSS functions which you can find here. Unfortunately there aren’t that many examples on the web seeing as it isn’t very widely supported by a lot of browsers.

Examples (Try in Safari/Chrome)

• Animations using CSS Transform
• Poster Circle
• CSS3 Transforms
• Animate CSS Transforms in Firefox and Webkit

4. Flexible Box Layout

This allows you to alter the contents of a div to stretch out to fit the div. Previously this wasn’t possible without some crazy work arounds. This will hopefully streamline the ability to make complex layouts in CSS and HTML.

Flexible Box Elements

• box-align: start | end | center | baseline | stretch
• box-direction: normal | reverse | inherit
• box-flex:
• box-flex-group:
• box-lines: single | multiple
• box-ordinal-group:
• box-orient: horizontal | vertical | inline-axis | block-axis | inherit
• box-pack: start | end | center | justify

The Flexible Box Elements let you do loads of things, like easily center a block’s children and stuff like that. It works by using flex groups, for instance, lets say you have a div with 2 child elements inside of it. Initially the box-flex will be 0 for these child elements, indicating it is not flexible. However, if you specify the box-flex to be 1 for one of the children, it will stretch to fill the space left in the parent div. If you set the other child element to have a box-flex of 2, it will be two times more flexible, nd thus will fill up more space than the child with a box-flex of 1.

box-align will align a child element in some way, if there is free space in the parent tag. Box-orient will decide what way the children of that element are displayed, i.e. horizontally, or vertically.

You can also group elements with the box-ordinal-group, for instance, the example in the W3C Specification says this:

    <div id="div1">
      <span id="span1" >Sentence One</span>
      <span id="span2" >Sentence Two</span>
      <span id="span3" >Sentence Three</span>
      <span id="span4" >Sentence Four</span>
    </div>

CSS:

    #div1 { display: box; }
    #span1 { box-ordinal-group: 2; }
    #span3 { box-ordinal-group: 2; }
    #span4 { box-ordinal-group: 1; }

Span2 will default to box-ordinal-group 1, and because the spans are stacking horizontally, with groups being stacked vertically, you end up with the spans being in this order:
span2 span4 span1 span3

Resources

• Flexible Box Model
• Introduction to flexible box layout

5. Advanced Selectors

Advanced selectors allow you to select something with a lot more ease than was possible in previous versions of CSS. They can allow you to create semi-conditional statements as to what you want to be selected. Here are a few examples of selectors in CSS3. Lets assume we’re trying to apply all of these to <div>s, attribute being an attribute the div has or hasn’t got.

• div[attribute] – Select div which has the attribute.
• div[attribute="value"] - Select div where attribute is equal to value.
• div[attribute~="value"] - Select div where attribute contains value.
• div[attribute^="value"] – Select div where attribute starts with value.
• div[attribute*="value"] - Selects div where attribute isnt equal to value
• div[attribute$="value"] - Select div where attribute ends with value.

Resources

• W3C Selectors Specification
• CSS3 Selectors Explained

6. Speech

Speech CSS elements will be added in CSS3, these include the following: voice-volume, voice-balance, speak, pause, pause-after, pause-before, rest, rest-before, rest-after, cue, cue-before, cue after, mark, mark-before, mark-after, voice-family, voice-rate, voice-pitch, voice-pitch-range, voice-stress, voice-duration and phonemes.

These speech elements will go along with SSML (Speech Synthesis Markup Language) 1.0.

Resources

• Aural CSS

7. Marquees

A Marquee is when text is caused to scroll across or vertically in a holder of some sort. They used to be commonplace on the web when the <marquee> tag grew in popularity. However, the <marquee> tag is not seen as a valid piece of markup in HTML and XHTML, so it was hard to find a standard compliant way to create this effect. Luckily, in CSS3, you’ll be able to create Marquees quickly and easily. Of course, marquees are only really going to be useful on mobile applications and things like that, where the screen is too small to hold all the information.

CSS3 Elements

• overflow-style
• marquee-style
• marquee-play-count
• marquee-direction
• marquee-speed

Here’s an example of a marquee:

li {
       overflow: auto;
       overflow-style: marquee-line;
       marquee-speed: fast;
       marquee-direction: reverse;
}

This will create a marquee that moves rather fast in reverse.

8. Shadows

Shadows have been implemented into the CSS3 Specification, and because of the wide browser support for them, they’re already being put into use across the web, especially on design websites which tend to set the trends for things like this.

Shadow CSS Elements

• text-shadow
• box-shadow

How they work

text-shadow: <distance horizontally from text> <distance vertically from text> <amount of blur> <color>

That’s pretty straight forward. A good example would be this:

text-shadow: 2px 2px 2px #000;

This creates a shadow 2px left and down from the text, with a 2px blur in black.

box-shadow: <distance horizontally from text> <distance vertically from text> <amount of blur> <color>

Again, box-shadow works in the same way, only on block elements like divs. Don’t forget however that there isn’t full support for these elements, or any in this article, so use them with caution. Hopefully in a few years however, there will be a lot more support for them, and you can use them until you go blue in the face.

Examples

• Webtint – Top menu text shadow
• BuildInternet – Text in titles of articles