CSS3: THE NEXT GENERATION OF STYLE

How to use CSS3

CSS3: THE NEXT GENERATION OF STYLE

CSS1 was first introduced in 2001; it allowed us to custom style pages with relative ease. However, support was patchy, and each manufacturer had their own system.

CSS2 began to simplify and consolidate systems. By the end of the noughties, a series of workarounds and bug fixes had been released to satisfy any difficulties.

However, because of this, development on CSS stagnated; JavaScript frameworks (like jQuery, Spry, script.aculo.us, etc) began to highlight how outdated the CSS2 specification had grown.

CSS3: THE SOLUTION CSS3, like HTML5, has been designed in a modular fashion;

this segmentation allows development of the specification to evolve more organically.

As such, the final CSS3 spec isn’t due to be completed until sometime next decade!

“Rather than attempting to shove dozens of updates into a single monolithic specification, it will be much easier and more efficient to be able to update individual pieces of the specification. Modules will enable CSS to be updated in a more timely and precise fashion, thus allowing for a more flexible and timely evolution of the specification as a whole...”

~W3C (2012)

CSS3: WHEN TO USE IT?

As it hasn’t been fully developed yet, there are still major missing features, such as a fully-developed ‘layout’ system to replace the Box Model.

Therefore CSS3 should, at this point, be reserved for non-critical functionality. For example, as a ‘visual reward’ or to improve interaction.

Consider it the ‘icing on the cake’ of your website to give it extra punch and life.

CSS3 COMMANDS: TEXT SHADOWWe can add simple text shadows using

CSS3. This can add visual impact to text, but don’t go overboard!

text-shadow: h-shadow v-shadow blur colour;

CSS3 COMMANDS: BOX SHADOWWe can create the same shadow effect on

DIVs using the Box Model. It uses the same syntax as before

box-shadow: h-shadow v-shadow blur colour;

CSS3 COMMANDS: OPACITYRather than relying on transparent PNGs

for effects, we can apply transparency using the opacity command.

opacity: value(0-1);

CSS3 COMMANDS: RGBANot only does CSS3 improve our colour

properties; it actually introduces a whole new colour system!

Gone are the HEX values of before (#000000), now we use RGBA.

Values for each colour can range between 0 and 255; transparency is a value between 0 and 1

color: rgba(red, green, blue, transparency);

CSS3: VENDOR SPECIFIC PREFIXES

As with CSS2, there are slight variations between browser interpretations of each command. Every browser developer has their own way of doing things...

However, learning from the mistakes of the past, developers have come up with a pragmatic solution.

Each ‘vendor’ has its own specific targeting code, valid only for that unique browser type.

CSS3: VENDOR SPECIFIC PREFIXES

For example, if we want to target the borders of an APDiv to make it rounded, we could use the following command:

border-radius: 10px;

Alternatively, we can target different sizes in different browsers. For example:

-webkit-border-radius: 12px;-moz-border-radius: 9px;

CSS3 COMMANDS: TRANSITIONSWe can also implement transitions with

CSS3; it is broken down into three parts:

transition-property: type; transition-duration: seconds;transition-timing-function: speed;

CSS3 COMMANDS: TRANSITIONSThere are a number of timing functions,

including ease, ease-in, ease-out, ease-in-out, linear and cubic-bezier.

We can also add in a delay to the transition too, using the following command:

transition-delay: speed;

CSS3 COMMANDS: TRANSITIONSListings for transitions can become quite

cumbersome; thankfully, there’s a highly efficient shorthand that works to compress all four transition options into one line of code:

-vendor-transition: property duration timing delay;

CSS3 COMMANDS: SCALEWe can also make items shrink and grow

using the transform command to scale our CSS elements. This can also include images!

-vendor-transform: scale(size);

CSS3 COMMANDS: ROTATIONWe can also rotate when we scale. We can

use both positive and negative values from 0 to 360.

-vendor-transform: scale(size) rotate(degrees);

CSS3 COMMANDS: SKEWWe can also skew in exactly the same

manner using the relevant CSS command.

-vendor-transform: scale(size) skew(degrees);

http://www.paulrhayes.com/experiments/cube/multiCubes.html

CSS3 COMMANDS: TRANSFORM & TRANSITIONOnce again, we can combine our effects in one line of CSS by using the –vendor-transform command inside the –vendor-transition command: