css3: new possibilities
CSS3 is an evolution of the CSS specification from the W3. Technically, it is still in progress, which is why some browsers do not support it. Most current and recent versions of browsers do support it, and future browsers certainly will; support in older browsers is almost nonexistent. Prior to CSS3 techniques, complex animation software (actionscript) and/or javascript had to be used to achieve the same outcomes. Now, it's as easy as building upon standard CSS knowledge and methods. This is beneficial because download times on devices is shorter, and fewer scripting languages are required to achieve the same/similar effects.
CSS3 Syntax
One of the most distinctive characteristics of CSS3 syntax compared to 'regular' CSS syntax is that there is often a need to direct the CSS rule toward specific groupings of browsers through a prefix system. Specifically, a grouping of CSS properties is needed to ensure that a CSS3 rule appears as consistently as possible across browsers, and it looks like this:
-
.example { -webkit-border-radius: 8px;(Safari, Chrome)-moz-border-radius: 8px;(Firefox)-o-border-radius: 8px;(Opera)border-radius: 8px;(include one without a browser prefix, too)-
}
The code above would apply rounded corners with a small radius of 8 pixels to an element. Notice that the code is repeated 4 times and is the same except for the browser-directed prefixes. The last rule in the list should be the standard rule without a prefix. As the web moves forward, the prefixes will be able to be dropped. To ensure consistency for now, prefix use is recommended.
Some Common, Basic CSS3 Techniques
- Rounded Corners (border-radius property)
- Multiple Columns (column-count, column-gap, and column-rule properties)
- Opacity (opacity)
- Text Shadows (text-shadow)
Intermediate CSS3 Techniques
- transitions These allow for animated state changes over specified durations of time. As their name suggests, they are generally used to soften changes applied to elements. transforms These allow for transformative changes to elements such as scale, rotation, and skewing (similar to the transform tools in your digital toolboxes in other, familiar graphic software). Transforms can be 2D and/or 3D.
Transitions and transforms can be used in combination to achieve such things as sophisticated navigation and interactive charts, but infinite possibilities exist.
Advanced CSS3 Techniques
- Animation (supported in webkit browsers only)
In-depth combinations of transitions and transforms can be used to achieve motion design features in web sites and html apps. Additionally, keyframe animations can be used to do things previously only possible with actionscript or javascript. Here is a good, quick intro to how to do keyframe animations on medium.com.
CSS3 Demo Page
Click here to see a range of CSS3 techniques (beginner > intermediate > more advanced) in action.
Click here to see examples of variable type in action (including animated type).