Вы находитесь на странице: 1из 125

CSS3 -

, , 5

http://www.litres.ru/pages/biblio_book/?art=4570394
CSS3 - / : , ; ; 2013
ISBN 978-5-91657-595-8

CSS3 -, ,
CSS2. ,
, CSS3
.
. ,
, .
CSS3 ,
, .
- ,
, .

. . CSS3 -

1. CSS3

CSS3

CSS3
CSS3,
border-radius
text-shadow
box-shadow

opacity
RGBA




!
?
2. CSS
,
CSS-

(
)









JavaScript?

3. Hover -




?



RGBA

6
7
8
9
9
9
11
12
12
12
12
12
13
13
14
15
15
16
17
18
19
20
21
23
24
25
25
26
27
28
29
30
31
32
33
34
35
35
39
41
42
42
42
43
3

. . CSS3 -

RGBA
text-shadow
hover focus
: border-radius


hover opacity



opacity: IE

, hover
4.


hover



, ,

?

(skew)
(translate)
,




:




:
-,
5.

:
: CSS3



44
44
45
46
47
48
49
49
49
50
50
51
52
53
54
55
57
57
58
59
61
62
62
63
65
66
69
71
72
72
73
74
75
76
77
78
78
79
80
81
81
83
84
86
87
87
88
88
91
4

. . CSS3 -

6.


CSS3-

CSS3
CSS3



text-shadow

?
box-shadow focus
CSS-


keyframe

hover
?

,
?
?

A Book Apart

92
94
95
97
98
100
104
104
105
106
107
108
110
111
112
112
113
115
117
118
119
120
121
122
123
124

. . CSS3 -


CSS3 -

, .
, CSS-,
.
.
, , , ,
. ,
, .
( , -,
.)
. ,
, ,
. ,
: dribbble.com.
,
. ,
.
, , CSS3.
, ; , ,
-, . !

. . CSS3 -

1. CSS3
, CSS, ,
-. ,
, ,
.
, 2001-,
(http://bkaprt.com/css3/1/)1,
CSS. CSS
,
, CSS1. -, CSS1.
, CSS,
, , .
: , ,
,
, , , .
2006 CSS .
, , .
.
, - Internet Explorer.
( ). , ,
. status quo
,
, , CSS,
.
, . (
). Firefox Safari
,
.
, , ,
. ,
CSS3.

http://www.alistapart.com/articles/tohell/ . .

. . CSS3 -


, -, :
? , . ( ,
, , .)
,
,
CSS3.
, CSS3 ,
, , .
.
, ,
, ,
CSS3 .
W3C (World Wide Web Consortium. . .) :

,
.
CSS ,

2.
, -, ,

CSS3, ,
(Candidate Recommendation. . .) , .
, , ! ,
,
, .
.
-, ,
,
.

http://www.w3.org/tR/css3-roadmap/#whymods

. . CSS3 -

CSS3
- :
, CSS3 .
, CSS3 .
, ,
. CSS3
? , CSS3 ,
.


,
- ( HTML- CSS ,
, ), ,
, Flash JavaScript. CSS3,
, , ,
.
, -,
, ,
HTML CSS, .
CSS3 - , ,
, , .

CSS3
:
(. 1.01).

1.01. .
CSS3

, , ,
, ,
, .
, CSS3
, .
9

. . CSS3 -

float .
, , ,
.
, CSS3, ,
. - ,
- , , ,
, . , ,
, CSS3 .

( , ,
) , (
). ,
CSS3
, .
CSS3
,
, , CSS3.

, CSS3 CSS2.1
, , ,
.

10

. . CSS3 -

CSS3,
, ,
CSS3, , CSS3
. ,
, .
CSS3 . - . ,
, , ,
, .
CSS3,
(. . 1.02).
;
.

1.02. CSS3 ,

11

. . CSS3 -

border-radius
. Chrome
3+, Firefox 1+, Opera 10.5+ IE9 Beta. :
.foo {
border-radius: 10px;
}

text-shadow
CSS2 ( 2.1, CSS3),
; , .
Safari 1.1+, Chrome 2+, Firefox 3.1+ Opera 9.5+. :
p {
text-shadow: 1px 1px 2px #999;
}
box-shadow

. , text-shadow.
Safari 3+, Chrome 3+, Firefox 3.5+, Opera 10.5+ IE9 Beta. :
.foo {
box-shadow: 1px 1px 2px #999;
}


CSS3
( ) CSS2.1.
Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+ IE9 Beta. :
body {
background: url(image1.png) no-repeat top left,
url(image2.png) repeat-x bottom left,
url(image3.png) repeat-y top right;
}

opacity
. 1
; 0 . Safari
1.2+, Chrome 1+, Firefox 1.5+, Opera 9+ IE9 Beta. :
.foo {
opacity: 0.5; /*.foo will be 50% transparent */
}

12

. . CSS3 -

RGBA
CSS, , , , CSS3,
RGB.
Safari 3.2+, Chrome 3+, Firefox 3+, Opera 10+ IE9 Beta. :
.foo {
color: rgba(0, 0, 0, 0.75); /* black at 75% opacity */
}
, . CSS3
, -
. ,
:
. ,
Internet Explorer ( Opera).
, ,
,
Safari, Chrome, Firefox Opera. ,
,
.


, ,
? , ,
.
CSS3, ,
:
1. (http://www.w3.org/TR/CSS3-mediaqueries/)
2. (http://www.w3.org/TR/CSS3-multicol/)
3. - (http://www.w3.org/TR/CSS3-webfonts/)
.

13

. . CSS3 -


, CSS3 ,
.
. , ,
W3C, , .
, ,
, , .
,
, ,
-.
CSS
, :
webkit border-radius
, ,
,
.
CSS3,
.
,
.
, .
. 1.03
. WebKit, Mozilla Opera ,
CSS3 .

14

. . CSS3 -

1.03.


CSS .
border-radius . ,
10 ; :
.foo {
webkit-border-radius: 10px;
moz-border-radius: 10px;
border-radius: 10px;
}
Webkit (, Chrome, Safari, Safari
) Gecko ( Firefox) border-radius
; Opera
. IE9 border-radius .
( 2012 )
border-radius , IE9. . .


, ,
. ,
, .
15

. . CSS3 -

CSS3- ? ,
,
. , , ,
, , ,
.
, ,
.

!
: ,
! , ,
,
CSS3. ,
.
,
,
- . , , ,

( ).
CSS, , .
- ,
,
(, w\idth: 200px _width: 200px,
IE). , ,
, ,
.
, CSS,
A List Apart (http://bkaprt.com/css3/2/)3:
.
,

, .
. .
, , ,
:

, ,
.
( . . .), ,
.
-
.

http://www.alistapart.com/articles/prefix-or-posthack/

16

. . CSS3 -

. , ,
,
, .

?
, ,
, .
, , CSS3, ,
, , , .
. , ,
, , ,
.
,
CSS3 ,
CSS. , ,
.

17

. . CSS3 -

2. CSS
1997 ; , .
HTML,
- ,
( ). , .
.
JavaScript ,
. ?
- , ,
, . , ,
- , .

-. , ,
, JavaScript Flash.
, CSS- ,
.
1997 ;
, ,
. CSS3
, .
, .
, CSS3
, , .
CSS-.
Flash, Javascript SVG
( ),
CSS3 ( ,
) ,
. , ,
CSS. CSS .
CSS- ,
. ,
, , CSS3.

18

. . CSS3 -

,
,
WebKit Safari, CSS-
W3C. ( CSS- CSS ; 4 6 .)
,
. ,
. Opera CSS-
10.5 Firefox 4.0. ,
, , , Opera Firefox
. , CSS-
Safari.
, . CSS3,
, ,
, .
, ,
, , .

19

. . CSS3 -

CSS-
CSS- ,
, :
, .
,
, .
W3C CSS- (http:// bkaprt.com/css3/3/)4:
CSS- , CSS .
CSS, ,
focus active (
).

http://www.w3.org/tR/Css3-transitions/

20

. . CSS3 -


: .
, ,
, .
Flash JavaScript, ,
CSS.
:
<a href="# class=foo">Transition me!</a>
- (. 2.01):
a.foo {
padding: 5px 10px;
background: #9c3;
}
a.foo: hover {
background: #690;
}

. 2.01. : hover

.
(. 2.02).

. 2.02. ,
: -

,
WebKit ( Safari Chrome).
Firefox Opera.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition-property: background;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
a.foo: hover {
21

. . CSS3 -

background: #690;
}
:
transition-property , (
background);
transition-duration (0,3 );
transition-timing-function
(ease).

22

. . CSS3 -

(
)

: ease, linear, ease-in, ease-out, ease-in-out cubicbezier, .
, , , .
, .
,
.
,
.
, : ease ( ) linear
.

23

. . CSS3 -


, ,
, . , ,
, hover.
transition-delay.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition-property: background;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 0.5s;
}
a.foo: hover {
background: #690;
}

24

. . CSS3 -


( ),
transition.
.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 0.3s ease;
}
a.foo: hover {
background: #690;
}
,
.


,
:
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 0.3s ease 0.5s;
}
a.foo: hover {
background: #690;
}
, ,
WebKit. ?

25

. . CSS3 -


, WebKit
Safari Chrome 3.2, Opera
10.5 (http://bkaprt.com/css3/4/)5. Firefox 4.0 (http://bkaprt.com/css3/5/
)6.
,
,
.

5
6

http://www.opera.com/docs/specs/presto23/css/transitions/
https://developer.mozilla.org/en/Css/Css_transitions

26

. . CSS3 -


,
-moz- -o-, transition. ,
, ,
.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.foo: hover {
background: #690;
}
Safari,
Chrome Opera, ,
.

27

. . CSS3 -


, ,
CSS. ,
, :hover. ,
:hover ,
.
, :focus :active.
,
.

:focus.
, , ,
, (, ).
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
a.foo: hover,
a.foo: focus {
background: #690;
}

28

. . CSS3 -


,
. ,
.
(. 2.03).
( ).

. 2.03. : hover

a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: background.3s ease, color 0.2s linear;
-moz-transition: background.3s ease, color 0.2s linear;
-o-transition: background.3s ease, color 0.2s linear;
transition: background.3s ease, color 0.2s linear;
}
a.foo: hover,
a.foo: focus {
color: #030;
background: #690;
}

29

. . CSS3 -


,
, all.
.
background color all.
.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.foo: hover,
a.foo: focus {
color: #030;
background: #690;
}
all ,
:hover, :focus, :active,
, .

30

. . CSS3 -


background color. ,
, width, opacity, position font-size.
( ) W3C (http://bkaprt.com/
css3/6/)7.
.

.

http://www.w3.org/tR/css3-transitions/#properties-from-css-

31

. . CSS3 -

JavaScript?
: CSS-,
JavaScript, ?
jQuery, Prototype, script.aculo.us -
.
, . ,
CSS3,
,
. , CSS-,
,
.
CSS,
, JavaScript-, . ,
.

32

. . CSS3 -


, ,
.
, .
,
. , ,
, (,
).
.

: http:// bkaprt.com/css3/7/8.
, CSS-
,
. .

http://trentwalton.com/2010/03/22/Css3-in-transition/

33

. . CSS3 -

3. Hover -
, CSS3
. ,
.
, .
1. CSS3, .
2. ,
.
3. ,
.
4. CSS-
, . !

-.

34

. . CSS3 -


,
: , ,
, (. 3.01). ,
, .

. 3.01. : ,


1969 ,
.
NASA (National Aeronautics and Space Administration,
. . .),
, Apollo 11 40- ,
, , .
, ,
.
, , ,
. .
.
.
, , ,
, ,
(. 3.02).

35

. . CSS3 -

. 3.02. ( ) ,
Apollo 11.

NASA ,
,
. ?
, 1977 ,
Voyager 1 Voyager 2 , ,
, (. 3.03). -
, ,
. , ,
: , .

36

. . CSS3 -

. 3.03. ,
Voyager 1 2.

, - ,
, ,
. ,
, , ?
, ,
, :
, .
-, ,
. , ,
, .
,
, ,
.
,
, , , , ,
. CSS3 .
37

. . CSS3 -

, ,
. ,
, CSS3.
, .
,
-. http://CSS3exp.com/code.
, CSS3.
, CSS3,
: , ,
. ,
.

38

. . CSS3 -



, - .
, .
CSS3 ,
, , .
, CSS3,
(http://farukat.es).
,
CSS3-
(. 3.04).

. 3.04.

, ,
, ,
. ,
CSS3, .
. 3.05 ,
Internet Explorer 7, CSS3. ,
, - ,
; ,
.

39

. . CSS3 -

. 3.05. IE7 ,

( ) ,
CSS3. Internet Explorer
( CSS3).
, , , IE , .
, ,
Safari, Chrome, Firefox Opera ( ).

40

. . CSS3 -

?
( , ),
(. 3.06): http://
dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com.

. 3.06. http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

, ,
.
, , ,
CSS3, ,
.
- .
, , .

. 3.07. , .
CSS3

41

. . CSS3 -


CSS3 hover .
(. 3.08),
border-radius, text-shadow, RGBA CSS-,
, .

. 3.08. hover CSS3


,
.
<ul id="nav">
<li><a href="#">News</a></li>
<li><a href="#">Things</a></li>
<li><a href="#">Stuff</a></li>
<li><a href="#">Junk</a></li>
<li><a href="#">About</a></li>
</ul>
, ,
.


,
; .
#nav {
float: right;
padding: 42px 0 0 30px;
}
#nav li {
float: left;
margin: 0 0 0 5px;
}
. 3.09. .

42

. . CSS3 -

. 3.09. , CSS-

RGBA
.
RGBA, (255, 255, 255)
70% (0.7),
(. 3.10).

. 3.10. RGBA

#nav li a {
padding: 5px 15px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
. 3.11 . 70%
.

43

. . CSS3 -

. 3.11.

RGBA
RGBA ,
. Safari, Chrome, Firefox, Opera ,
Internet Explorer 9, IE6-8?
. RGBA
,
RGBA.
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
}
, RGBA, ( #ccc ), , RGBA,
RGBA-.
, , : RGB
, RGBA, , RGBA.
text-shadow

, (textshadow). RGBA, :
.
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
44

. . CSS3 -

. 3.12 text-shadow ()
(), Safari. ,
, .

. 3.12. text-shadow () ()

, text-shadow Safari, Chrome,


Firefox Opera. , text-shadow (: IE),
. .
text-shadow :hover.
CSS3.

hover focus
:hover .
RGBA, .
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
#nav li a: hover,
#nav li a: focus {
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
:hover ;
15%. : focus.
, ,
, .
. 3.13 :hover ( :focus). ,
RGBA,
.

45

. . CSS3 -

. 3.13. : hover , RGBA

: border-radius
, : hover,
border-radius.
border-radius
, ,
:
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
#nav li a: hover,
#nav li a: focus {
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
. 3.14 :hover
, border-radius.
Safari, Chrome, Firefox, Opera, IE9. ,
border-radius ,
. , Safari 5
border-radius, -webkit-border-radius, Safari 4.

46

. . CSS3 -

. 3.14. , border-radius

, : border-radius
#nav li a, #nav li a: hover (
)? CSS-,
.


:hover
:focus . :
.
(. 3.15).

. 3.15. , ,

, Safari, Chrome, Firefox (4.0)


Opera, transition
.
#nav li a {
padding: 5px 15px;
font-weight: bold;
color: #ccc;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
47

. . CSS3 -

}
#nav li a: hover,
#nav li a: focus {
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
, ,
. ,
:hover, :focus :active.
all, ,
:hover :focus, color background.
,
:
-webkit-transition:
color 0.3s ease-in-out,
background 0.3s ease-in-out;
-moz-transition:
color 0.3s ease-in-out,
background 0.3s ease-in-out;
-o-transition:
color 0.3s ease-in-out,
background 0.3s ease-in-out;
transition:
color.3s ease-in-out,
background.3s ease-in-out;
, all ,
.


, CSS3
, .
, ,
, .
, CSS3,
, .
.
,
CSS3 , Flash / JavaScript.
CSS- , ,
.
, CSS3-
: transition .
, ,
, : CSS3
, .

48

. . CSS3 -

hover opacity
,
. CSS3 :
, .

:hover: opacity. , opacity CSS3,
, .
RGBA opacity
, .
opacity, ,
: hover ,
. CSS-
, ,
.
, opacity .


. 3.16 -,
,
.

. 3.16. ,

opacity ,
:hover :focus, . CSS-
, .

,
, -:
<ul id="footer-logos">
<li><a href="#"><img src="img/logo-sb.png" alt="SimpleBits
logo" /></a>
</li>
<li><a href="#"><img src="img/icon-feed.png" alt="RSS feed" /
></a>
</li>
<li><a href="#"><img src="img/icon-bitman.png" alt="BitMan" /
></a>
</li>
49

. . CSS3 -

</ul>


PNG-, ,
opacity, CSS.
, -.
PNG,
(. 3.17), .
,
:hover, :focus :active,
.

. 3.17. PNG-



(. 3.18):

. 3.18. PNG,

#footer-logos {
text-align: center;
}
#footer-logos li {
display: inline;
}
opacity,
:hover :focus.
#footer-logos a img {

50

. . CSS3 -

opacity: 0.25;
}
#footer-logos a: hover img,
#footer-logos a: focus img {
opacity: 0.6;
}
25%;
60% (. 3.19). , ?
.
, opacity Safari,
Chrome, Firefox Opera. IE8 opacity,
, .

opacity: IE
, opacity Internet Explorer 9 Beta,
IE,
filter Microsoft.
filter, (
)
. filter
, .
.
, ,
, filter
.
:
#footer-logos a img {
border: none;
opacity: 0.25;
-ms-filter:
"progid:
DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
filter: alpha(opacity = 25); /* IE 57 hack */
}
#footer-logos a: hover img,
#footer-logos a: focus img {
opacity: 0.6;
-ms-filter:
"progid:
DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE 8 hack */
filter: alpha(opacity = 60); /* IE 57 hack */
}
: opacity - IE.
: IE8 filter -ms-filter
.
, IE (. 3.20).
, .
, , , , -
IE ( ).
51

. . CSS3 -

. 3.20. IE7 opacity filter

, opacity,
, .
transition,
opacity. (0,2 )
ease-in-out.
#footer-logos a img {
opacity: 0.25;
-ms-filter:
"progid:
DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
filter: alpha(opacity = 25); /* IE 57 hack */
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
#footer-logos a: hover img,
#footer-logos a: focus img {
opacity: 0.6;
-ms-filter:
"progid:
DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE 8 hack */
filter: alpha(opacity = 60); /* IE 57 hack */
}
opacity
hover
.

52

. . CSS3 -

, hover
, ,
. opacity, ,
,
:hover, :focus :active.
CSS3- , .
opacity ,
- hover. ,
, .
hover CSS3
, ,
, .
,
, .

53

. . CSS3 -

4.
CSS-, CSS-
WebKit, W3C:
1. CSS 2D- (http://www.w3.org/tR/Css3-2d-transforms/);
2. CSS 3D- (http://www.w3.org/tR/Css3-3d-transforms/).
2D-,
. 3D-
, , . 2D-
( ) : Safari 3.2, Chrome 3.2,
Firefox 4.0, Opera 10.5.
, CSS-? W3C :
CSS 2D-
, CSS99.
, . , ,
.
:
. ( )
.

http://www.w3.org/tR/Css3-2d-transforms/#abstract

54

. . CSS3 -

,
-,
(. 4.01). -
.

. 4.01. -

:
<ul class="gallery">
<li><a href="#"><img src="photo-1.jpg" /></a></li>
<li><a href="#"><img src="photo-2.jpg" /></a></li>
<li><a href="#"><img src="photo-3.jpg" /></a></li>
</ul>
. 4.02 , . ,
, . :
CSS, .

55

. . CSS3 -

56

. . CSS3 -

. 4.02. CSS


CSS,
; ( ,
#eee).
ul.gallery li {
float: left;
margin: 0 10px;
padding: 10px;
border: 1px solid #ddd;
list-style: none;
}
ul.gallery li a img {
float: left;
width: 200px;
}
, list-style
li .
200 .
, (. 4.01).

hover
. scale,
, . ,
, 200 , ,
.
Safari, Chrome, Firefox Opera;
. , :
ul.gallery li a: hover img {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
hover, :
(200px ).
scale(2) ; scale(0.5) .
. 4.03 ( Safari). , transform
,
.

57

. . CSS3 -

. 4.03. CSS-

, , transform-origin, ,
: , , ,
(. http://bkaprt.com/css3/8/)10.
, ,
, :
ul.gallery li a: hover img {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}


, .
CSS3- box-shadow,
, .
: ,
.
.
, .
box-shadow text-shadow,
. text-shadow, box-shadow
Safari, Chrome Firefox, (Opera 10+ IE9
Beta box-shadow). .
ul.gallery li a: hover img {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
10

http://www.w3.org/tR/css3-2d-transforms/#transform-origin

58

. . CSS3 -

box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);


}
box-shadow WebKit Mozilla,
, .
hover.
: 4px , 4px , 10px,
( , ).
. 4.04 ,
, hover. ,
.

. 4.04. hover, box-shadow


, , ,
:hover .
Flash JavaScript;
CSS3.
, ; CSS-
:
ul.gallery li {
float: left;
margin: 0 10px;
padding: 10px;
border: 1px solid #ddd;
list-style: none;
}
ul.gallery li a img {
float: left;
width: 200px;
-webkit-transition: webkit-transform 0.2s ease-in-out;
-moz-transition: moz-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
ul.gallery li a: hover img {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
59

. . CSS3 -

-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);


-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
,
scale,
transition transform.

60

. . CSS3 -


,
CSS-.
, CSS-, ,
Flash JavaScript.
, , CSS3
, :
, .
, .
, Internet Explorer ,
, ; .
hover ,
CSS3.

61

. . CSS3 -

, ,
, ,
, ( x, y).
, ,
.


, , ,
, .
rotate :hover:
ul.gallery li a: hover img {
-webkit-transform: scale(1.5) rotate(-10deg);
-moz-transform: scale(1.5) rotate(-10deg);
-o-transform: scale(1.5) rotate(-10deg);
transform: scale(1.5) rotate(-10deg);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
- hover,
10 rotate (. 4.05). Safari, Chrome,
Firefox Opera. 1deg 360deg
; 1deg 360deg .

. 4.05. hover, rotate

, - (
), ,
. :hover
(. 4.06).

62

. . CSS3 -

. 4.06. rotate .

,
CSS3 , ,
. ,

.
, rotate
, . - .

?
rotate
Panic Software (http://www.panic.com/blog),
CSS3-, ,
, (. 4.07).
, (. 4.08).

63

. . CSS3 -

. 4.07. Panic Software CSS3 ,

. 4.08. -

64

. . CSS3 -


CSS-
Outside (http://outsideapp.com), iPhone (. 4.09).

. 4.09. Outside, iPhone, rotate,

(. 4.10),
360 rotate. ( JavaScript
, WebKit
, , CSS.)
,
, iPhone.
, CSS-, .
.
CSS
, , ,
, -.

65

. . CSS3 -

. 4.10. Outside CSS

(skew)
skew x, y . ,
, CSS-.
: 5 x, 30 y (. 4.11):

. 4.11. skew

ul.gallery li a: hover img {


-webkit-transform: scale(1.5) skew(-5deg, 30deg);
66

. . CSS3 -

-moz-transform: scale(1.5) skew(-5deg, 30deg);


-o-transform: scale(1.5) skew(-5deg, 30deg);
transform: scale(1.5) skew(-5deg, 30deg);
}
rotate, skew
. x, y (. 4.12):

. 4.12. 30 , x y

ul.gallery li a: hover img {


-webkit-transform: scale(1.5) skew(30deg);
-moz-transform: scale(1.5) skew(30deg);
-o-transform: scale(1.5) skew(30deg);
transform: scale(1.5) skew(30deg);
}
, ,
, , , skew ; ,
.
, skew ,
CSS3 (. 4.13 4.14).

67

. . CSS3 -

. 4.13. skew
(http://www.paulrhayes.com/experiments/cube/multiCubes.html)

68

. . CSS3 -

. 4.14. The Web Trend Map skew, ,


(http://www.webtrendmap.com/)

(translate)
, translate
, x, y.
, hover
, translate. ,
.
20px 40px
(. 4.15):

. 4.15. translate : hover

ul.gallery li a: hover img {


-webkit-transform: scale(1.5) translate(20px, 40px);
-moz-transform: scale(1.5) translate(20px, 40px);
-o-transform: scale(1.5) translate(20px, 40px);
transform: scale(1.5) translate(20px, 40px);
}
69

. . CSS3 -

/ ,
: , translate (20px, 40px).
, translate
, .
, , ,
clear . translate
, .

70

. . CSS3 -

,
, scale, rotate, skew translate
, .
, ,
, .
- ,
. ,
.

71

. . CSS3 -


- ,
, (. 4.16).

. 4.16. Things We Left on the Moon

,
, , : , ,
. .

, , CSS3, .
, scale, rotate,
opacity , .


,
/ , .
?
CSS3-, (. 4.17).

72

. . CSS3 -

. 4.17. ,

:
, -,
.
<ol id="things">
<li id="things-1">
<a href="#"><img src="img/doughnut.png"/></a>
<h2>1 big doughnut</h2>
</li>
<li id="things-2">
<a href="#"><img src="img/mower.png"/></a>
<h2>1 lawnmower</h2>
</li>
<li id="things-3">
<a href="#"><img src="img/cat.png"/></a>
<h2>1 astro cat</h2>
</li>
<li id="things-4">
<a href="#"><img src="img/recliner.png"/></a>
<h2>1 recliner</h2>
</li>
<li id="things-5">
73

. . CSS3 -

<a href="#"><img src="img/gnome.png"/></a>


<h2>1 magic gnome</h2>
</li>
</ol>
, #things ,
,
:hover .


CSS ,
. ,
, ,
, , ,
.
ol#things li {
position: relative;
float: left;
margin: 0 15px 0 0;
padding: 10px;
background: #444; /* backup for non-RGBA */
background: rgba(255, 255, 255, 0.1);
list-style: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
,
, (. 4.18):

74

. . CSS3 -

. 4.18. ,

ol#things li a {
float: left;
width: 137px;
height: 91px;
background: url(../img/moon-137.jpg)
no-repeat top left;
}


,
, , .
- ;
. position: absolute;
,
. , all.
, ,
, CSS-
.
ol#things li a img {
position: absolute;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
,
, .
75

. . CSS3 -

ol#things li#things-1 a img {


width: 60px;
top: 23px;
left: 26px;
}
ol#things li#things-2 a img {
width: 50px;
top: 20px;
left: 50px;
}
ol#things li#things-3 a img {
width: 80px;
top: 19px;
left: 30px;
}
ol#things li#things-4 a img {
width: 70px;
top: 25px;
left: 45px;
}
ol#things li#things-5 a img {
width: 80px;
top: 20px;
left: 34px;
}
, ,
, .
:hover ,
, ,
.


,
scale, . ,
, , , ,
. ,
:
ol#things li#things-1 a: hover img {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}
25% . . 4.19
: hover; , .

76

. . CSS3 -

. 4.19. : hover scale

:
:
1) ;
2) .

(!). ,
.
5 10 .
, 20%.
ol#things li#things-2 a: hover img {
top: 25px;
left: 60px;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
. 4.20 .
.

. 4.20.

77

. . CSS3 -


CSS- ( CSS3).
, ,
.
left hover ,
,
.
15px , left 30px 45px (. 4.21):

. 4.21. ,

ol#things li#things-3 a: hover img {


left: 45px;
}
. CSS- (
).


.
rotate.
, .
WebKit, Mozilla Opera
transform .
ol#things li#things-4 a: hover img {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
,
( ), , , ,
(. 4.22).

78

. . CSS3 -

. 4.22. rotate


,
. - , .
opacity,
hover , .
,
opacity , ,
.
:
ol#things li#things-5 a: hover img {
opacity: 0.4;
}
. 4.23 , :hover 40%
.
: , Internet Explorer,
filter, .

. 4.23. opacity : hover

79

. . CSS3 -

, , CSS3,
, ,
.
, ,
. , ,
.

80

. . CSS3 -

:
,
, CSS3, ,
.
- : , ,
. ,
, , ,
.
, CSS-.
, , ,
, .

-,
, : ,
,
( , Safari, Chrome, Firefox Opera):
*:hover {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
CSS3- :
, 180 . .
(. 4.24).
,
.
! !
.

81

. . CSS3 -

. 4.24. , ,
hover

82

. . CSS3 -

5.
CSS3?,
: !

, -.
,
,
,
. , , ,

, .
, , ,
CSS3- (http://bkaprt.com/
css3/9/)11. , ,
Safari, Chrome, Firefox, Opera IE9 Beta.
border-radius, box-shadow, , RGBA opacity
, .
, ,
.
.
,
;
.
, .

11

http://www.w3.org/tR/Css3-background/

83

. . CSS3 -

- , ,
body,
.
PNG, .
, ,
(. 5.01).

. 5.01. , PNG ,

,
:
,
1982 Moon Patrol.
,
.
.
, 1940- .12
,
. Silverback (http://silverbackapp.com),
- Clearleft (. 5.02).

12

http://en.wikipedia.org/wiki/Parallax_scrolling

84

. . CSS3 -

. 5.02. Silverback

, ,
, . (
, .)
, , ,
:
.

85

. . CSS3 -

:
? 2008 Think Vitamin
,
Silverback (http://bkaprt.com/css3/10/)13.
PNG ,
.
, body, #midground,
#foreground.
:
<body>
<div id="midground">
<div id="foreground">
<! page content here >
</div>
</div>
</body>
CSS-
:
body {
background: url(vines-back.png) repeat-x 20% 0;
}
#midground {
background: url(vines-mid.png) repeat-x 40% 0;
}
#foreground {
background: url(vines-front.png) repeat-x 150% 0;
}
, .
, CSS3.
,
, .

13

http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/

86

. . CSS3 -

: CSS3
PNG-,
, . body,
, ,
.
. 5.03 :
1) (clouds.png);
2) - (space-bg.png);
3) (stars-1.png);
4) (stars-2.png).

. 5.03. PNG-,


body
CSS3:
body {
background:
url(../img/stars-1.png) repeat-x fixed -130% 0,
url(../img/stars-2.png) repeat-x fixed 40% 0,
url(../img/space-bg.png) repeat-x fixed -80% 0,
url(../img/clouds.png) repeat-x fixed 100% 0;
background-color: #1a1a1a;
87

. . CSS3 -

}
,
, ( ,
, ).
, (
),
, . ,
fixed.
#1a1a1a background-color
.
(. 5.04). , .
body,
,
.

. 5.04. PNG- ,


, Safari 1.3+,
Chrome 2+, Firefox 3.6+, Opera 10.5+ IE9 Beta.
CSS-, .
CSS3
- : ,
,
.


, ,
background . backgroundcolor .
88

. . CSS3 -

. 5.05 , IE7: ,
- , background-color.

. 5.05. IE7 , , -
, background-color

, , , ,
. ,
(, IE7 8), .
(IE
).
body {
background: url(../img/space-bg.png) repeat-x fixed -80% 0;
background:
url(../img/stars-1.png) repeat-x fixed -130% 0,
url(../img/stars-2.png) repeat-x fixed 40% 0,
url(../img/space-bg.png) repeat-x fixed -80% 0,
url(../img/clouds.png) repeat-x fixed 100% 0;
background-color: #1a1a1a;
}
,
,
, .
space-bg.png
(. 5.06), ,
. .

89

. . CSS3 -

. 5.06. IE7

90

. . CSS3 -


,
. , CSS3-,
Safari, Chrome, Firefox Opera, IE9 Beta.
,
( ).
, ,
background .
, .
,

. ,
.

91

. . CSS3 -

6.
-, .
, ,
CSS3.

, .
, CSS3,
?
: ,
, . ,
. , CSS
( ), ,
: .
CSS3 ,
, ;
.
CSS3,
:
1) ;
2) CSS-;
3) CSS-.
- ,
, CSS3 .
,
(. 6.01).

92

. . CSS3 -

. 6.01. , ,

93

. . CSS3 -


HTML :
, .
<form action="/" id="thing-alerts">
<fieldset>
<label for="alerts-name">Your Name</label>
<input type="text" id="alerts-name" />
</fieldset>
<fieldset>
<label for="alerts-email">Your Email</label>
<input type="text id="alerts-email" />
</fieldset>
<fieldset>
<input type="submit" value="Subscribe" />
</fieldset>
</form>
. 6.02 , ,
( Safari).

. 6.02. , Safari;

94

. . CSS3 -


CSS, , ,
fieldset label
.
#thing-alerts fieldset {
margin: 0 0 10px 0;
}
#thing-alerts label {
display: block;
font-weight: bold;
line-height: 1.4;
color: #666;
color: rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px #fff;
}
. 6.03, , 10px
fieldset display: block,
. 60%
, RGBA.
text-shadow,
, .

. 6.03. fieldset label

10px fieldset, -
10px (
).
95

. . CSS3 -

: ,
,
.
class="last"
CSS3-: last-child, ,
:
#thing-alerts fieldset {
margin: 0 0 10px 0;
}
#thing-alerts fieldset label {
display: block;
font-weight: bold;
line-height: 1.4;
color: #666;
color: rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px #fff;
}
#thing-alerts fieldset: last-child {
margin: 0;
}
, :last-child IE8 ,
, , ,
.
. 6.04 , :
fieldset :last-child.

. 6.04. , fieldset

96

. . CSS3 -

CSS3-
, :last-child, , CSS3
.
CSS selectors
explained (http://bkaprt.com/css3/11/)14, ,
. ,
CSS contents and browser compatibility
- (http://bkaprt.com/css3/12/)15 CSS Compatibility and Internet Explorer
Microsoft (http:// bkaprt.com/css3/13/)16, , .

14

http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
http://www.quirksmode.org/css/contents.html
16
http://msdn.microsoft.com/en-us/library/cc351024(Vs.85). aspx
15

97

. . CSS3 -


, . CSS2.1,
input type="text" (
input type="submit").
:
#thing-alerts input
input ( , ).
:
#thing-alerts input[type="text"]
.
:
,
, - .
.
, IE7 ,
IE6. , ,
. IE6 ,
.
width, padding font-size,
border, background-color
border-radius.
#thing-alerts fieldset input[type="text"] {
width: 215px;
padding: 5px 8px;
font-size: 1.2em;
color: #666;
border: none;
background-color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
. 6.05 , Safari (
Firefox Opera). ,
; ,
.

98

. . CSS3 -

. 6.05.

99

. . CSS3 -

CSS3
, , ,
CSS3. ,
. , ?
CSS Safari 4+, Chrome 2+ Firefox
3.6+, -
.
CSS- ,
. background-image, liststyle-image .
CSS- Safari Firefox.
( ), , , Firefox.
,
:
, .
, .
: ,
, . .
, ,
; WebKit Mozilla:
#foo {
background-image: webkit-gradient(linear, 0% 0%, 0% 100%,
from(#fff), to(#999));
background-image: moz-linear-gradient(0% 100% 90deg, #fff,
#999);
}
; .
, ,
, (. 6.06, http://bkaprt.com/
css3/14/).17

17

http://www.westciv.com/tools/gradients/index-moz.html

100

. . CSS3 -

. 6.06. CSS-,

, ;
Safari Firefox.
. , (
).
,
; : http://bkaprt.com/css3/15/18
, ,
, (. 6.07).
:
#thing-alerts fieldset input[type="text"] {
width: 215px;
padding: 5px 8px;
font-size: 1.2em;
color: #666;
border: none;
background-image: webkit-gradient(linear, 0% 0%, 0% 12%,
from(#999), to(#fff));
background-image: moz-linear-gradient(0% 12% 90deg, #fff,
#999);
background-color: #fff;
18

http://snook.ca/archives/html_and_css/multiple-bg-css-gradients

101

. . CSS3 -

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}

. 6.07. , . ,

, CSS .
, -webkit
-moz. , -
(#999) (#fff) 12% .
background-image,
Safari Firefox.
. 6.08 :
. .

102

. . CSS3 -

. 6.08. CSS-

, CSS-,
background-image; . .
, CSS-,
.

.

103

. . CSS3 -

CSS3
,
CSS3. ,
, -
CSS (. 6.09).
CSS3 ,
.
, ,
. , ,
.
, ,
, . 6.09.

. 6.09. ( Safari); , CSS3.


!


, Helvetica,
, .
#thing-alerts input[type="submit"] {
padding: 8px 15px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
background-color: #fff;
}
, , . 6.10.
- .

104

. . CSS3 -

. 6.10. ,

border-radius, (. 6.11).
#thing-alerts fieldset input[type="submit"] {
padding: 8px 15px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
background-color: #fff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
-o-border-radius: 23px;
border-radius: 23px;
}

105

. . CSS3 -

. 6.11. border-radius

, 23px.


- (#bbb)
(#fff), . ,
Safari, Chrome Firefox.
#thing-alerts input[type="submit"] {
padding: 8px 15px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
background-image: webkit-gradient(linear,0% 0%, 0% 100%,
from(#fff), to(#bbb));
background-image: moz-linear-gradient(0 100% 90deg, #bbb,
#fff);
background-color: #fff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
-o-border-radius: 23px;
border-radius: 23px;
106

. . CSS3 -

}
. 6.12 , Safari.
.
.

. 6.12. CSS-

text-shadow
, ,
.
#thing-alerts input[type="submit"] {
padding: 8px 15px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
background-image: webkit-gradient(linear,0% 0%, 0% 100%,
from(#fff), to(#bbb));
background-image: moz-linear-gradient(0 100%90deg, #fff,
#bbb);
background-color: #fff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
107

. . CSS3 -

-o-border-radius: 23px;
border-radius: 23px;
}
RGBA, 85%,
.
.
. 6.13 , .

. 6.13. text-shadow, ,


CSS3, ,
(box-shadow), .
.
, box-shadow, ,
, :
#thing-alerts input[type="submit"] {
padding: 8px 15px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
background-image: webkit-gradient(linear, 0% 0%, 0% 100%,
from(#fff), to(#bbb));
background-image: moz-linear-gradient(0% 100% 90deg, #bbb,
#fff);
background-color: #fff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
-o-border-radius: 23px;
border-radius: 23px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
108

. . CSS3 -

-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);


box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
. 6.14 , Safari, boxshadow, 1px , 2px.
RGBA,
.

. 6.14. , : -

,
. CSS3 ,
, ,
.
CSS3 , ,
. .

109

. . CSS3 -

?
Internet Explorer 7 CSS3,
(. 6.15). !
, CSS3, ; ,
, . .

. 6.15. IE7 .

110

. . CSS3 -

box-shadow focus
,
box-shadow , :focus.
,
, CSS3-, .
:focus
.
(, ,
. .)
#thing-alerts input[type=text]: focus {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
-moz-box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
box-shadow: 0 0 12px rgba(51, 204, 255, 0.5);
}
box-shadow,
, : focus.
. 6.16: ,
.
, box-shadow? ,
: focus. , ,
: , .

. 6.16. box-shadow : focus

111

. . CSS3 -

CSS-

box-shadow:
, , , .
CSS-, ,
WebKit.
WebKit , CSS- (
CSS- ) WebKit
W3C (http://bkaprt.com/css3/16/)19.

. Safari Chrome, Firefox Opera;
IE9 .
( ). ,
, ,
, (
) .
CSS-
, WebKit,
. : focus
, , .


CSS-
. ,
, ,
.
keyframe @- CSS. CSS-,
CSS-
(
to from).
,
, ,
: focus.
pulse : (0%),
(50%) (100%).
(box-shadow), 20 90% 20%. ,
, , ,
( , WebKit).
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
50% {
19

http://www.w3.org/tR/Css3-animations/

112

. . CSS3 -

-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.9);


}
100% {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
}
WebKit .

. , CSS-
Safari Chrome ,
CSS, -webkit-.

keyframe
CSS- , keyframe
, animation.
, box-shadow ,
.
keyframe , ,
. ,
.
#thing-alerts input[type=text]: focus {
-webkit-animation: pulse 1.5s infinite ease-in-out;
}
,
, .
.
, . . 6.17 ,
: box-shadow,
, .

113

. . CSS3 -

. 6.17. , ,
: focus

animation,
.
:
#thing-alerts input[type="text"]: focus {
-webkit-animation-name: pulse;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
114

. . CSS3 -


hover
,
. ,
pulse hover focus, Wii .
: hover focus
animation , :
#thing-alerts input[type="submit"]: hover,
#thing-alerts input[type="submit"]: focus {
-webkit-animation: pulse 1.5s infinite ease-in-out;
}
pulse, ,
(box-shadow) .
, (. 6.18), ,
, ,
.

115

. . CSS3 -

116

. . CSS3 -

. 6.18. ,

?
CSS-
: WebKit.
, CSS3 ,
Firefox, Opera IE9. ,
CSS- . ,
.
CSS-
WebKit,
. CSS- ,
, . ,
, ,
, ,
. ,
.

117

. . CSS3 -


,
CSS3-.

, ,
CSS , , CSS3,
, .

118

. . CSS3 -

.
( )
CSS3 , . , , ,
,
, , ,
, .
CSS3 ,
,
. (
) , -
, .
, : ,
CSS3 . , .
CSS3
. , ,
, , ,
, ,
CSS.

119

. . CSS3 -

,
?
, CSS3, ,
. CSS3
?
: ,
. , ,
CSS3. , .
, CSS3.
CSS3 ,
. ,
, , ,
: , .
, .

, , , . ,
, , .
, , ? ,
. .

120

. . CSS3 -

?
? CSS3 , ,
. ,
, , -
.
.
WebKit, Mozilla Opera.
, . , , ,
,
CSS3
.
IE9 Beta. , . ,
Internet Explorer CSS3, .
CSS3 ,
(
). , ,
,
. , ,
. , .

121

. . CSS3 -


CSS3.info , :
http://www.CSS3.info
, :
http://www.CSS3.info/preview
, ,
, , , ,
( , . .),
:
http://www.w3.org/style/CSS/current-work
, ,
:
http://www.w3.org/tR/CSS3-roadmap
,
, .
, , ,
:
http://webkit.org/blog
http://blog.mozilla.com
http://dev.opera.com/articles/css
http://blogs.msdn.com/b/ie
,
, :
http://caniuse.com
http://www.quirksmode.org/css/contents.html
http://html5readiness.com URL ;
CSS3.
,
, .
:
http://CSS3generator.com
http://CSS3please.com
http://gradients.glrzad.com
http://tools.westciv.com
http://border-radius.com
, JavaScript CSS3
. ,
CSS3, :
http://www.modernizr.com
http://ecsstender.org
http://selectivizr.com/ IE5.58.
, ! .
Dream big and implement small.

122

. . CSS3 -

A Book Apart
- ,
. , ,
. -
-,

.
,
. , :
, , .

123

. . CSS3 -

-, , , ,
. SimpleBits, -.
-, , YouTube,
MTV, Google, Yahoo, ESPN, Fast Company, Blogger . ,
, -.
Dribbble, ,
, .
Corkd .

124

. . CSS3 -

: Handcrafted CSS (New Riders)20, Bulletproof Web


Design21, Second Edition (New Riders) Web Standards Solutions, Special Edition (Friends of
ED). ( .
. .) .

20
21

2012.

: . CSS . .: , 2011.
: . -. . .: ,

125

Оценить