3.6. CSS3.

CSS3 - HTML ,
-
CSS2.1.
, ,
,
CSS3
.

CSS3 :

;
;
;
;
;
.

,
.
IE9+, Firefox 3.6+, Opera 10+, Chrome
12+, Safari 5+. .

CSS3 ,
css3pie (http://css3pie.com)[14].

CSS3
background-size,
CSS.
.

267
 , ,
.

#element1 {
background-image: url("fon.jpg");
background-size: 350px 450px;
}
#element2 {
background-image: url("fon2.jpg");
background-size: 50% 50%;
}

,
,
.
,
background-image.
(..
).

,
( , background-
position: bottom right, center; bottom right ,
center )[14].

#element1 {
background-image:url(img1.jpg),url(img2.jpg);
background-position: bottom right, center;
background-size: 200px 50px,100% 100%;
background-repeat: no-repeat, no-repeat;
}
body
{
background-image:url(img_flwr.gif),

268
url(img_tree.gif);
}

,
.
,
WEB 2.0. CSS3 border-
radius .

div
{
border:2px solid;
border-radius:25px;
}

border-radius ,
.
,
border-top-left-radius, border-top-right-radius, border-bottom-
left-radius border-bottom-right-radius .
,
. CSS3
,
border-image.
: ,
, , . ,
:
-;
, 9
( , , ,
..); ;

269
 (repeat), (round)
(stretch), .
,

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round;
-o-border-image:url(border.png) 30 30 round;
}

, border-image Firefox,
Chrome Safari 6 (IE ), Opera
-o-border-image, Safari 5 -
webkit-border-image.
,
.

270


CSS 3 web-
,
.
box-shadow
,
.

box-shadow: _
_ _ _
;

3 box-
shadow: ,
, - .

box-shadow: 5px 5px black;

box-shadow: 5px 5px 5px 3px black;

, inset ,
, ().

box-shadow: 0px 0px 5px 3px black inset;

,

.
text-shadow.

:

271
 ( ),
.

h1 { text-shadow: 5px 5px 5px #FF0000;}

CSS3 word-wrap ,
, ,
.

word-wrap: normal|break-word;
div {word-wrap:break-word;}

CSS
,
. CSS3
,
, @font-face.

40. .

\ Internet Firefox Chrome Opera Safari

Explorer
9+
WOFF (Web Open Font + + + + +
Format)
TTF (True Type Fonts) - + + + +
OTF (OpenType Fonts)
SVG / - - + + +
EOT (Embedded + - - - -
OpenType)

272

,
.

@font-face {
font-family: sansation; /* */
src:url('sansation.ttf'), /*
.ttf */
url('sansation.eot') /*
.eot */
}

font-family ,
.

. @font-face
font-style:italic font-weight:bold
.

/* */
@font-face{
font-family:sansation;
src:url('sansation.ttf'),url('sansation.eot')
}
/* */
@font-face{
font-family:sansation; font-style:italic;
src:url('sansationitalic.ttf'),url('sansationitali
c.eot');
}
/* */
p {font-family:sansation;}

273


CSS 3 web-
. column-count
,
, column-width - , column-rule - ,
,
column-gap
.

div {
column-count:4;
column-gap:50px;
column-rule:2px dotted #7F0055;
column-width:150px;
}

:
Internet Explorer 9 ,
Chrome Safari
-webkit, Firefox -moz.

CSS3

web-
transform.
.
, translate(x,y)
.
rotate() -
.

Div {transform: rotate(30deg);}

274

scale(x,y),
skew(x,y).

Div {transform: skew(30deg,20deg);}

41.
41. CSS3.

.


translate(x,y) Px,
.
translateX(x) e .
translateY(y) f .
scale(x,y)

scaleX(x) a
scaleY(y) d
rotate deg,
()
skew(x,y)

skewX(x) b
skewY(y) c
matrix(a,b,c,d,e,f) 6

: transform
(IE10+, Firefox, Opera), Chrome Safari
-webkit-, IE 9 -
ms-. IE 8 transform .

275


CSS3 . ,
IE filter:alpha,

.

Internet Explorer opacity:x, x
, 0.0 (
) 1.0 ( ).
Internet Explorer
filter:alpha(opacity=x), x ,
0 ( ) 100 (
).
, ,
20%

#element { opacity:0.8; filter:alpha(opacity=80);}

transition.
CSS3 transition ,
, CSS
.
, 4 .

#element
{width:200px; transition: width 4s;}
#element:hover
{width:500px;}

,
.

276
#element
{
background-color:#E869AA; color:#000; width:200px;
transition: color 4s, width 4s,
background-color 4s;
}
#element:hover
{ color:#FFFFFF; width:400px;
background-color:#880045;
}

, transition
. transition-property
CSS , .
transition-duration
( 0). transition-
timing-function ,
(
'ease').

transition-delay (
0)[5].

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari and Google Chrome*/
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;

277
-webkit-transition-delay:2s;
}

. Internet Explorer 10, Firefox, Chrome, Opera

transition, Safari Chrome
-webkit-.

1. CSS3?
2. ,
CSS3, ?
3. ,
, ?
?

18

CSS3 ,
:
. 1.
,

,

,

,

,
5
. .

278
 . 2.
.
30%,
10%, 25
.
,
.
,

,
.

279