«CSS3 для веб-дизайнеров», Дэн Сидерхолм (2012)

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;
}
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;
-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;
-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);
}
#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);
-webkit-border-radius: 14px;
-moz-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);
-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:
-o-transition:
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
.
:
border: none;
opacity: 0.25;
-ms-filter:
"progid:
DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
filter: alpha(opacity = 25); /* IE 57 hack */
}
opacity: 0.6;
-ms-filter:
"progid:
}
: 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.
opacity: 0.25;
-ms-filter:
"progid:
-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;
}
opacity: 0.6;
-ms-filter:
"progid:
}
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>
</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.
, ,
, :
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
}

, .
CSS3- box-shadow,
, .
: ,
.
.
, .
box-shadow text-shadow,
. text-shadow, box-shadow
Safari, Chrome Firefox, (Opera 10+ IE9
Beta box-shadow). .
-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;
}
59
. . CSS3 -

}
,
scale,
transition transform.
60
. . CSS3 -

,
CSS-.
, CSS-, ,
Flash JavaScript.
, , CSS3
, :
, .
, .
, Internet Explorer ,
, ; .
hover ,
CSS3.
61
. . CSS3 -
, ,
, ,
, ( x, y).
, ,
.

, , ,
, .
rotate :hover:
-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);
}
- 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

-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

-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

-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;
-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;
}
width: 50px;
top: 20px;
left: 50px;
}
width: 80px;
top: 19px;
left: 30px;
}
width: 70px;
top: 25px;
left: 45px;
}
width: 80px;
top: 20px;
left: 34px;
}
, ,
, .
:hover ,
, ,
.

,
scale, . ,
, , , ,
. ,
:
ol#things li#things-1 a: hover img {
}
25% . . 4.19
: hover; , .
76
. . CSS3 -
. 4.19. : hover scale
:
:
1) ;
2) .

(!). ,
.
5 10 .
, 20%.
top: 25px;
left: 60px;
}
. 4.20 .
.
. 4.20.
77
. . CSS3 -

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

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

.
rotate.
, .
WebKit, Mozilla Opera
transform .
-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 , ,
.
:
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;
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;
from(#999), to(#fff));
background-image: moz-linear-gradient(0% 12% 90deg, #fff,
#999);
18
http://snook.ca/archives/html_and_css/multiple-bg-css-gradients
101
. . CSS3 -
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;
}
, , . 6.10.
- .
104
. . CSS3 -
. 6.10. ,
border-radius, (. 6.11).
#thing-alerts fieldset input[type="submit"] {
padding: 8px 15px;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
}
105
. . CSS3 -
. 6.11. border-radius
, 23px.

- (#bbb)
(#fff), . ,
Safari, Chrome Firefox.
padding: 8px 15px;
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);
106
. . CSS3 -
}
. 6.12 , Safari.
.
.
. 6.12. CSS-
text-shadow
, ,
.
padding: 8px 15px;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
background-image: webkit-gradient(linear,0% 0%, 0% 100%,
background-image: moz-linear-gradient(0 100%90deg, #fff,
#bbb);
107
. . CSS3 -
}
RGBA, 85%,
.
.
. 6.13 , .
. 6.13. text-shadow, ,

CSS3, ,
(box-shadow), .
.
, box-shadow, ,
, :
padding: 8px 15px;
font-weight: bold;
line-height: 1;
color: #444;
border: none;
background-image: moz-linear-gradient(0% 100% 90deg, #bbb,
#fff);
-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% {
}
50% {
19
http://www.w3.org/tR/Css3-animations/
112
. . CSS3 -

}
100% {
}
}
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

«CSS3 для веб-дизайнеров», Дэн Сидерхолм (2012)

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

«CSS3 для веб-дизайнеров», Дэн Сидерхолм (2012)

Загружено:

Авторское право:

Доступные форматы

CSS3 -

. 3.08. hover CSS3

, text-shadow Safari, Chrome,

. 3.13. : hover , RGBA

, Safari, Chrome, Firefox (4.0)

. 3.20. IE7 opacity filter

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

. 4.04. hover, box-shadow

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

. 4.05. hover, rotate

. 4.07. Panic Software CSS3 ,

. 4.09. Outside, iPhone, rotate,

. 4.10. Outside CSS

ul.gallery li a: hover img {

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

ul.gallery li a: hover img {

. 4.14. The Web Trend Map skew, ,

. 4.15. translate : hover

ul.gallery li a: hover img {

. 4.16. Things We Left on the Moon

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

ol#things li#things-1 a img {

. 4.19. : hover scale

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

. 4.23. opacity : hover

. 6.03. fieldset label

. 6.09. ( Safari); , CSS3.

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

. 6.16. box-shadow : focus

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

: Handcrafted CSS (New Riders)20, Bulletproof Web

Вам также может понравиться