1
00:00:00,000 --> 00:00:04,990
I know we talked briefly about CSS3 earlier when we discussed the history and

2
00:00:05,000 --> 00:00:06,990
current state of CSS.

3
00:00:07,000 --> 00:00:12,990
So we know that CSS3 isn't really a specification itself, as CSS has been broken

4
00:00:13,000 --> 00:00:16,990
up into series of modules that are evolving at different paces.

5
00:00:17,000 --> 00:00:19,990
That still, however, leaves the question open:

6
00:00:20,000 --> 00:00:23,990
what exactly is CSS3, and why are so many people talking about it?

7
00:00:24,000 --> 00:00:30,990
Well, in many ways, CSS3 is simply a brand much, like HTML5 is.

8
00:00:31,000 --> 00:00:34,990
People are using it as a blanket term to describe the new CSS features and the

9
00:00:35,000 --> 00:00:38,990
functionality that have emerged over the last few years.

10
00:00:39,000 --> 00:00:44,990
Now, part of this new functionality is the continued development of CSS through the W3C.

11
00:00:45,000 --> 00:00:48,990
Another part of it is being driven by a new generation of browsers that are

12
00:00:49,000 --> 00:00:52,990
focused on giving designers more powerful tools for creating sites.

13
00:00:53,000 --> 00:00:56,990
In fact, some of the syntax and features being added to the CSS modules are

14
00:00:57,000 --> 00:01:00,990
coming straight from people like Mozilla and WebKit, as they continue to stretch

15
00:01:01,000 --> 00:01:04,990
the boundaries of what's possible through CSS.

16
00:01:05,000 --> 00:01:09,990
So let's take a look at some of the features most commonly associated with CSS3.

17
00:01:10,000 --> 00:01:12,990
Keep in mind that many of these features are in the early stages of being

18
00:01:13,000 --> 00:01:14,990
supported by browsers.

19
00:01:15,000 --> 00:01:18,990
Many are experimental, and many are features that have been around for some time,

20
00:01:19,000 --> 00:01:21,990
but are just now being widely implemented.

21
00:01:22,000 --> 00:01:25,990
Taken as a whole together, they will give you a good idea as to what people are

22
00:01:26,000 --> 00:01:28,990
talking about when they mention CSS3.

23
00:01:29,000 --> 00:01:33,990
In many cases, enhancements to older capabilities are defined as CSS3.

24
00:01:34,000 --> 00:01:37,990
This include things like border radius, which allow you create rounded corners

25
00:01:38,000 --> 00:01:42,990
for elements; border images; background property editions, like the ability to

26
00:01:43,000 --> 00:01:47,990
have multiple backgrounds; and enhancements to controlling background image size,

27
00:01:48,000 --> 00:01:49,990
orientation, and clipping.

28
00:01:50,000 --> 00:01:54,990
In some cases, it's also associated with enhancements to existing property values.

29
00:01:55,000 --> 00:02:00,990
The new color values of HSL and the addition of RGBA and HSLA, which add alpha

30
00:02:01,000 --> 00:02:05,990
values to color values, are also often labeled as being features of CSS3.

31
00:02:06,000 --> 00:02:11,990
Many of the new text-formatting features are often also classified as CSS3.

32
00:02:12,000 --> 00:02:15,990
These include things like the new text shadow property, creating multiple

33
00:02:16,000 --> 00:02:17,990
columns, and working with web fonts.

34
00:02:18,000 --> 00:02:21,990
Now, web fonts aren't new, and they've been around since the CSS2.0

35
00:02:22,000 --> 00:02:25,990
specifications, but browsers have only recently started adding

36
00:02:26,000 --> 00:02:27,990
widespread support.

37
00:02:28,000 --> 00:02:31,990
Web fonts allow you to use fonts that aren't installed on the client's system, and

38
00:02:32,000 --> 00:02:36,990
greatly increase their creative control that designers have over their sites.

39
00:02:37,000 --> 00:02:40,990
Quite a few new selector types have been added to CSS as well, and although they

40
00:02:41,000 --> 00:02:45,990
don't get a lot of attention when people discuss CSS3, I would actually argue

41
00:02:46,000 --> 00:02:50,990
that they are among the most important additions to CSS, as they dramatically

42
00:02:51,000 --> 00:02:53,990
increase a designer's ability to target elements on the page.

43
00:02:54,000 --> 00:02:59,990
There are also a few features that are almost always mentioned when CSS3 is discussed.

44
00:03:00,000 --> 00:03:02,990
If you've been researching it at all, I am guessing you've come across these.

45
00:03:03,000 --> 00:03:08,990
First, box shadow gives us the ability to add drop shadows to element boxes.

46
00:03:09,000 --> 00:03:13,990
You can control the color, offset, blur, and whether this shadow is offset or

47
00:03:14,000 --> 00:03:15,990
inset in relation to the element.

48
00:03:16,000 --> 00:03:20,990
One of the features that gets a tremendous amount of attention is CSS gradients.

49
00:03:21,000 --> 00:03:24,990
CSS gradients are incredibly powerful and allow you to set the background color

50
00:03:25,000 --> 00:03:27,990
of an element to a gradient.

51
00:03:28,000 --> 00:03:30,990
You can use a simple two-color gradient, or you can go all out by using numerous

52
00:03:31,000 --> 00:03:34,990
color stops and varying levels of opacity throughout the gradient.

53
00:03:35,000 --> 00:03:38,990
Now, these can be linear or radial, and designers are currently using them to

54
00:03:39,000 --> 00:03:42,990
create all kinds of impressive visual effects, from creating buttons all the way

55
00:03:43,000 --> 00:03:45,990
to building background patterns.

56
00:03:46,000 --> 00:03:48,990
CSS transforms are also getting a fair amount of recent attention.

57
00:03:49,000 --> 00:03:55,990
Transforms allow you to do things like rotate items, scale them, skew them, or

58
00:03:56,000 --> 00:03:57,990
otherwise transform elements on the page.

59
00:03:58,000 --> 00:04:02,990
While this has powerful implications on how page layout can be controlled, it's

60
00:04:03,000 --> 00:04:07,990
also often used in conjunction with another new CSS feature, CSS transitions.

61
00:04:08,000 --> 00:04:12,990
CSS transitions lets you animate from one CSS property value to another.

62
00:04:13,000 --> 00:04:17,990
For example, you could animate the height of an element from 0 pixels to 100

63
00:04:18,000 --> 00:04:20,990
pixels to reveal the contents of the element.

64
00:04:21,000 --> 00:04:23,990
When combined with transforms, you can animate the position, rotation, and even

65
00:04:24,000 --> 00:04:25,990
scale of an element.

66
00:04:26,000 --> 00:04:31,990
One of the properties gaining the most attention currently is CSS-based animations.

67
00:04:32,000 --> 00:04:34,990
Although the two are similar, don't confuse transitions with animations.

68
00:04:35,000 --> 00:04:39,990
CSS animations are contained within their own specification, and they allow you

69
00:04:40,000 --> 00:04:43,990
to create keyframes to control animations and properties that allow you to

70
00:04:44,000 --> 00:04:47,990
control the timing, duration, and looping of the animations.

71
00:04:48,000 --> 00:04:50,990
While that's not a comprehensive list of all the features that are being

72
00:04:51,000 --> 00:04:55,990
attributed to CSS3, it should give you a good idea of what people are referring

73
00:04:56,000 --> 00:04:56,990
to when they discuss it.

74
00:04:57,000 --> 00:04:59,990
There's another thing that you should consider when approaching many of the

75
00:05:00,000 --> 00:05:01,990
features that I've talked about here:

76
00:05:02,000 --> 00:05:06,990
most are either not widely supported or not supported at all in older browsers.

77
00:05:07,000 --> 00:05:10,990
Now, many of them are experimental and are only supported through the use of

78
00:05:11,000 --> 00:05:14,990
vendor prefixes, which we're going to discuss in more detail in just a little bit.

79
00:05:15,000 --> 00:05:17,990
What that means is that if you decide to use these new features, you will need

80
00:05:18,000 --> 00:05:22,990
to--at least in a short term--plan for how you want to deal with older browsers, or

81
00:05:23,000 --> 00:05:24,990
browsers that don't support the features.

82
00:05:25,000 --> 00:05:28,990
In some cases, like gradients, browsers differ in syntax and execution.

83
00:05:29,000 --> 00:05:33,990
You'll also need to keep an eye on how the syntax is evolving.

84
00:05:34,000 --> 00:05:37,990
Many of those features are still being refined, and it's not uncommon to see the

85
00:05:38,000 --> 00:05:41,990
syntax and behavior go through significant changes before they're stabilized.

86
00:05:42,000 --> 00:05:45,990
In other words, proceed with caution until the features are supported

87
00:05:46,000 --> 00:05:47,990
evenly across browsers.

88
00:05:48,000 --> 00:05:52,990
So keep in mind that CSS3 isn't really any one specification;

89
00:05:53,000 --> 00:05:56,990
it's more of a general term used to describe evolving CSS features.

90
00:05:57,000 --> 00:06:00,990
Keep an eye on emerging techniques and how they're being implemented, so that you

91
00:06:01,000 --> 00:06:03,990
can make intelligent decisions about when to start using them.

92
00:06:04,000 --> 00:06:08,990
For more information on many of the CSS3 features I've mentioned here, be sure to

93
00:06:09,000 --> 00:06:19,000
check out my CSS3 First Look title in the lynda.com Online Training Library.