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

32.988.

02-018
004.738.8
35

.
35 CSS. . .: , 2016.
336 .: . ( OReilly).
ISBN 978-5-496-02082-4
, ,
. ,
-.
-,
.
, , CSS A .
, CSS .
, , ,
, , -
CSS, ,
. CSS.

12+ ( 29 2010 . 436-.)

32.988.02-018
004.738.8

OReilly. .

.

, , , -
. , ,

, .

ISBN 978-1449372637 . 2016 Piter Press Ltd.


ISBN 978-5-496-02082-4 Authorized Russian translation of the English edition of CSS Secrets
ISBN 9781449372637 2015 Lea Verou
This translation is published and sold by permission of OReilly Media, Inc., which
owns or controls all rights to publish and sell the same
ISBN 978-5-496-02082-4 , 2016
, , 2016
OReilly, 2016

............................................................................................. 8

................................................................................................. 10

........................................................................................ 12
.............................................................................................................. 14
.......................................................................................... 15
....................................................................................................................... 15
........................................................................ 17

1 ............................................................................................ 25
-: ?............................................................................................ 26
CSS-............................................................................................. 34

2 ...................................................................................... 49
1. ......................................................................................................... 50
2. ...................................................................................................................... 53
3. ......................................................................................... 57
4. ......................................................................................................... 61
5. ........................................................................................................................... 64
6

6. ...................................................................................................... 73
7. () ..................................................................................................... 85
8. .................................................................................. 90

3 ............................................................................................... 97
9. ........................................................................................................................ 98
10. ............................................................................................................... 105
11. ........................................................................................... 109
12. ................................................................................................................... 114
13. .............................................................................................. 125
14. ...................................................................................... 131

4 ..................................................................... 145
15. .......................................................................................................... 146
16. ........................................................................ 150
17. .................................................................................................. 154
18. ....................................................................................... 160
19. .................................................................................................. 169

5 ........................................................................ 179
20. ...................................................................................................... 180
21. .................................................................................................... 183
22. ..................................................................................... 188
23. ........................................................................... 192
24. ................................................................................................................................ 194
25. ............................................................................................... 197
26. ............................................................................................... 203
27. ............................................................................... 207
28. ....................................................................................................................... 216

6 ................................................. 223
29. ........................................................................... 224
30. , ........................................... 229
31. .......................................................................................................... 233
32. ............................................................... 238
33. ................................................................... 243
7

34. ...................................................................................................... 247


35. ..................................................................... 253

7 ........................................................................... 263
36. ........................................................................................ 264
37. .......................................................................... 267
38. .................................................... 271
39. , ................................................................ 277
40. ......................................................................................... 281
41. ......................................................................................... 288

8 .................................................................... 293
42. ........................................................................................................ 294
43. ........................................................................................................ 306
44. ................................................................................................................................ 311
45. ...................................................................................................... 315
46. ......................................................................................... 321
47. .......................................................................................... 326



http://goo.gl/jjlYmZ.

(19522013),
.

, !
CSS,
, ,
, , .
, -
. ,
,
,
, -
, , !
-. . ,
!
CSS . -
,
, ,
, ,
, -, -
.
, , ,
, . CSS-
, -
, , ,
. , :
9

, ,
,
( ).
CSS -
, ,
, .
,
. , -
, , ,
. CSS -
, , ,
, .
, , ,
,
, . CSS
, , , ! -
, - .
,
, ,
, . ,
,

CSS.
. ,
, CSS
, ,
. , , ,
!
, .

CSS ,
JavaScript 2004 . -
,
80 W3C ( ) -
, ,
. CSS
,
. CSS W3C,
,
CSS, .
CSS
.
2009 CSS
. ,
CSS.
, . 2015 :
, , -
, .
, , -
, ,
, , -

.
CSS
. , -
CSS, , ,
DRY ,
, .
.
, , -
CSS A . , CSS
. ,
11

, DRY -
, Dont Repeat
, -
Yourself
. -
,

CSS, ,
, . - -
:
CSS.
-
CSS - , -
.
, . -
, CSS-
. DRY
. -
,
DRY WET,
, We Enjoy Typing
, - ( )
, . Write Everything Twice
, ( ).
, ,
,
-
. ,

,
, , .

,
, .
:
, ,
.
(http://lea.verou.me), Twitter (http://twitter.com/leaverou)
, -
! , (http://
github.com/leaverou), , ;

, -
, (Damian Wielgosik)
(Pawe Czerski), -
Front-Trends 2010 .
(Vasilis Vassalos), 2010
-
.
( , , );
CSS,
,
- CSS ;
, (Mary Treseler) (Meg Foley),
-
, (
, );
(Kara Ebrahim), -
,
CSS,
PDF, ;
: (Elika Etemad),
(Tab Atkins), (Ryan Seddon), (Elisabeth
13

Robson), (Ben Henick), (Robin Nixon)


(Hugo Giraudel). -
,
;
(Eric Meyer) , -
;
(David Karger), -
, MIT, ,
-.
, ;
(Miltiades Komvoutis),
. ,
CSS, -
, C++ ;
(Stratis Veros)
(Maria Brere),
. ,
(Leonie) (Phoebe), ,
;
(Maria Verou), , -
. 27 , ,
. -
: ,
1970- ,
, MIT,
. , , , -
. ,
. .

,
Creative Commons;
(
). CC, ,
-, :

House Made Sausage from Prairie Grass Cafe, Northbrook,


Kurman Communications, Inc

http://flickr.com/kurmanphotos/7847424816

Cats that Webchick Is Herding, Kathleen Murtagh

http://flickr.com/ceardach/4549876293

Stone Art, Josef Stuefer

http://flickr.com/josefstuefer/5982121

A Field of Tulips, Roman Boed

http://flickr.com/romanboed/867231576

Resting in the Sunshine, Steve Wilson

http://flickr.com/pokerbrit/10780890983

Naxos Island, Greece, Chris Hutchison

http://flickr.com/employtheskinnyboy/3904743709


CSS -
. ,
-
CSS . , ,
,
, :
, CSS 2.1
. , -
. ,
. -
!important ,
, . -
.
, ,
;

CSS3 , ,
, .
, ,
, box-shadow .
-
;
SVG, , -
, ;
JavaScript, , ,
,
;
CSS , ,
;
16

: ,
, , .
,
, , -
,
CSS ,
, . (,
, CSS 2.1,
.) :


box-shadow, CSS, -

, - ,
, . ,
, , -
,
,
.
, CSS
.
, . -

, CSS
. CSS- ,
, , SVG, WebGL/OpenGL JavaScript Canvas
API, . CSS
, . , -
CSS-
, , ,
CSS !
, . -
, CSS,
- ,
CSS-. -
,
-,
.
17

47 ,
. -
, -
,
.

- .
,
. ,
,
. . .1.
,
, .

.
, , -
,
CSS.
, -
(-
, , ,
..)
:
?
, ,

.

CSS, - ,
, .
,
.

!
, - .
,

- .
( ,
?) -
, , -
, -
. .
..1,
.
18

,
(, #f06).
:

background: url("adamcatlace.jpg");

HTML
<figure>
<img src="adamcatlace.jpg" />
<figcaption>Sir Adam Catlace</figcaption>
</figure>

, , CSS,
. ,
, - ,
({}).
JavaScript
.
, $$(), , -
,
CSS. :

JS
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}

.

, ,
, , , -
CSS.
, ,
.
19

,
URL-
http://play.csssecrets.io. :

!
http://play.csssecrets.io/polka

-
!,
.

:
,
, , -
URL- . ,

, .

.

, -
,
. , -
, ,
. ,
, -
, ,
, ,
URL-, , !. -
,
, .
.

!
http://play.csssecrets.io/test-conic-gradient
20

,
:


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
Selectors: http://w3.org/TR/selectors
Scalable Vector Graphics: http://w3.org/TR/SVG

,
. -
,
CSS 2.1 (http://w3.org/TR/CSS21),
. , ,
CSS 2.1,
.


,
. -
,

, . ,

, ,
.

,
.
,
, ,
. , :
, -
, .
-,
. :
21

Can I Use? (http://caniuse.com)

WebPlatform.org

Mozilla Developer Network (http://developer.mozilla.org)

Wikipedia Comparison of Layout Engines (Cascading Style Sheets)


(http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets))
, -
, . ,

.
, .
,

. -
. ,
yellow red
:

background: linear-gradient(90deg, yellow, red);

, -
, :

background: -moz-linear-gradient(0deg, yellow, red);


background: -o-linear-gradient(0deg, yellow, red);
background: -webkit-linear-gradient(0deg, yellow, red);
background: linear-gradient(90deg, yellow, red);

-
, , , , -

,


CSS, - ,
, .
.
, ,
- ,
. ,
, , -
. , , , ,
, .
22


( rgb(255, 128, 0)):

background: rgb(255, 128, 0);


background: -moz-linear-gradient(0deg, yellow, red);
background: -o-linear-gradient(0deg, yellow, red);
background: -webkit-linear-gradient(0deg, yellow, red);
background: linear-gradient(90deg, yellow, red);


.
, Modernizr (http://modernizr.com),
textshadow no-textshadow (<html>),
,
( -
), :

h1 { color: gray; }

.textshadow h1 {
color: transparent;
text-shadow: 0 0 .3em gray;
}

, , -
, @supports, Modernizr.
, :

h1 { color: gray; }

@supports (text-shadow: 0 0 .3em gray) {


h1 {
color: transparent;
text-shadow: 0 0 .3em gray;
}
}

@supports -
. ,
, , , -
@supports,
.
, JavaScript
, , , -
, Modernizr.
23

, , , ,
, element.style :

JS
var root = document.documentElement; // <html>

if ('textShadow' in root.style) {
root.classList.add('textshadow');
}
else {
root.classList.add('no-textshadow');
}

,
:

JS
function testProperty(property) {
var root = document.documentElement;

if (property in root.style) {
root.classList.add(property.toLowerCase());
return true;
}

root.classList.add('no-' + property.toLowerCase());
return false;
}

,
, .
, ,
-:

JS
var dummy = document.createElement('p');
dummy.style.backgroundImage = 'linear-gradient(red,tan)';

if (dummy.style.backgroundImage) {
root.classList.add('lineargradients');
}
else {
root.classList.add('no-lineargradients');
}
24

JS
function testValue(id, value, property) {
var dummy = document.createElement('p');
dummy.style[property] = value;

if (dummy.style[property]) {
root.classList.add(id);
return true;
}

root.classList.add('no-' + id);
return false;
}

@rules ,
: CSS, ,
, , ,
, .
, ,
CSS, ,
.
1
-: ?

, W3C (World
Wide Web Consortium,
) .
,

W3C (W3C Working Groups)
. ,
W3C :
. 1.1.
: .
, ( )
( , W3C.
W3C)
CSS, ,

CSS CSS Working Group,
CSS, CSS WG.
CSS 98 , :
86 - W3C (88%);

7 , (7%);

5 W3C (5%).

, (88%) -
- W3C. ,
, -, ,
.., -
-.
W3C,
-: ?27

,
, -
.
-,

. -
, -


. . 1.2. CSS WG:
, W3C , -

,
W3C

W3C.
- ,
W3C ,
, . -
: ,
, W3C,
, .

, . CSS -
;
,
:
www-style
(http://lists.w3.org/Archives/Public/www-style). -
, ;

. ,

#css IRC- W3C (http://irc.w3.org/).

;
,
, .
(), ,
, -
.
28 1

? W3C
(Elika Etemad), . , -
fantasai,
, -
-
- (
CSS ),
(http://fantasai.inkedblade.net/ (Spec Editor). -
weblog/2011/inside-csswg).
- W3C, ,
.
-
-,
,

.


.
1. (Editor's Draft, ED):

.
,
,
.
: -

.
2. (First
Public Working Draft, FPWD): -
,
-

.
3. (Working Draft, WD):
-
. ,
-
.
,
. 1.3. ,


W3C
, .
-: ?29

4. (Candidate Recommendation, CR):


. , -
.

.
5. (Proposed Recommendation, PR): -
- W3C
. ,
PR- ,
.
6. (Recommendation, REC):
W3C.
.
, -
, , , -
.
,
. , ,
,, ,
.

CSS3, CSS4
CSS 1 . -
1996 . ,
HTML-,
68 4.
1998 CSS 2 -
,
: .
480 (!) , ,
.
CSS CSS ,
. ,
, -
CSS. ,


.
30 1

. , ,
, , CSS
(),
. , , -
CSS 2.1, 3.
:
CSS Syntax (http://w3.org/TR/css-syntax-3)

CSS Cascading and Inheritance (http://w3.org/TR/css-cascade-3)

CSS Color (http://3.org/TR/css3-color)

Selectors (http://w3.org/TR/selectors)

CSS Backgrounds & Borders (http://w3.org/TR/css3-background)

CSS Values and Units (http://w3.org/TR/css-values-3)

CSS Text (http://w3.org/TR/css-text-3)

CSS Text Decoration (http://w3.org/TR/css-text-decor-3)

CSS Fonts (http://w3.org/TR/css3-fonts)

CSS Basic User Interface (http://w3.org/TR/css3-ui)

, ,
1. :
CSS Transforms (http://w3.org/TR/css-transforms-1)

Compositing and Blending (http://w3.org/TR/compositing-1)

Filter Effects (http://w3.org/TR/filter-effects-1)

CSS Masking (http://w3.org/TR/css-masking-1)

CSS Flexible Box Layout (http://w3.org/TR/css-flexbox-1)

CSS Grid Layout (http://w3.org/TR/css-grid-1)

CSS3, -
, ,
, , CSS 2.1 .
,
3 .
-
, CSS3, ,
CSS,
, CSS3, CSS4 ..,
.
-: ?31

,
:
,
, -
. , , ,
, . -
-
, ,
, ,
-. ,
,
.

, .
. ,
( )
, .
-moz- Firefox, -ms- IE, -o-
Opera -webkit- Safari Chrome.

. , ,
, -
.
,
( ), ,
, .
, ? , , , , -
, . -
,
,
,
. -
CSS. ,
StackOverflow,
CSS- .
, -
, -
,
CSS.
32 1

, , ,
. ? ,
, -
, .
:

-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

: -ms-border-radius -o-border-radius
, IE Opera
border-radius .
, -
, .
, , -
:
-, CSS3, Please! (http://css3please.com) pleeease (http://
pleeease.io/playground.html), CSS- -
CSS . -

, ,
;
Autoprefixer (http://github.com/ai/autoprefixer) Can
I Use (http://caniuse.com) ,
, ,
;
-prefix-free (http://leaverou.github.io/prefixfree) -
, ,
. , ,
, ,
;
, LESS (http://lesscss.org) Sass (http://sass-lang.com),
,
,
,
.
-
, .
-: ?33

, , -
. ,
.

. -
,
, -
, -
. , ,
-
, , ,
, -
, .
,
.
CSS-

DRY
,
CSS.
, -
. , ,
, 10 ,
, ,
.
, , ,
.
. CSS , -
CSS- , ,
,
. .
CSS-, ,
.1.4:

padding: 6px 16px;


border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;

,
. , , .
CSS-35

(-
Yes!
,
), -
, . 1.4. ,
. ,


,
-
, .
, .
150% . ,
:

font-size: 20px;
line-height: 1.5;

, ,
? ,
, , -
. ,
,
, .
em:

font-size: 125%; /* , 16px */


line-height: 1.5;

, , -
. - (. 1.5),
-
. ,
em,
. , -
:
Yes!
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a); . 1.5.
border-radius: .2em;
box-shadow: 0 .05em .25em gray; ,
color: white; (
text-shadow: 0 -.05em .05em #335166; ),
font-size: 125%;
line-height: 1.5;
36 1


(. 1.6).
Yes! ,
.

,
. 1.6. , . ,
1px -
, .

-
, -
.
. ,
Cancel OK. -
,
(border-color,

background, box-shadow, text-shadow),
-
, em.
,
, -
- , #58a , -
. ,
(
<html>), , ? (gray)
em
.
.
- -
rem. , -


CSS,
, -
:

padding: .3em .8em;
.
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla
(0,0%,100%,.2), transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);

font-size: 125%;
HSLA line-height: 1.5;
RGBA
-
,
background-
. color (.1.7):
CSS-37

button.cancel {
background-color: #c00; OK Canc
Cancel
nc el
Cancel
}

button.ok { . 1.7. ,
background-color: #6b0;
} ,

.
DRY.
.


-
.
. , -
10px ,
:

border-width: 10px 10px 10px 0;

, , ,
.
, , , ,
:
border-width: 10px;
border-left-width: 0;

currentColor
CSS 3 (http://w3.org/TR/css3-color) -
, lightgoldenrodyellow ,
.
, SVG: currentColor. -
.
color, , , -
CSS.
, .
, , , -
( <hr>) .
currentColor :
38 1

- , hr {
- height: .5em;
CSS background: currentColor;
em, }
font-size. -
-
, ,
,

. ,
. , -
. ,
currentColor
CSS: border-color,
text-shadow box-shadow, outline-color .

, -
CSS, currentColor
,
.


-
inherit ,
. inherit -
CSS, -

( ,
). ,
,
, .
,
inherit:

input, select, button { font: inherit; }

, inherit
, :

a { color: inherit; }

inherit -
. -
. 1.8. , , ,




(.1.8):
CSS-39

.callout { position: relative; }

.callout::before {
content: "";
position: absolute;
top: -.4em; left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}

,

. -
, ,
. -
, , -
, ,
,
.
, , . 1.9. -
-


. ,
, . 1.9. . -
-
-
-
: , , ,
, - ,
,
, .
. 1.10.
-
,
. -
.
,
,
. 1.10. ,
, . ,
-
,
40 1

, . 1.11.
, ,
yolo ,

. ,
. 1.11.
,
(: .5em) .
. 1.12.

,
-

- (Responsive Web Design,


RWD)
.
yolo , , - -
, , -
RWD,
.
. 1.12.
(: ,
.3em .7em) , - -

,

.
CSS-
,
-
. CSS-
,
, ,
. ,
. ,
CSS-.
,
. -
.


- ,

- ,
-
em. -
,
/ (,
. ). ,
CSS-41

. -
( ),
, , -
,
, .
, ,
,
. ,
, -
( ), ,
-
. ,
, ,
?
,
, ,
,
.
, :
, .
, ,
(vw, vh, vmin, vmax),
;
, -
max-width, width,
;
100% max-width
, img, object, video iframe;
, -
background-size: cover,
. ,
,
CSS ,
;
( ) -
, ,
. (
Flexbox Flexible Box Layout) display: inline-block
;
42 1

column-
width, column-count,
.
, , -
-
. ,
.
Basecamp 2010 :

, ,
, , , CSS -
. ,
, . ,


, ,
.
Experimenting with responsive design in Iterations
(http://signalvnoise.com/posts/2661-experimenting-with-
responsive-design-in-iterations)

, ,
( ) ,
, -
, .


, , , CSS- :

background: rebeccapurple;

background-color: rebeccapurple;

, ,
rebeccapurple. , -
(background-color),
, , -
background-image.
:
, , .
CSS-43

,
, , -
. CSS -
,
. . ,
.
,

.
-
, ( -
DRY) , -
, background.
:

background: url(tr.png) no-repeat top right / 2em 2em,


url(br.png) no-repeat bottom right / 2em 2em,
url(bl.png) no-repeat bottom left / 2em 2em;

, background-size background-repeat -
, .

CSS, , ,
.
:

background: url(tr.png) top right,


url(br.png) bottom right,
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;

background-size background-repeat -
.
.

?
CSS, LESS (http://lesscss.org),
Sass (http://sass-lang.com) Stylus (http://stylus-lang.com/).
CSS, , ,
, , .
44 1

-
, CSS .
, CSS-,
. ,
:
CSS-.
,
, ;
, CSS-,
, CSS-, -
. -
SourceMaps. SourceMaps ,
.
, ,
CSS- CSS- ;

.

, , -
background background-size
background-position (
) (/).
. -
, , top right background-
position, 2em 2em background-size, , -
. ,
50% 50%. background-size background-position?
, CSS , .
, ,
, , 50%50%.
.
-
,
. -
-
. ,

; , , ,
- .
CSS-45

-
. , -
CSS - ,
, ;
,
- , .
,
. ,
, ;
;
: -
.
, , , - -
, ,
, ,
CSS- -
.
, ,
, ,
, ,
CSS. -
? , , ,
CSS:
, CSS Custom Properties for Casca
ding Variables -
(http://w3.org/TR/css-variables-1);
calc() CSS Values & Units Level 3
;
;
color() CSS Color Level 4 (http://dev.w3.org/csswg/csscolor)
;
CSS ,
.
, , , -
, ,
. ,
, 100%50px, ,
, ,
. calc() CSS
46 1

. -
, ,
:

ul { --accent-color: purple; }
ol { --accent-color: rebeccapurple; }
li { background: var(--accent-color); }

, ? -
rebeccapurple, -
purple.
! ,
-, ,
.

. 1.13. Myth (http://myth.io) , ,


, CSS, ,
CSS

CSS
, ,
( ),
. CSS
CSS-47

, , -

DRY.
CSS -

. ,
- -
, , JS.

, -
,
.
2
1


RGBS/HSLA

, , -
CSS, rgba() hsla(). 2009 ,
, , ,

,
IE .
. ,
:
,
, #ff0066 orange,
, ;
,
. , -

.
;
, ,
, .
1. 51

. 2.1. 24ways.org -, 2008


,
( )

, -

,
?
. , , ?
:
border: 10px solid hsla(0,0%,100%,.5);
background: white;
. 2.2.

,
, ( . 2.2) -
. ?
, , ?

, .
, , -
, ,
52 2

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

, .
. 2.3.

CSS 2.1 .
.
, Backgrounds
& Borders Level 3 (http://w3.org/TR/css3-background)


, background-
clip. border-box,
, -
. ,
,
?
? padding-box,

:

. 2.4. border: 10px solid hsla(0,0%,100%,.5);


background: white;
background-clip background-clip: padding-box;

!
http://play.csssecrets.io/translucent-borders


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
2


box-shadow

, Backgrounds & Borders Level 3


(http://w3.org/TR/css3-background) ,
CSS ,
. ,
,
border-image
.
CSS-, -

.
,
.

box-shadow
( )
box-shadow . ,
( ,
spread radius), ( )
( ) .
54 2

-
,
(. 2.5):

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

. 2.5. ,
box- border.
shadow , box-
shadow ,
.

- deeppink :

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px
deeppink;

. 2.6.
, ,
, box-shadow, -
box-shadow ,
, . -
, -
5px,
15px (10px+5px).

:

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
. 2.7. 0 2px 5px 15px rgba(0,0,0,.6);

, , -
:
, :

box-sizing. -
,
,
( ,
inset );
2. 55

-
.
, . ,
inset, .
, ,
.

!
http://play.csssecrets.io/multiple-borders

outline
, , -
,
outline. ( ,
?), box-shadow
.
, .2.6:

background: yellowgreen;
border: 10px solid #655;
outline: 15px solid deeppink;

, ,
outline-offset,
.
. , .2.8
.
-
:
,
, -
outline , -
. ,
, . 2.8.
;
outline-offset
border- (dashed) ,
radius, -
,
56 2

(.2.9). , -
CSS ,
, ,
, border-radius
;
CSS User Interface
. 2.9. ,
Level 3 (http://w3.org/TR/css3-ui),
.
outline, ,
, -
, ,
.


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
CSS Basic User Interface: http://w3.org/TR/css3-ui
3

-
Code Pirate
, -
, . CSS2.1 -

,
.
. 2.10. background-
, position: bottom right;
-
(- ), , ,
.2.10.


CSS2.1,
: , -

,


.
( , -
) .
,
-
100%,
95%. , CSS
!
58 2


background-position
CSS Backgrounds & Borders Level 3 (http://w3.org/
Code Pirate TR/css3-background) background-position


-
. , ,

. 2.11.

20px 10px
; , :

background: url(code-pirate.svg) no-repeat #58a;
,
background-position: right 20px bottom 10px;
,

. 2.11.
.
, -
Code Pirate
,
background-position, -
(
), ,
,
(. 2.12).
. 2.12. bottom
, right background:

background: url(code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

!
http://play.csssecrets.io/extended-bg-position

background-origin
, -
,
. background-
position, , :
3. 59

padding: 10px;
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;

. 2.13. , -
, Code Pirate
DRY:
-
! ,
,
,
. 2.13.
.

, - ,
,

background-position: top left;.


- ,
(Border Box)
top left? , -
(Padding Box)
, ,
(.2.14): ,
(Content Box)
.
background-position?
background-position
; ,
. - . 2.14.
, top left
. Backgrounds
& Borders Level 3 (http://w3.org/TR/css3-background), ,
, : background-origin.
( ) padding-box.
content-box, ,
, background-
position, ( , ,
/
):

padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
bottom right; /* 100% 100% */
background-origin: content-box;

, . 2.13, -
DRY. ,
60 2

!
- ! ,
-
- +
,
calc(), -

, -
. - background-origin: content-box
, -
- background-position.
-
-
: !
calc(), , -
, http://play.csssecrets.io/background-origin

.

calc()
:
10px 20px
.
, 100%-20px 100%-10px
. , calc() -
background-position:

background: url("code-pirate.svg") no-repeat;


background-position: calc(100% - 20px) calc(100% - 10px);

!
http://play.csssecrets.io/background-position-calc


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
CSS Values & Units: http://w3.org/TR/css-values
4


box-shadow, outline,

, -
, /
,
, . 2.15. ?
.
:
. 2.15.

HTML
<div class="something-meaningful"><div>
I have a nice subtle inner rounding,
don't I look pretty?
</div></div>

.something-meaningful {
background: #655;
padding: .8em;
}
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
}
62 2

, -
,

,
.
:-( ?

. 2.16.
outline


. -
,
, ,
, -
- ,
:-)
.
,
. 2.17. ( -
box-shadow
). CSS-:


background: tan;

border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
,
?
, -
? ,
. 2.18. .2.15. , ,
,
-
;
,
(, , -
. , . 2.16), (box-shadow),
, , (.2.17). ,
, box-shadow -
,
(.2.18), -
. . 2.18
.
, box-shadow -
,
. ,
,
, .
: ,
, ?
4. 63

, -
!

, ?


,
. -
, ( , ,
) a 2 b2 , ,
a b . .

, 2a 2 a 2 .

, , -

. .2.19: ,
, -


, -
. border-radius -
.8em, , -
.8( 2 1) .33137085em . , - CSS.
-
, -
,
.34em. .

, ,

,
, 2 1 0,5.
r 2
, r
:
, -
,
. 2.19.
( 2 1)r , r border-radius.
r,
, border-
( 2 1)r , . radius
r 2 ,
,
!
r 2 r ( 2 1)r
http://play.csssecrets.io/inner-rounding


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
CSS Basic User Interface: http://w3.org/TR/css3-ui
5


CSS, background-size

, , ,
-, ,
. .
,
, -
. SVG, ,
. , ,
CSS? ,
!

, ,
#fb3 #58a (. 2.20):

background: linear-gradient(#fb3, #58a);


(. 2.21):
5. 65

background: linear-gradient(#fb3 20%, #58a 80%);

20%
#fb3, 20%
#58a. -
60% .
(40% 60% - . 2.20.
, . 2.22),
. :
,
?

background: linear-gradient(#fb3 50%, #58a 50%);

. 2.21.
, 60%
, , ,
, . -
;


.
CSS Image Values Level 3
(http://w3.org/TR/css3-images)

.2.23,
, ,

background-image. , . 2.22.
. 20%
,
-
, ;

, -

, ,
background-size:

background: linear-gradient(#fb3 50%, #58a 50%);


background-size: 100% 30px;

.2.24, -
15px .
. 2.23. -
, -
(. 2.25). 50%
66 2


, -
(. 2.26):

background: linear-gradient(#fb3 30%, #58a 30%);


background-size: 100% 30px;

. 2.24. - -
- ,
, -
, :

,

,

.
CSS Images Level 3 (http://w3.org/TR/css3-images)
. 2.25.

,
0, ,

, , . -
,
, . 2.26,
DRY:

background: linear-gradient(#fb3 30%, #58a 0);


background-size: 100% 30px;
. 2.26.

. ,
-
(. 2.27):

background: linear-gradient(#fb3 33.3%,


#58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

. 2.27.

!
http://play.csssecrets.io/horizontal-stripes
5. 67


,
-, ,

.
(.2.28),
, , -
. , CSS
,
.
, ,
.
, -
. . 2.28. -
, - . : -

(to bottom). . :
, , ,
background-size:

background: linear-gradient(to right, /* 90deg */


#fb3 50%, #58a 0);
background-size: 30px 100%;

!
http://play.csssecrets.io/vertical-stripes



( 45),
background-size , , :

background: linear-gradient(45deg,
#fb3 50%, #58a 0);
background-size: 30px 30px;

, . 2.29, . ,
45, -
. ,
68 2

-
, .2.30.
, ,
.

CSS-,
. 2.29. :

background: linear-gradient(45deg,

#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

. 2.31. ,
, -
,
. , -
, -
. 2.30. ,

, . ,
( , -
;
?
) a 2 b2 , a b .

45 2a 2 a 2 .

, -
. ,
, . 2.32.
, ,
15px, , -
. 2.31.
45;
2 15 2 42,426406871 :

background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 42.426406871px 42.426406871px;

. 2.33.
-
-
15 (,
5. 69

, 2 -
, -
, 15px
), 2
- 42.4px
42px.
15px

. 2.32.
! 30px
15
10, 606601718
http://play.csssecrets.io/diagonal-stripes 2


, -
, . ,
60, 45?
30? 3,1415926535?
, . 2.33.
( .2.34 45;
60). ,
,
, -
.
, linear-gradient() radial-gradient()
: repeating-
linear-gradient() repeating-radial-gradient().
,
:
, . ,
,
( .2.35): . 2.34.

60
background: repeating-linear-gradient(45deg,
#fb3, #58a 30px);

background: linear-gradient(45deg,
#fb3, #58a 30px,
#fb3 30px, #58a 60px,
#fb3 60px, #58a 90px,
#fb3 90px, #58a 120px, . 2.35.
#fb3 120px, #58a 150px, ...);
70 2

-
!
. ,
,
.
: . 2.33 -
:

background: repeating-linear-gradient(45deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);

:
,
. ,
, background-size.
; .
, ,
, .
2 !
, -
,
. ,
60 (. 2.36):

background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);

!
,
,
. ,

,
.
. 2.36.
45,
60
, ,

, :

background: repeating-linear-gradient(45deg,
#fb3 0, #fb3 25%, #58a 0, #58a 50%);
background-size: 42.426406871px 42.426406871px;
5. 71

!
http://play.csssecrets.io/diagonal-stripes-60deg

!
http://play.csssecrets.io/test-color-stop-2positions


, ,
. -
, :

background: repeating-linear-gradient(30deg,
#79b, #79b 15px, #58a 0, #58a 30px);

.2.37, #58a
.
, . ,
, (!) .

.


-
CSS Image Values Level 4 (http://w3.org/TR/css4-images).
,
, -

. , . 2.36 :

background: repeating-linear-gradient(60deg,
#fb3 0 15px, #58a 0 30px);

, -
DRY: ,
. ,
.
72 2

, :
,
, :

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);

, . 2.37,

.
,

, CSS.
, -
. 2.37.

,
,
.

!
http://play.csssecrets.io/subtle-stripes


CSS Image Values: http://w3.org/TR/css-images
CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
CSS Image Values Level 4: http://w3.org/TR/css4-images
6


CSS,

, CSS
. ,
, . -
: , ,
.
, CSS . -
CSS ,
: ,
.
CSS , -
CSS, Sass (http://sass-lang.com), .
,
, DRY CSS-.

.
74 2

. 2.38. , CSS3 (
http://lea.verou.me/css3patterns), , CSS
2011 . 20112012 ,
CSS,
.
CSS.
-. ,
CSS, , ,
. SVG.
SVG- http://philbit.com/svgpatterns; -
CSS
6. 75

, . -
, , -
. ,
-
. ,
,
(. 2.39):
background: white;
background-image: linear-gradient(90deg,
rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(
rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;


,
, , ,
. -
-
:
background: #58a;
background-image:
linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px,
transparent 0);
background-size: 30px 30px;

( . 2.40)
1px, -
30px.
,
, -
CSS.
, . 2.39. -
- , ,
CSS- ( (
-
DRY):

, )
, ,
-
, ;
76 2


; -
;
,
170 . SVG-
.
. 2.40.
CSS,
,
1px,
(. 2.41):

background: #58a;
background-image:
linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px,
transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,
transparent 0);
background-size: 75px 75px, 75px 75px,
15px 15px, 15px 15px;

!
,
http://play.csssecrets.io/blueprint
CSS, -
http://
bytesizematters.com -

.

.
,
, -
. ,

, (.2.42):

. 2.41. background: #655;


CSS, background-image: radial-gradient(tan 30%,
transparent 0);
background-size: 30px 30px;
6. 77

,
.

,
(.2.43):

background: #655;
. 2.42. ;
background-image: radial-gradient(tan 30%,

transparent 0),
radial-gradient(tan 30%,
transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

!
http://play.csssecrets.io/polka

. 2.43. ;
: ,


. , ,
, ,
. ,
,
,
, . ,
:

SCSS
@mixin polka($size, $dot, $base, $accent) {
background: $base;
background-image:
radial-gradient($accent $dot, transparent 0),
radial-gradient($accent $dot, transparent 0);
background-size: $size $size;
background-position: 0 0, $size/2 $size/2;
}

, :

SCSS
@include polka(30px, 30%, #655, tan);
78 2



. ,

.
,
,
. 2.44.
-
- .
; CSS ,
.
,
,
, - ,
, .2.44. ,

CSS:
,
? . ,
, CSS, -

. -
,
,
. 2.45.
CSS. ,
,
-
, ,
; , -
. 2.45.
,
.
(.

.2.29). ,
( -
):

background: #eee;
background-image:
linear-gradient(45deg, #bbb 50%,
transparent 0);
background-size: 30px 30px;
6. 79

, ,
. ,
, -
.2.29,
. ,
, 1/8 ,
1/2, ? . 2.46.
,
25% 50%.

.2.46.
, -
, -
(.2.47):

background: #eee;
background-image:
linear-gradient(45deg, transparent 75%,
#bbb 0);
background-size: 30px 30px;
. 2.47.

, , ,
? : ,

background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%,
transparent 0),
linear-gradient(45deg, transparent 75%,
#bbb 0);
background-size: 30px 30px;

, , -
. 2.48, -
. . 2.48.
,
-
:

background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
80 2

.


-
, -
. CSS Image Values Level 4
(http://w3.org/TR/css4-images) -
,
( -
).
,
, . -
, ,
. , , ,
:

background: conic-gradient(red, yellow, lime, aqua, blue,


fuchsia, red);


, : ,
,
( ) . -
. 2.44
:

background: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0,


#eee 50%);
background-size: 30px 30px;

,
, -
http://leaverou.github.io/conic-gradient.

!
http://play.csssecrets.io/test-conic-gradient
6. 81

, ? , -
, . . 2.49. , , ,
. ,
, , -
, ,
:

background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px,
15px 15px, 30px 30px;
background-size: 30px 30px;

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

. 2.49.
-
,
:
;
background: #eee;
background-image: ,
linear-gradient(45deg,
rgba(0,0,0,.25) 25%, transparent 0,
transparent 75%, rgba(0,0,0,.25) 0),
linear-gradient(45deg,
rgba(0,0,0,.25) 25%, transparent 0,
transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

, , ,
WET.
, .
, . ,
Sass :
82 2

SCSS
@mixin checkerboard($size, $base,
$accent: rgba(0,0,0,.25)) {
background: $base;
background-image:
linear-gradient(45deg,
$accent 25%, transparent 0,
. 2.50. transparent 75%, $accent 0),
, , linear-gradient(45deg,
, $accent 25%, transparent 0,
transparent 75%, $accent 0);
background-position: 0 0, $size $size,
, - . background-size: 2*$size 2*$size;
}

/* */
@include checkerboard(15px, #58a, tan);

.
, , , -
,

, SVG.
rebeccapurple .2.44 SVG
, :


SVG
<svg xmlns="http://www.w3.org/2000/svg"
width="100" height="100" fill-opacity=".25"
>
<rect x="50" width="50" height="50" />
<rect y="50" width="50" height="50" />
WET </svg>
We Enjoy Typing (
),
- : CSS

DRY ( WET-
HTTP-!
, - SVG-
- URI , -
). base64 URLencode:

background: #eee url('data:image/svg+xml,\


<svg xmlns="http://www.w3.org/2000/svg" \
width="100" height="100"
fill-opacity=".25">\
<rect x="50" width="50" height="50" /> \
<rect y="50" width="50" height="50" /> \
</svg>');
background-size: 30px 30px;
6. 83

. 2.51. (http://w3.org/TR/compositing-1),
background-blend-mode, normal, (
) , ,
, (http://bennettfeely.com/
gradients). multiply,
, overlay, screen difference,

84 2

SVG 40
, , .
CSS- ,
- , .
,

(\).
!
http://play.csssecrets.io/checkerboard-svg


CSS Image Values: http://w3.org/TR/css-images
CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
Scalable Vector Graphics: http://w3.org/TR/SVG
CSS Image Values Level 4: http://w3.org/TR/css4-images
7 ()


CSS, ,


, . -
,
.
,
.
: , . 2.52.

, -

, . -
.
,
, ,
,
-
,

.
86 2

, -
,
.
, -
(Alex Walker, The Cicada Principle and Why It Matters to Web Designers) (http://sitepoint.
com/the-cicada-principle-and-why-it-matters-to-web-designers)

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

background: linear-gradient(90deg,
#fb3 15%, #655 0, #655 40%,
#ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;

. 2.53. ,

.2.53, , -
80px ( background-size). -
?

,
: ,
. ,
background-size
. :
7. () 87

background: hsl(20, 40%, 90%);


background-image:
linear-gradient(90deg, #fb3 10px, transparent 0),
linear-gradient(90deg, #ab4 20px, transparent 0),
linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;

,
( ), -
:

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

, ,

240px. - ( -
-
, - ,

. -
,
, ,
-
,
?).
,
(
). ,
, 40, 60 80, 240.

. 2.54. ,
; ( )

, , -
,
. ,
, . ,
88 2

.1
. , 3, 4 5 ,
34 5=60. -
,
.
- .

. 2.55. ,

, -
.
:

background: hsl(20, 40%, 90%);


background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

, , .2.55! -
4161 83=207583 ,
, !
,
,
. ,
, , -
. :

,
1

, 1 . , 10 2, 3, 5, 7, 11, 13,
17, 19, 23, 29. ,
, .
, (, 10 27
, ). ,
.
7. () 89

-
:nth-child(an), a ;
,
. ,
( http://
play.csssecrets.io/cicanimation).

!
http://play.csssecrets.io/cicada-stripes

,
. http://sitepoint.com/
the-cicada-principle-and-why-it-matters-to-web-designers. (Eric
Meyer) (http://meyerweb.com) -
(Cicadients http://meyerweb.com/eric/thoughts/2012/06/22/
cicadients), -
, CSS.
(Dudley Storey)
: http://demosthenes.info/blog/840/Brood-X-Visualizing-The-
Cicada-Principle-In-CSS.
8


CSS, border-image, ,
CSS



, -
. , .2.57
, ,
, ,
. 2.56. . , ,
, , -
, -
. CSS?
, : border-image, border-
image, border-image, !!!11
, . , border-image:
, .
. .2.58
, .
border-image , -
.2.57?
,
. ,
8. 91


; ,
, , ?
. -
, , ,
, border-image .
?
, ?

Bacon ipsum dolor amet
HTML: ,
fatback alcatra tenderloin
, chicken shank, sausage
: pork meatball leberkas tri-
tip spare ribs salami filet
HTML mignon ball tip cow.
<div class="something-meaningful"><div>
I have a nice stone art border,
don't I look pretty? . 2.57.
</div></div>

.something-meaningful {
background: url(stone-art.jpg);
background-size: cover;
padding: 1em;
}

.something-meaningful > div {


background: white;
padding: 1em;
}

, .2.57,
HTML. ,
: , -
HTML- .
?

CSS ,
Backgrounds & Borders Level 3 (http://w3.org/TR/css3-background),
.
- , -
. ,
,
92 2

background-clip. ,
:
,
CSS
.
-
:

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;

.2.59,
, , -
- . ,
background-origin
. 2.58. padding-box,
border- -
image , 0,0
: . -
; .
,

border-box background-origin:
: border-image:
33.34% url() stretch; padding: 1em;
: border-image: 33.34% border: 1em solid transparent;
url() round; background: linear-gradient(white, white),

url(stone-art.jpg);
background-size: cover;

background-clip: padding-box, border-box;


http://play.
background-origin: border-box;
csssecrets.io/border-image


background,
:
,
?
padding: 1em;
border: 1em solid transparent;
background:
. 2.59. linear-gradient(white, white) padding-box,
url(stone-art.jpg) border-box 0 / cover;

8. 93

!
http://play.csssecrets.io/continuous-image-borders

, -
, . ,
, -
:
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white)
padding-box,
repeating-linear-gradient(-45deg,
red 0, red 12.5%,
transparent 0, transparent 25%,
. 2.60.
#58a 0, #58a 37.5%,

transparent 0, transparent 50%)
0 / 5em 5em;

. 2.61.

background-size, - ,
border . ?
,
border-image:
. 2.61.
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-
gradient(-45deg,
red 0, red 1em,
transparent 0, transparent 2em,

#58a 0, #58a 3em,
, http://
transparent 0, transparent 4em);
play.csssecrets.io/vintage-
envelope-border-image -
border-image - -
: .

border-image-slice ,
border-width, ;
border-image-slice ,
em,
;
,
.
94 2

!
http://play.csssecrets.io/vintage-envelope


!
-
, , ,
.
-
;

(.2.62).
. 2.62.
,

Adobe Photoshop -
.
, 1px ( -
,
?) background-size - .
background-position 100%, :
@keyframes ants { to { background-position: 100% } }
.marching-ants {
padding: 1em;
border: 1px solid transparent;
background:
linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
black 0, black 25%, white 0, white 50%
) 0 / .6em .6em;
animation: ants 12s linear infinite;
}

.2.63. , -
,
,
.
border-image
GIF border-
image-source, http://chrisdanford.com/
blog/2014/04/28/marching-ants-animated-selection-rectangle-in-css.
, -
, ,
WET-.
8. 95

!
http://play.csssecrets.io/marching-ants

border-image -
-
. , ,
. 2.63. ,
, , . , ,
, border-image
, - (-
. border-
);
width. :

!
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg,
currentColor 4em,
transparent 0);
padding-top: 1em;

1 This is a footnote.
. 2.64.

. 2.64. ,
em,
font-size. currentColor
color ( , ,
, ).

!
http://play.csssecrets.io/footnote


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
CSS Image Values: http://w3.org/TR/css-images
3
9


border-radius


, , -
,
border-radius,
CSS-:

background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >=
. 3.1. ,
*/


, , -
border-
radius, 100px .
:

,

, .
CSS Backgrounds & Borders Level 3
(http://w3.org/TR/css3-background/#corneroverlap)
9. 99

,
,
, -
, .
-
, ,
-
. 3.2.
-
. ,
, - ; ,
, border-radius,

, , .

. ,
, .3.2.
border-
radius, , ?

. 3.3.
, border- -

radius border-radius;
, - -
(/). - ,
(.3.3). -

, , border-radius.
, 200px150px, -
, , -
:

border-radius: 100px / 75px;

. 3.4.
-
: -
, border-radius
. .3.5 ,
border-radius
. 3.4. -
200px300px. - ,
, , border-radius,
.
100 3

? border-radius -
:
, . -

: -
,
. ,

. -
, ,
50%:

border-radius: 50% / 50%;

. 3.5.
( , -
; ),
:
,
border-radius: 50%;
!
,
CSS-,
.

!
http://play.csssecrets.io/ellipse

.
BORDER-RADIUS?
, border-radius
, , , -
(border) . , corner-radius
. (
) , border-radius
. ,
, ,
. (max(0,
border-radius - border-width), ).
9. 101

, , CSS -
, -
: CSS-
,
? ,
(, ,
. 3.6). . 3.6.
,
.
border-
radius ( , ),
,
.

-
,
. -
, border-radius ( -
. , , border-radius
, -
.

).
, -
.
, :
border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

,
border-radius, -
, . ,
, -
. ,
, CSS, ,
border-width. , -
. ,
. .3.7 , .

, 14 14
102 3

. ,
. ,
border-radius, 10px / 5px 20px, 10px 10px 10px 10px / 5px
20px 5px 20px.

border-radius: ;

border-radius: ;

border-radius: ;

border-radius: ;
. 3.7. , , ,
border-radius ( ). ,
,
(
)

,
. border-radius,
? , .
, :
, ,
;
;
(
), , -
100% ;
, , -
, , , 50%;

, . -
, border-radius
100%100%00;
9. 103


,
, -
(
-
? -,
).
,
CSS- .3.6:

border-radius: 50% / 100% 100% 0 0;

,
,
,
.3.8:
. 3.8. ,

border-radius: 100% 0 0 100% / 50%;

CSS-
.

!
http://play.csssecrets.io/half-ellipse

-
,
- ,
- .
, ,
.3.9. , -
,
100%
, ,
.
-
, -
,
. :
. 3.9.

border-radius: 100% 0 0 0;
104 3

, , -
, border-radius (,
? ?),
: border-radius ,
.

. 3.10. Simurai border-radius


-
(BonBon buttons http://simurai.com/archive/buttons)

!
http://play.csssecrets.io/quarter-ellipse


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
10


CSS

-
: ,
(.3.11).


(.3.12). . 3.11.

, CSS -
.
, , , .3.13.
skew(), :

transform: skewX(-45deg);

, -
(.3.14).
, ?


-
, skew(),
. , ,
HTML , div:
106 3

. 3.12. - (
(Martina Pitakova))

HTML
<a href="#yolo" class="button">
<div>Click me</div>
CLICK ME </a>

. 3.13.
.button { transform: skewX(-45deg); }
-
.button > div { transform: skewX(45deg); }

.3.15, ,
HTML.
CLICK ME ,

. 3.14. , -
, CSS.

!
http://play.csssecrets.io/parallelograms
10. 107


!

-
, - , -
(,
(inline), -
..), .
-
, display, -
. inline-block block,
-
, . . -

, .

,
.
position: relative
,
position: absolute -
,
. CLICK ME
:
. 3.15.
.button {
position: relative;
/* , .. */
}
.button::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}


, , - CLICK ME
- ,
(.3.16). , - . 3.16.
z-index: -1 ,
.
,
- -
background: #58a
. ; ,
,
:

.button {
position: relative;
/* , .. */
108 3

}
.button::before {
content: ''; /* */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}

skew().
,
, . , -
rotate()
, .
, -
, ,

, :
-
IE8 ( (Nicolas
Gallagher); http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2);
,
. ?
,
opacity, , (http://
nicolasgallagher.com/css-background-image-hacks);

-
, .
,
, ,
.

!
http://play.csssecrets.io/parallelograms-pseudo


CSS Transforms: http://w3.org/TR/css-transforms
11


CSS,


, CSS .
.

. 3.17. 2013 -
24ways.org .

110 3

-

. ,
,

- -
, -
.
, -
. 3.18.
.
, !



, -
(.
), -
<div>, -
rotate():

HTML
<div class="picture">
<img src="adam-catlace.jpg" alt="" />
</div>

.picture {
. 3.19. width: 400px;
rotate() transform: rotate(45deg);
overflow: hidden;
( }
div .picture .picture > img {
max-width: 100%;
) transform: rotate(-45deg);
}

, .3.19, -
.
, -
, ,
, - .
, -
.
11. 111

max-width: 100% . 100%


.picture . ,
, .
, (
,
). ,
, 2 1,414213562. ,
max-width, 2 100%141,4213562% , ,
142%, ,
( , ,
).
-
scale(), :
, , CSS ,
100%;
scale() -
( transform-origin).
width,
,
,
.
, :

.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}

.3.20, -
.

. 3.20.
!

http://play.csssecrets.io/diamond-images
112 3


,

.
HTML, , -
,

:

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

clip-
path ,
SVG.
HTML- ( , -
),
,
SVG,
.
(
) .

( ),
.
, -
. 3.22.
clip-path
, Adobe Photoshop. -


, . -
polygon().
,
-
, .

-
. :

clip-path: polygon(50% 0, 100% 50%, 50% 100%,


0 50%);
11. 113

, ! .3.20,
HTML CSS -
.
clip-path . -
,
( polygon()) -
. ,
,
:

img {
clip-path: polygon(50% 0, 100% 50%,
50% 100%, 0 50%);
transition: 1s clip-path;
}

img:hover {
clip-path: polygon(0 0, 100% 0,
100% 100%, 0 100%);
}

, -
, . 3.22. , CSS

!
http://play.csssecrets.io/diamond-clip


CSS Transforms: http://w3.org/TR/css-transforms
CSS Masking: http://w3.org/TR/css-masking
CSS Transitions: http://w3.org/TR/css-transitions
12


CSS, background-size,

,
, -.

45. , ,
, .
50%
, , -

(.3.23).
CSS

Next
. -

. 3.23.
:
( ),
,
, .

, ,
-
HTTP-
-.
12. 115

. 3.24. -, (
Find & Book)

CSS. -
, , ,
. , -
(, 45deg)
,
, .
, -
.
, ,
. CSS ( 15px):

background: #58a;
background:
linear-gradient(-45deg, transparent 15px, #58a 0);

, ? . 3.25.
-
. , !
: CSS , ,
, !
. !
, -
, , .
. 3.25.
,
. ,
: CSS
116 3

background: #58a;
background:
(#58a #655) linear-gradient(-45deg, transparent 15px,
. #58a 0),
linear-gradient(45deg, transparent 15px,
.
#655 0);

, . 3.26, -
.
, -
, !
. ,
,
background-
!
size:
!
background: #58a;
background:
. 3.26.
linear-gradient(-45deg, transparent 15px,

#58a 0)

right,

linear-gradient(45deg, transparent 15px,
#655 0)
left;
background-size: 50% 100%;
, !
,
. 3.27.
!
background-size, -
!
.
, background-repeat,
. 3.27. .
background-size ,
, .
:

background: #58a;
background:
linear-gradient(-45deg, transparent 15px,
#58a 0) right,
linear-gradient(45deg, transparent 15px,
#655 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;

. 3.28 , -!
! , -
. , :
12. 117

background: #58a;
background: , !
linear-gradient(135deg, transparent 15px, ,
#58a 0) !
top left,
!
linear-gradient(-135deg, transparent 15px,
#655 0)
top right,
linear-gradient(-45deg, transparent 15px, . 3.28.
#58a 0) , ,
bottom right,
linear-gradient(45deg, transparent 15px,
#655 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat; , !
,
. 3.29. - !
, - !
.

. , . 3.29. ,

, -

. SCSS:

SCSS
@mixin beveled-corners($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) {
background: $bg;
background:
linear-gradient(135deg, transparent $tl, $bg 0)
top left,
linear-gradient(225deg, transparent $tr, $bg 0)
top right,
linear-gradient(-45deg, transparent $br, $bg 0)
bottom right,
linear-gradient(45deg, transparent $bl, $bg 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}

, , , ,
25:

SCSS
@include beveled-corners(#58a, 15px, 5px);
118 3

,
15px, 5px, -
, border-radius,
. , SCSS
, ,
.

!
http://play.csssecrets.io/bevel-corners-gradients

. 3.30.
- http://g2geogeske.com;
: ,


, ,
.

:
12. 119

background: #58a;
background:
radial-gradient(circle at top left,
transparent 15px, #58a 0) top left,
radial-gradient(circle at top right,
transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right,
transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left,
transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

. 3.31. -
, , !

, - ,

. !

. 3.31.
!
,
http://play.csssecrets.io/scoop-corners

SVG border-image
, , , -
:
. ,
, -
. ,
,
, ;
,
.
,
. border-image
SVG-, . ,
border-image ( ,
. 2.58), ,
SVG-?
(border-image -
, SVG-
120 3

!), -
,
. ,
. ( )
. 3.32. , , :

border: 15px solid transparent;


border-image: 1 url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"
width="3" height="3" fill="%2358a">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');

, 1. 1 ;
SVG- (-
). ,
1/3 ,
33.34%. ,
-
. SVG-,
, .
. 3.33. , -
, . -
: -
, fill
border-image,
.
,
. 3.32.
, , .
SVG,
, , , ,
,
, -
. , 15px!
Hey, focus! Youre supposed to
,
be looking at my corners, not
15
reading my text. The text is
, -
just placeholder!
.
, /. -
. 3.33. , ? -, -
SVG- ,
border-image . . 3.34
12. 121

. ,
, - 15px
, , 2 -
, 2
. 15px
,
20px, . 3.34. border-
width, 15px,
15px:
15/
r 2 10,606601718 (
), -
border: 20px solid transparent;

border-image: 1 url('data:image/svg+xml,\

<svg xmlns="http://www.w3.org/2000/svg"
width="3" height="3" fill="%2358a">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3
0,2"/>\
</svg>'); , !
background: #58a; ,
!
, . 3.35, !
, .
? , -
. 3.35.
, . ,
?
,
, #655.
. 3.36, ,
, : , , !
, . , ,
- !
, background-clip !
:

border: 20px solid transparent; . 3.36.


border-image: 1 url('data:image/svg+xml,\ background
<svg xmlns="http://www.w3.org/2000/svg"\ ,
width="3" height="3" fill="%2358a">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3
0,2"/>\
</svg>');
background: #58a;
background-clip: padding-box;

,
, . 3.29.
122 3

,
, ! : -
, .
! , border-width
! !
. ,
. 3.37. -
, , -
-
, ,
#58a. , . 3.37
hsla(0,0%,100%,.2)
transparent.
. border-image -
, .
- ,
. ,
, :

border: 20px solid #58a;


border-image: 1 url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="3" height="3" fill="%2358a">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
background: #58a;
background-clip: padding-box;

, border-image ,
, , border-image ,
,
.3.35. ,
, .

!
http://play.csssecrets.io/bevel-corners

(Martijn Saly, http://twitter.com/martijnsaly)


border-image
SVG- . -
5 2015 : http://twitter.
com/martijnsaly/status/552152520114855936.
12. 123


border-image -
DRY,
. ,
,
. , ,
, ?

, , , ,
. clip-path
? CSS -
:
( )
, .
, ,
20px ( -
), :

background: #58a;
clip-path: polygon(
20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px
);

, DRY ,
,
.
WET CSS, ,
-
(!) . ,
,
.
,

, -
. .3.38 , -
. . 3.38. ,

. , clip-path
, ;
, clip-path
124 3

. , ,
.
, -
, ,
, ,
.

( ), border-image ,
, .

!
http://play.csssecrets.io/bevel-corners-clipped


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
CSS Image Values: http://w3.org/TR/css-images
CSS Transforms: http://w3.org/TR/css-transforms
CSS Masking: http://w3.org/TR/css-masking
CSS Transitions: http://w3.org/TR/css-transitions
CSS Backgrounds & Borders Level 4: http://dev.w3.org/csswg/css-
backgrounds-4

.

, ,
CSS, SVG.
corner-shape, CSS Backgrounds & Borders
Level 4 (http://dev.w3.org/csswg/cssbackgrounds-4/), -
.
border-radius,
. ,
15px
:

border-radius: 15px;
corner-shape: bevel;
13

-
, : -
Trapezoid
.
. - . 3.39. -
-
(
CSS,

-, . -
)
-
,
, ,
(.3.39).
HTTP-,

,
,
. -
, ,
.
, ,
.
126 3

. 3.40. Cloud9 (http://c9.io)


. 3.41. - https://css-tricks.com/
,


, , ,
, ,
.
?

,
,
. ,
.
,
. , ,
13. 127

.
CSS -
:

transform: perspective(.5em) rotateX(5deg);

. 3.42 , . 3.42. -
. , -
, -
. :
:
,
( -
).

, . ,
-


, ,

:

.tab {
position: relative;
display: inline-block;
padding: .5em 1em .35em;
color: white;
}

.tab::before {
content: ''; /* */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: perspective(.5em) rotateX(5deg);
}

. 3.43, - . 3.43.

. -
,
. -
,
, -
transform-origin, -
. ,
128 3

, -
, -
, . 3.44:
. 3.44. , , -
,
..

.
.
,
,

transform-origin: bottom; -
.

. 3.45.
:
.
,
, -
. 3.45. ,
,
,
,
. .
, ,
. -
, , -
transform-origin: bottom;
, (.3.46).

,
,
, -
. ,
,
( scaleY())
130% ,
.

. 3.47. -
. 3.46. ,

, ,

,
. -
,
() .
, ,
. 3.48:
13. 129

nav > a {
position: relative;
display: inline-block;
padding: .3em 1em 0;
}
nav > a::before {
content: '';
position: absolute; . 3.47.
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1; scale(),
background: #ccc;
background-image: linear-gradient( ()
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
border: 1px solid rgba(0,0,0,.4);
border-bottom: none;
border-radius: .5em .5em 0 0;
box-shadow: 0 .15em white inset;
transform: perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}

. 3.48.

, , ,
! ,
transform-origin bottom left bottom right,
, !
( . 3.49.)
, .
:
.
.
,
, .
.
130 3

. 3.49. transform-origin

!
http://play.csssecrets.io/trapezoid-tabs


CSS Transforms: http://w3.org/TR/css-transforms
14


CSS, SVG, CSS,
,


-,
:
.

-
JavaScript,
.
,
. -
,
CSS-.


:
, ,
CSS. :
132 3

HTML
<div class="pie"></div>

,
,
20%. , -
, ,
. 3.50.
, ,
( (.3.50):
, -
0%) .pie {
width: 100px; height: 100px;
border-radius: 50%;
background: yellowgreen;
}

(,
yellowgreen), -
#655.

, -
,
. 3.51.

,
.

,
,
-
.
-
, :

background-image:
linear-gradient(to right, transparent 50%, #655 0);

. 3.51, , .
, :

.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
}
14. 133

. 3.52 ,
, -
.
,
. .
, -
:
, . 3.52. ,
,
background- ,
color: inherit. -
, ,
;

, -

!
,
transform- -
background:
origin, 0 50%, left;
inherit; background-
, color: inherit;, -
, - -
!
. -
,
.pie overflow: hidden,
border-radius, .

, CSS- :

.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
}

. 3.54. -
! ,
rotate(). 20%,
, 72deg (0,2360=72)
.2turn, . -
, . 3.53.
134 3

, , ,
.

0 50%,
60% ( .6turn), -
, . 3.55.
! ,
.
50% 100%
, ,

: -
, 0 .5turn -
. ,
60% :

.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background: #655;
transform-origin: left;
transform: rotate(.1turn);
}


. 3.53. .3.56.
, ,
0%
. 100% CSS,
: 10% (36deg , , -
.1turn), 20% (72deg
:
.2turn), 40% (144deg
.4turn)
@keyframes spin {
to { transform: rotate(.5turn); }
}

@keyframes bg {
50% { background: #655; }
}

.pie::before {
content: '';
14. 135

display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite,
bg 6s step-end infinite;
}
. 3.54. -
(
! )
, -
http://play.csssecrets.io/pie-animated

, -

, -
? -

:

HTML
<div class="pie">20%</div>
<div class="pie">60%</div>
. 3.55.
, -
, 50%
20%, 60%.
( -
, - 60%)
, -

. ,
, ,
, .


, CSS-,
, .
,
, -
. . 3.56. -
-
- 60%
. ,
136 3

, .
, -
,
.
? , animation-delay
, , .

. 0s, ,
,
,
. , -
, .
CSS Animations Level 1
(http://w3.org/TR/css-animations/#animation-delay)

, ,
, , -
animation-delay.
, animation-delay
. ,
, 6s, 20% -
animation-delay -1.2s.
, , 100s. ,

,
.
: -
,
.pie.
<div> ,
animation-delay
-
,
, animation-
- delay: inherit; .
- ,
, 20% 60%:
, -
-
. , HTML
<div class="pie"
- style="animation-delay: -20s"></div>
http://play.csssecrets. <div class="pie"
io/static-interpolation. style="animation-delay: -60s"></div>
14. 137

CSS-
(
.pie, ):

@keyframes spin {
to { transform: rotate(.5turn); }
}

@keyframes bg { 20%
50% { background: #655; }
}

.pie::before {
/* [ ] */
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
} 60%

- . 3.57. ,

, -
,
,
animation-delay :

JS
$$('.pie').forEach(function(pie) {
var p = parseFloat(pie.textContent);
pie.style.animationDelay = '-' + p + 's';
});

, ,

.
.3.57.
, ,
, color:
transparent;
.

, , -
,
. -
:
138 3

height line-height ( -
line-height, height, ,
line-height
);
-
, ;
text-align: center; .

:
.pie {
position: relative;
width: 100px;
line-height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image:
linear-gradient(to right, transparent 50%, #655 0);
color: transparent;
text-align: center;
}

@keyframes spin {
to { transform: rotate(.5turn); }
}

@keyframes bg {
50% { background: #655; }
}

.pie::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 50%; height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}

!
http://play.csssecrets.io/pie-static
14. 139

SVG
SVG , ,
.
, -
, .
:

SVG , , ,
<svg width="100" height="100"> CSS
<circle r="30" cx="50" cy="50" /> SVG,
</svg> -
,
-
:
.
circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 30;
}
<P_158_01.eps>

. 3.58.
SVG stroke stroke-
width. , -
, -
. stroke-dasharray, . 3.58.
:
.
SVG
, :
#655
stroke-dasharray: 20 10;

, 20
, 10,
. 3.59. , , ,
-
SVG .
, -
,
(=2r, . 3.59.
=230189): ,

stroke-dasharray: 0 189; stroke-dasharray
140 3

. 3.60. stroke-dasharray .
: 0189 40189 95189 150189

. 3.60,
, -
. -
,
(..3.60):
,
. 3.61. SVG- , ,

.

, , :
, -
: SVG - , -
- , -
, . , . 3.61
, -
, 25,
.

stroke-width 50,
. :

SVG
<svg width="100" height="100">
<circle r="25" cx="50" cy="50" />
</svg>

circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 50;
stroke-dasharray: 60 158; /* 2 25 158 */
}

, ,
, :

14. 141

90 ,
. <svg> HTML,
:

svg {
transform: rotate(-90deg);
background: yellowgreen;
border-radius: 50%;
}

. 3.62. -

0% 100% .
CSS stroke-
dasharray 0 158 158158:

@keyframes fillup {
to { stroke-dasharray: 158 158; } . 3.62.
} ,
SVG
circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 50;
stroke-dasharray: 0 158;
animation: fillup 5s linear infinite;
}


, , 100 (,
100 ).
stroke-dasharray ,
. 2r, ,
100/215,915494309, 16.
SVG
viewBox width height, -
.
. 3.62
:

SVG
<svg viewBox="0 0 32 32">
<circle r="16" cx="16" cy="16" />
</svg>
142 3

CSS- :

svg {
width: 100px; height: 100px;
transform: rotate(-90deg);
background: yellowgreen;
border-radius: 50%;
}

circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 32;
stroke-dasharray: 38 100; /* 38% */
}

, . ,
,
SVG- .
JavaScript .
, HTML-,

HTML
<div class="pie">20%</div>
<div class="pie">60%</div>

SVG .pie -
. ,
<title> ,
, .
:

JS
$$('.pie').forEach(function(pie) {
var p = parseFloat(pie.textContent);
var NS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(NS, "svg");
var circle = document.createElementNS(NS, "circle");
var title = document.createElementNS(NS, "title");
circle.setAttribute("r", 16);
circle.setAttribute("cx", 16);
circle.setAttribute("cy", 16);
circle.setAttribute("stroke-dasharray", p + " 100");
svg.setAttribute("viewBox", "0 0 32 32");
14. 143

title.textContent = pie.textContent;
pie.textContent = '';
svg.appendChild(title);
svg.appendChild(circle);
pie.appendChild(svg);
});

! , , CSS ,
. SVG -
, CSS :
:
stroke-dashoffset.

.

?
. ,
-
, . ,
40%, . 3.53,
:

.pie {
width: 100px; height: 100px;
border-radius: 50%;
background: conic-gradient(#655 40%, yellowgreen 0);
}

,
attr(), CSS Values Level 3 (http://w3.org/TR/
css3-values/#attr-notation),
HTML:

background: conic-gradient(#655 attr(data-value %),


yellowgreen 0);

. -
, , ,
,
:

background: conic-gradient(deeppink 20%, #fb3 0, #fb3 30%,


yellowgreen 0);
144 3

(
).
?
,
SVG , -
<img>. , , ,
;
, ,
(,
, ).
, (
), .

!
http://play.csssecrets.io/pie-svg


CSS Transforms: http://w3.org/TR/css-transforms
CSS Image Values: http://w3.org/TR/css-images
CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
Scalable Vector Graphics: http://w3.org/TR/SVG
CSS Image Values Level 4: http://w3.org/TR/css4-images

4
15

box-shadow,
- ,
(, , ). http://
stackoverflow.com .
,
, .
-
CSS, box-shadow-bottom,
.
box-shadow,
.


box-shadow -
, , :
box-shadow: 2px 3px 4px rgba(0,0,0,.5);

( -
) (. 4.1):

. 4.1. box-shadow
15. 147

1. rgba(0,0,0,.5) , -

,
, .

2. 2px 3px . , -
, CSS-.
3. 4px
( ). ,
,


( 8px).
4. ,
1px
(4px-3px), 2px
,
(4px-2px),
. 6px (4px+2px) -
, - 7px (4px+3px).
(
). ,
,
. ,
.
,
.
text-shadow,
.
, 4px, -
, -
4px -
,
.
, 4px,
.

, (.4.2).
, ,

, ?

, . 4.2.
- -
. ,
( )
148 4

. , -
, 5px,
10px ( 5px ).
,
,
-
. 4.3. box-shadow , ,
,
.
(
), . , -

, ,
:

box-shadow: 0 5px 4px -4px black;

. 4.3.

!
http://play.csssecrets.io/shadow-one-side


-
. (, ), :
, .4.2,
, -
:
,
. ,
, ,
( );
, -
, .
,
.
, ( black) 6px
:
15. 149

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

. 4.4.

!
http://play.csssecrets.io/shadow-2-sides . 4.4. box-shadow

, CSS
-
, . , -

-
( ,

, .
), .
, .
,
,
:

box-shadow: 5px 0 5px -5px black,


-5px 0 5px -5px black;

. 4.5. . 4.5. box-shadow




!
http://play.csssecrets.io/shadow-opposite-sides


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
16



box-shadow

box-shadow , ,
,
border-radius ( ).
,
, box-shadow
. :
, ,
border-image (, );
,
( background-clip, border-box);
, ;

, ,
;
,
;
, clip-path, -
.
16. 151

. 4.6. , CSS, box-shadow


( box-shadow, 2px 2px 10px
rgba(0,0,0,.5))

box-shadow -
. 4.6.
?

Filter Effects (http://w3.org/TR/filter-effects) -



filter, SVG.
CSS , ,
SVG, SVG -
.
, blur(), grayscale()
drop-shadow()!
, ,
, :

filter: blur() grayscale() drop-shadow();

drop-shadow() ,
box-shadow, , inset,
. , :

box-shadow: 2px 2px 10px rgba(0,0,0,.5);

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

drop-shadow() . 4.6 -
. 4.7.
152 4

. 4.7. drop-shadow() . 4.6

!
CSS , -
:
, , , -
-
.
-

,
. SVG,

. -
SVG
Filter Effects (http://w3.org/TR/filter-
effects). SVG,
CSS, :

filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

, SVG- , -
, ,
CSS-, , ,
. , ,
, .
URI ( -
HTTP), .
SVG ,
, -
drop-shadow().
, , -
, , ,
( ), . 4.7. ,
, text-shadow: none;,
text-shadow ,
drop-shadow() . text-shadow
16. 153

, drop-
shadow() ,
! -
CSS- (
-
):

color: deeppink; . 4.8. text-shadow


border: 2px solid;
text-shadow: .1em .2em yellow;
drop-shadow()
filter: drop-shadow(.05em .05em .1em gray);

.4.8:
text-shadow, -
drop-shadow().

!
http://play.csssecrets.io/drop-shadow


Filter Effects: http://w3.org/TR/filter-effects
17


HSL, background-size

( -
, )
,
.
:hover /
.

CSS-,
. ,
HTTP-, - -
. , ,
.
!
-

. :
,
.
17. 155

. 4.9. - CSSConf 2014


.

, <canvas>
JavaScript. -
,
.
, -
CSS?


, -
, -
-
.
sepia(), -
- , -
3540
(.4.10). ,
.
156 4

. -
, -

saturate(). ,
hsl(335, 100%, 50%).
, -
4.
, -
.
. 4.11,
.
,
. 4.10. :
-.
. : -. -
, hue-
sepia() rotate()
. 335
, 40,
295 (33540):

filter: sepia() saturate(4) hue-rotate(295deg);

, , -
. 4.12.

(:hover) -
,
. 4.11.
CSS:

saturate()
img {
transition: .5s filter;
filter: sepia() saturate(4) hue-
rotate(295deg);
}

img:hover,
img:focus {
filter: none;
}

. 4.12. !

, hue-rotate() http://play.csssecrets.io/color-tint-filter
17. 157


, , , ,
,
.
,
.

saturate(), -
, . ,
: !
- -
, Adobe Photoshop, ,
, .
,
,
,
. -
,
luminosity.
luminosity HSL- -
,
. ,

, , . 4.13.
?
() ,
-
: mix-blend-mode - ()
,
background-blend-mode -
. ,
,
, , :
;

<div> , ,
, background-image
.

. ,
<img>, .
, <a>, :
158 4

HTML
<a href="#something">
<img src="tiger.jpg" alt="Rawrrr!" />
</a>

a {
background: hsl(335, 100%, 50%);
}

img {
mix-blend-mode: luminosity;
}

CSS, -
: ,
.
, ,
. , -

CSS filter. -
. , ,
. .
, mix-blend-mode
, . , -
luminosity ,
-. background-blend-mode
, ,
. , -
(transparent)
? : !
background-blend-mode
. HTML- :

HTML
<div class="tinted-image"
style="background-image:url(tiger.jpg)">
</div>

CSS <div>,
:
17. 159

.tinted-image {
width: 640px; height: 440px;
background-size: cover;
background-color: hsl(335, 100%, 50%);
background-blend-mode: luminosity;
transition: .5s background-color;
}

.tinted-image:hover {
background-color: transparent;
}

, , .
, :
CSS-
;
,
.
, ,
,
. -
.

!
http://play.csssecrets.io/color-tint

(Dudley Storey, http://demosthenes.info)


(http://demosthenes.info/blog/888/
Create-Monochromatic-Color-Tinted-Images-With-CSS-blend).


Filter Effects: http://w3.org/TR/filter-effects
Compositing and Blending: http://w3.org/TR/compositing
CSS Transitions: http://w3.org/TR/css-transitions
18


RGBA/HSLA

-


,


, -
.
. ,
, -
/ . ,
. 4.14,
. :

HTML
<main>
<blockquote>
"The only way to get rid of a temptation[]"
<footer>
<cite>
Oscar Wilde,
The Picture of Dorian Gray
</cite>
</footer>
</blockquote>
</main>
18. 161

CSS- ( ):

body {
background: url("tiger.jpg") 0 / cover fixed;
}

main {
background: hsla(0,0%,100%,.3);
}

. 4.14.

, ,
, 25%.
, , -
, -
(. 4.15).
-
, .
, , ,
. -
,
- .
,
,

. -
Microsoft Windows, Apple iOS Mac OS X (. 4.16).
162 4

. 4.15. -
,

. 4.16.
, ,
, ( Apple
iOS 8.1; Apple OS X Yosemite)

CSS . -
blur(), ,
SVG,
SVG-. -
blur() ,
, (. 4.17).
18. 163

(
, )?

. 4.17. blur()

, -
background-attachment fixed, ,
, .
. -
, , -
, ,
<body>.
-
, <main>:

main {
position: relative;
/* [ ] */
}

main::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(255,0,0,.5); /* */
}
164 4

, -

( red), , ,
z-index

: - (, , )
. . 4.18,
, -
,

- , . -
. , z-index: -1; (.4.20).

. 4.18.

. 4.19. ,

18. 165

-
background: inherit
, -
main::before?
. -
<body>, main,
. body,
-
? : .

body, main::before {
background: url("tiger.jpg") 0 / cover fixed;
}

main {
position: relative;
background: hsla(0,0%,100%,.3);
}

main::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
filter: blur(20px);
}

. 4.21, .
, , .
, ,

. 4.20. z-index: -1;



166 4

. 4.21. ,
,

. 4.22. (red)

, , . (red)
, , (. 4.22).
, 20px
( ) .
, -20px ,
18. 167

,
. . 4.19, -
,
,
. , :
overflow: hidden; main, , ,
. , -
. 4.23:

body, main::before {
background: url("tiger.jpg") 0 / cover fixed;
}

main {
position: relative;
background: hsla(0,0%,100%,.3);
overflow: hidden;
}

main::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
filter: blur(20px);
margin: -30px;
}

. 4.23.
168 4

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

!
http://play.csssecrets.io/frosted-glass


Filter Effects: http://w3.org/TR/filter-effects
19


CSS, CSS,

(
) , ,
, .
CSS,
2010 -
(http://nicolasgallagher.com/pure-css-folded-
corner-effect).
:
.
.
,
, .
:
, , ,
, , ,
;
, 45,
.
170 4

. 4.24. - http://css-tricks.com
,


CSS, ?

45
, -

. 1em,
, , . 4.25:

background: #58a; /* */
background:
linear-gradient(-135deg, transparent 2em, #58a 0);

: , ,


,
. .
, , -

background-size
. 4.25. .
:
-
,
-
, :
19. 171

background:
linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
no-repeat 100% 0 / 2em 2em;

, ,
.4.26. ,
, ? , -
, , ,
, :

background: #58a; /* */
background:
linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
no-repeat 100% 0 / 2em 2em,
linear-gradient(-135deg, transparent 2em, #58a 0);

. 4.27, -
, . ?

2em!
.
( - ,
), ,
2em, . 4.26.
, - ,
, ,
. , 2em background- ,
size , - .
-

,
.
, -
,
, :
2em,

background-size 2 ;
, 2em, .
,
-

2 .
background-size , -
. 4.27.
CSS -
, .
172 4


2/ 2 = 2 1,414213562, 1.5em:

. background: #58a; /* */
, background:
linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
no-repeat 100% 0 / 2em 2em,
. 4.28. linear-gradient(-135deg,
- - transparent 1.5em, #58a 0);
,

. 4.28, - -
,
.

!
, -
http://play.csssecrets.io/folded-corner
-
-
,
(
),

. 45. -
,
, -150deg 30.
,
, -
, ,
, .4.29. -
,
. ,

. , -
.
? ,
,
! !
:
. 4.29.
background: #58a; /* */

background:

linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
no-repeat 100% 0 / 2em 2em,
linear-gradient(-150deg,
transparent 1.5em, #58a 0);
19. 173

. 4.30, , -
90, 30
60.
30, 60 90 , -
, .
. 4.31 , x
1.
5e
, - z m y

,
, .
( ) . 4.30.
3 1
, cos30 , sin 30 . - (,
2 2
,
,
30)
1,5 1,5
sin 30 , cos30 . :
x y
1 1,5
x 2 1,5 x 3
2 x

3 1,5 2 1,5
y y 3 1,732050808 .
2 y 3

r y

x x

. 4.31. ,

z:
2
z x 2 y 2 3 32 3 9 12 2 3 .
174 4

:
background: #58a; /* */
background:
linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
no-repeat 100% 0 / 3em 1.73em,
linear-gradient(-150deg,
transparent 1.5em, #58a 0);

. 4.32. ,

, -
!
.
, -
,
, -

.
,
. 4.32.
, . , -

,
,

. 4.32.
-
, . 4.33,
-
,
, .
, -
:
.note {
position: relative;
background: #58a; /* */
background:
linear-gradient(-150deg,
. 4.33. transparent 1.5em, #58a 0);
}
( .note::before {
content: '';

position: absolute;
)
top: 0; right: 0;
background: linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
100% 0 no-repeat;
width: 3em;
height: 1.73em;
}
19. 175

, . 4.32, -
.
width height ,
, .
30 ((9030)30) , -
:
.note::before {
content: '';
position: absolute;
top: 0; right: 0; .
background: linear-gradient(to left bottom, ,
transparent 50%, rgba(0,0,0,.4) 0)
100% 0 no-repeat;
width: 1.73em;
height: 3em; . 4.34.
transform: rotate(-30deg); ,
}

,
. 4.34.
,

, -
( ) .
. , , ,
,
, , -
, - .
. 4.35.
, transform-
transform-origin: bottom right;
origin bottom right, :
,
, :

.note::before {
/* [ ] */ x
transform: rotate(-30deg);
transform-origin: bottom right; y
} x

. 4.35, x-y
. -

. . 4.36 ,
. 4.36. ,

x y 3 3 1,267949192, ,
1.3em: ,
176 4

.note::before {
/* [ ] */
transform: translateY(-1.3em) rotate(-30deg);
. transform-origin: bottom right;
, }

. 4.37 -
, .
. 4.37. -
,
--, ! ,

,
, (-
) box-shadow!
:

.note {
position: relative;
background: #58a; /* Fallback */
background:
linear-gradient(-150deg,
transparent 1.5em, #58a 0);
border-radius: .5em;
}
.note::before {
content: '';
position: absolute;
top: 0; right: 0;
background: linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4))
100% 0 no-repeat;
width: 1.73em;
height: 3em;
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}

, . 4.38.

!
http://play.csssecrets.io/folded-corner-realistic
19. 177

!
, , -
DRY? ,
translateY() -


, :

30,

-
( ..);
(, ,

)
!
;
-
,
;



, , .
. ,

. ,
-
: . 4.38.

SCSS

@mixin folded-corner($background, $size,


$angle: 30deg) {
position: relative;

!
background: $background; /* */
background: SCSS -
linear-gradient($angle - 180deg,
transparent $size, $background 0); -
border-radius: .5em; .
-
$x: $size / sin($angle); , -
$y: $size / cos($angle); Compass
(http://compass-style.org)
&::before { .
content: ''; -
position: absolute; , -
top: 0; right: 0; !
background: linear-gradient(to left bottom, LESS, ,
transparent 50%, rgba(0,0,0,.2) 0,
rgba(0,0,0,.4)) 100% 0 no-repeat; .
width: $y; height: $x;
transform: translateY($y - $x)
rotate(2*$angle - 90deg);
178 4

transform-origin: bottom right;


border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.2);
}
}

/* ... */
.note {
@include folded-corner(#58a, 2em, 40deg);
}

!
http://play.csssecrets.io/folded-corner-mixin


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
CSS Image Values: http://w3.org/TR/css-images
CSS Transforms: http://w3.org/TR/css-transforms

5
20

.
, , -
.
, . -
, , text-align: justify;
CSS 1?
, . 5.1.
,
. , .

. ,
,
.
-
,
. -

, JavaScript, ,
,
(&shy;), -
,
. 5.1. , - .

,
CSS
.

20. 181

CSS Text Level 3 :


hyphens. : none,
manual auto. manual,

:
, . -
, hyphens: none; , . 5.2.

hyphens: auto
CSS-:
hyphens: auto;

, . .5.2. ,
, HTML- lang, -
, .

(, ),
, (&shy;). hyphens -
, ,
.

.

,
- , . -
, ,
(greedy algorithm) -
(Knuth Plass algorithm). ,

( , ).
,
/, .
, -
, .
,
, , .
-
. , -
, ,
.
182 5

CSS -
. hyphens ,
, . 5.1. ,
, ,
.

!
http://play.csssecrets.io/hyphenation


CSS Text: http://w3.org/TR/css-text
CSS Text Level 4: http://dev.w3.org/csswg/css-text-4

.

, ,
, ,
, .
,
-
CSS Text Level 4 (http://dev.
w3.org/csswg/css-text-4), :
hyphenate-limit-lines
hyphenate-limit-chars
hyphenate-limit-zone
hyphenate-limit-last
hyphenate-character
21

CSS Name: Lea Verou


- Email: lea@verou.me
(. 5.3), . Location: Earth
, -
- . 5.3. -
- ,
, ,
,
. :

HTML Name:
<dl> Lea Verou
<dt>Name:</dt> Email:
<dd>Lea Verou</dd> lea@verou.me
Location:
<dt>Email:</dt>
Earth
<dd>lea@verou.me</dd>

<dt>Location:</dt> . 5.4.
<dd>Earth</dd>
</dl>

, .5.3.
CSS, :
dd {
margin: 0;
font-weight: bold;
}
184 5

Name: Lea Verou Email: <dt> <dd> -


lea@verou.me Location: Earth ,
. 5.4,
. 5.5. display: inline . -

display <dt>,
<dd> , ,
.
. 5.5.
, CSS,
, -
,
.

<dd>.
,
<br>. , :

HTML
<!-- , , - -->
<dt>Name:</dt>
<dd>Lea Verou<br /></dd>
...

display:inline; <dt> <dd> ,


. , ;
.

, <br>,
! ?
Unicode,
: 0x000A. CSS- "\000A" ,
, "\A". -
::after, <dd>,
:

dd::after {
content: "\A";
}
21. 185

, - 0x000A -
, : Line Feed
. 5.5 . ( ),
JavaScript,
, , "\n".
- . , - Carriage Return
CSS-, ( , "\r"
HTML- JS, "\D" CSS), -
</dd>. ,
HTML? .

. , , -
HTML-
.
, , , .
? white-space: pre;.
, .
, , ,
, ( ).
, pre (pre, pre-line, pre-wrap).
pre,
. :

dt, dd { display: inline; }


dd {
margin: 0;
font-weight: bold;
}
dd::after {
content: "\A";
white-space: pre;
}

, ,
, . 5.3!
? ,
, :

HTML
...
<dt>Email:</dt>
<dd>lea@verou.me</dd>
<dd>leaverou@mit.edu</dd>
...
186 5

Name: Lea Verou


Email: lea@verou.me
leaverou@mit.edu
Location: Earth

. 5.6. , <dd>

, . 5.6,
. <dd>,
,
. ,
, ( ,
).
<dd>
<dt> , <dd>.
CSS
,
DOM-. .
<dt>, <dd>:

dt::before {
content: '\A';
white-space: pre;
}

,
<dt>. ,
dt:
dt:not(:first-child)

dt ~ dt

dd + dt

, , -
,
<dt>, , .
- <dd>,
-
( , ).
:
<dd>, <dd>,
21. 187

, CSS . ,
<dd>,
<dd>. CSS- (
. 5.7):

dd + dt::before {
content: '\A';
white-space: pre;
}

dd + dd::before {
content: ', ';
font-weight: normal;
}

Name: Lea Verou


Email: lea@verou.me, leaverou@mit.edu
Location: Earth

. 5.7.

, ()
<dd>,
.
, . ,
:

dd + dd::before {
content: ', ';
margin-left: -.25em;
font-weight: normal;
}

, .

0.25em, .
.

!
http://play.csssecrets.io/line-breaks
22


CSS, background-size, ,

:nth-
child()/:nth-of-type(),
(. 5.8). ,
, -
,
:

tr:nth-child(even) {
background: rgba(0,0,0,.2);
}

,
, . -
,
.
- JavaScript,
<div>,
:nth-line() :nth-child(),
CSS,


, -
.
. (
22. 189

JS );
DOM- , ,
( ,
?). ?

. 5.8.
( Mac OS X),
,

,
, .
, ,
-
? ,
,
CSS-, while (true) {
CSS, em, var d = new Date();
if (d.getDate()==1 &&
-
d.getMonth()==3) {
font-size.
alert("TROLOLOL");
, - }
. 5.9 - }

.
. 5.9.
, ,
.
background-size
190 5

while (true) { line-height, -


var d = new Date(); .
if (d.getDate()==1 && :
d.getMonth()==3) {
alert("TROLOLOL"); padding: .5em;
} line-height: 1.5;
} background: beige;
background-image: linear-gradient(rgba(0,0,0,.2)
. 5.10. - 50%, transparent 0);
background-size: auto 3em;
-
. 5.10,
, .
, -
!
:
,
while (true) { . ?
var d = new Date();
if (d.getDate()==1 && . 5.10,
d.getMonth()==3) { , -
alert("TROLOLOL");
} . ,
}
,
. ,
. 5.11.
.5em,
, -
.

- background-position,

.5em .
background -
, ?
,
- ,
DRY.
,
, ?
.
background-origin
beige, ? ,
: -
WET, DRY. -
background-position ,
,
. :
12. 191

padding: .5em;
line-height: 1.5;
background: beige;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);

. 5.11, ,
! ,
, . ,
, 1 -
line-height,
background-size.

!
http://play.csssecrets.io/zebra-lines


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
CSS Image Values: http://w3.org/TR/css-images

, .
1

- , ,
font-size.
23



-, , -
,
. <pre> <code>,
, ,
, :

while (true) { pre, code {


var d = new Date(); font-family: monospace;
if (d.getDate()==1 }
d.getMonth()==3
alert("TROL pre {
} display: block;
} margin: 1em 0;
white-space: pre;
}
. 5.12.

, ,

-
.
- ,
,
? , ,
, ,

(!) .
, -
http:// . 5.12 -
lea.verou.me/2012/01/whytabs- :
are-clearly-superior. !
23. 193

while (true) {
var d = new Date();
, CSS Text Level 3 - if (d.getDate()==1 &&
CSS : d.getMonth()==3) {
tab-size. alert("TROLOLOL");
}
( ) (
}
). 4 (
) 2
. 5.13. ,
: . 5.12,
,
pre {
tab-size: 2;
}

. 5.13, while (true) {


var d = new Date();
. tab-
if (d.getDate()==1 &&
size, 0,
d.getMonth()==3) {
, ( ) alert("TROLOLOL");
, . 5.14. }
, }

, - . 5.14.
. ,
,
,
! . !

http://play.csssecrets.io/tab-size


CSS Text: http://w3.org/TR/css-text
24

fi

, -
. , , f i -

fl
. , -
i,
f, -
( . 5.15).
,

ffi
,
. -
, -
,
. 5.15.
, . , . 5.15
.

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

24. 195

Unicode: , &#xfb01; - -
fi. , (&),
,
:
E t (et
, , ).
( ,
de&#xfb01;ne!);

st

, -

(. 5.17);

ct
-
Unicode.
, ct
Unicode, , -
,
Unicode PUA (Private User Area, . 5.16. -
,
);

,
,
.
,
, .

piffle
.
,
!
. 5.17.


,
CSS Fonts Level 3 (http://w3.org/TR/css3-fonts)
font-variant - -
,
. font-variant-
ligatures ,
.
,
:

font-variant-ligatures: common-ligatures
discretionary-ligatures
historical-ligatures;
196 5

. , -
, .
:

font-variant-ligatures: common-ligatures;

font-variant-ligatures: common-ligatures
no-discretionary-ligatures
no-historical-ligatures;

font-variant-ligatures none,
. none,
, . font-variant-ligatures
, normal, none.

!
http://play.csssecrets.io/ligatures


CSS Fonts: http://w3.org/TR/css-fonts
25


@font-face

. 5.18. ,
. : Baskerville, Goudy Old Style, Garamond, Palatino ( )

, , ,
.
, . -
. -
,
. ,

, -
.
- ,
.
198 5

<span>, , ,
:

HTML
HTML <span class="amp">&amp;</span> CSS
.amp:
.amp {
font-family: Baskerville, "Goudy Old Style",
Garamond, Palatino, serif;
font-style: italic;
}

,
HTML & CSS
. 5.19.
HTML & CSS , ,
. 5.19.
HTML & CSS HTML (, CMS),
.
CSS -
?

, (
) ,
, .
( )
font-family, , -
, ,
. ,
. ,
, ,
.
, ,
@font-face.
, (
!), ,
,
. ,
25. 199

: -, -
, @font-face, :

@font-face {
font-family: Ampersand;
src: url("fonts/ampersand.woff");
}

h1 {
font-family: Ampersand, Helvetica, sans-serif;
}

, ,
.
, , HTTP-
, ,
.
?
, , , src @font-face
local(), .
, -
:

@font-face {
font-family: Ampersand;
src: local('Baskerville'),
local('Goudy Old Style'),
local('Garamond'),
local('Palatino');
}


Ampersand, ,
-
(.5.20),
. , HTML &
. -
, , CSS
. 5.20. -
. , -
unicode-range. @font-face
,
unicode-range -
@font-face ( ;
200 5

String#charCodeAt() CSS)
! -

.
Unicode , .
BMP (Basic Multilingual Plane , -
- ,
). 99,9% -
, -
!
, , unicode-range
. -
-
, .
D800-DFFF, , Unicode, -
- . ,
,

, , -
.
Unicode. ES6 , -
String#codePointAt() -
JS- :
.

JS
"&".charCodeAt(0).toString(16); // 26

, ,
U+, .
:
unicode-range: U+26;

,
U+, U+400-4FF.

U+4??.
, ; : U+26, U+4??,
U+2665-2670. . :

@font-face {
font-family: Ampersand;
src: local('Baskerville'),
local('Goudy Old Style'),
local('Palatino'),
local('Book Antiqua');
unicode-range: U+26;
}
h1 {
font-family: Ampersand, Helvetica, sans-serif;
}
25. 201

(. 5.21), ,

HTML & CSS
! . 5.21.

, .

. 5.19
Baskerville, unicode-range

. -
,
?

font-style @font-face. -
.

. , PostScript-
Ampersand , Mac OS X,
FontBook
-
I.
(
).
, -
:
PostScript- -
/ -
, . , -

:

@font-face {
font-family: Ampersand;
src: local('Baskerville-Italic'),
local('GoudyOldStyleT-Italic'),
local('Palatino-Italic'),
local('BookAntiqua-Italic');
unicode-range: U+26;
}

h1 {
font-family: Ampersand, Helvetica, sans-serif;
}

, ,
. 5.19. ,

202 5

(, , -
- ),
HTML-. , ,
/ , -
! -
,
!

!
http://play.csssecrets.io/ampersands

(http://allinthehead.com)
(http://24ways.org/2011/creating-customfont-
stacks-with-unicode-range).


CSS Fonts: http://w3.org/TR/css-fonts
26


CSS, background-size, text-shadow,

.
, -

.
.
,
. -
, , ,
-.
, -
. CSS
:
text-decoration: underline;
, , -
.
, ,
CSS, :

a[href] {
border-bottom: 1px solid gray;
text-decoration: none;
}
204 5

,
border-bottom, -
The only way to get , ,
. . 5.22, -
rid of a temptation is
!
to yield to it.
,
. 5.22. - display inline-block
, line-height, :
border-bottom
display: inline-block;
border-bottom: 1px solid gray;
line-height: .9;

? -
, ,
, . 5.23.
, -
. -

, box-shadow:
The only way to
box-shadow: 0 -1px gray inset;
get rid of a tempta
tion ,
is to yield to it. border-bottom, , -
.
. 5.23. - ,
-
, ?
, ,
,


,

.
background-image . -
The only way to get , , - , -
.
rid of a temptation is , ,
to yield to it. ,
CSS Backgrounds & Borders Level 3,
. 5.24.
background-size ,

, .
CSS HTTP-
26. 205

, - The only way to get


CSS:
rid
rid of
of aa temptation
temptation is
background: linear-gradient(gray, gray)
no-repeat; to yyield
yiieelldd to it.
background-size: 100% 1px;
background-position: 0 1.15em; . 5.25.
,
text-shadow

, .5.24.
.
,
p y. , ,
?
,
text-shadow, ,
(. 5.25):

background: linear-gradient(gray, gray) no-repeat;


background-size: 100% 1px;
background-position: 0 1.15em;
text-shadow: .05em 0 white, -.05em 0 white;

.

-
. CSS Text Decoration Level 3 (http://
w3.org/TR/css-text-decor-3)
, :
text-decoration-color
;
text-decoration-style (,
, , . .);
text-decoration-skip , ,
;
text-underline-position -
.

.
206 5

The only way to ggeet


ett , ,
, . ,
rid
ridofofaaatemptation
of temptationis
temptation
to yyield
yiieelldd to it. (.5.26) :

. 5.26. - background: linear-gradient(90deg,


gray 66%, transparent 0) repeat-x;
background-size: .2em 2px;
, background-position: 0 1em;
-
CSS -

, -
background-size.

!
http://play.csssecrets.io/underlines


, ,
(: ).
!, , , -
, ,
!

!
http://play.csssecrets.io/wavy-underlines

(http://aresLuna.org)
(http://medium.com/designing-medium/craftinglink-
underlines-on-medium-7c03a9274f9).


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
CSS Image Values: http://w3.org/TR/css-images
CSS Text Decoration: http://w3.org/TR/css-text-decor
27




text-shadow

-
. , ,
, . .
, ,
,

. 5.27.
,
( http://leaverou.github.io/contrast-ratio;
CSS )
208 5

. ,
,
.
,
: ?!



- -
.
, -,
.

, -
,
100% , 100%
.
. 5.28. ,
, -



(: , :
:
) ( ) ,
.
( -
) , .
, , ,
: ,
, .
. 5.28.
hsl(210, 13%, 30%), hsl(210, 13%, 60%):

background: hsl(210, 13%, 60%);


color: hsl(210, 13%, 30%);

(
), .
, ,
, . -
-,
27. 209

.
80% ,
:

background: hsl(210, 13%, 60%);


color: hsl(210, 13%, 30%);
text-shadow: 0 1px 1px hsla(0,0%,100%,.8); . 5.29. -
: -
-
. 5.28. ,
-
, em,
,
, -
em:

text-shadow: 0 .03em .03em hsla(0,0%,100%,.8);

,
? ,
, ,
, -
(. 5.29).
, -
? ,
, . 5.30. -
. -
, .5.30. CSS-
: (: ,
: )
background: hsl(210, 13%, 40%);
color: hsl(210, 13%, 75%);
text-shadow: 0 -1px 1px black;

!
http://play.csssecrets.io/letterpress


/ ,
text-shadow,
,
210 5

box-
shadow. ,
,

, -
.
. 5.31.
,
text-shadow

text-
,
shadow ( . . 5.32):

background: deeppink;
color: white;
text-shadow: 1px 1px black, -1px -1px black,
1px -1px black, -1px 1px black;

-
-
:

text-shadow: 0 0 1px black, 0 0 1px black,


. 5.32.
0 0 1px black, 0 0 1px black,
1px,
0 0 1px black, 0 0 1px black;

text-
shadow
,
-
,
.
, , -
. -
, ,
3px (.5.33):

. 5.33. background: deeppink;


3px, color: white;
text-shadow: 3px 3px black, -3px -3px black,
text-shadow 3px -3px black, -3px 3px black;

, -
SVG, -
. ,
27. 211

SVG . HTML-
:

SVG
<h1><svg width="2em" height="1.2em">
<use xlink:href="#css" />
<text id="css" y="1em">CSS</text>
</svg></h1>

CSS- :

h1 {
font: 500%/1 Rockwell, serif;
background: deeppink;
color: white;
}

h1 text {
fill: currentColor;
}

h1 svg { overflow: visible }

h1 use {
stroke: black;
stroke-width: 6;
stroke-linejoin: round;
}

,
(.5.34),
, SVG,
,
.

. 5.34.
!
SVG
http://play.csssecrets.io/stroked-text


. -

212 5

-. ,
.

text-shadow
, (.5.35):
. 5.35. , background: #203;
color: #ffc;
text-shadow text-shadow: 0 0 .1em, 0 0 .3em;

,
,
, :

a {
background: #203;
color: white;
transition: 1s;
}
a:hover {
text-shadow: 0 0 .1em, 0 0 .3em;
}

-
, :hover ,
, ,
(. 5.36):
a {
. 5.36. background: #203;
; color: white;
, transition: 1s;
, }
a:hover {
color: transparent;
text-shadow: 0 0 .1em white, 0 0 .3em white;
}

, text-shadow
:
.
text-shadow , -
. ,

, -
text-shadow.
CSS:
27. 213

a {
background: #203;
color: white;
transition: 1s;
}
a:hover {
filter: blur(.1em);
}

, , ,
, , .

!
http://play.csssecrets.io/glow


(, )

(.5.37). -

: ,
1px. . 5.37. ,
-
, ,
. text-
shadow

. 5.38,
CSS-:

background: #58a;
color: white;

text-shadow, -
:
. 5.38.
background: #58a;
color: white;
text-shadow: 0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%);
214 5

. 5.39, -
,
. ,
, ,
.5.37,
. 5.39. , :

background: #58a;
color: white;
text-shadow: 0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%),
0 5px 10px black;

. 5.40.


. ,
SCSS, :

SCSS
@mixin text-3d($color: white, $depth: 5) {
$shadows: ();
$shadow-color: $color;

@for $i from 1 through $depth {


$shadow-color: darken($shadow-color, 10%);
$shadows: append($shadows,
0 ($i * 1px) $shadow-color, comma);
}

color: $color;
text-shadow: append($shadows,
0 ($depth * 1px) 10px black, comma);
}

h1 { @include text-3d(#eee, 4); }

. ,
( black) ,
,
(. 5.40):
27. 215

color: white;
background: hsl(0,50%,45%);
text-shadow: 1px 1px black, 2px 2px black,
3px 3px black, 4px 4px black,
5px 5px black, 6px 6px black,
7px 7px black, 8px 8px black;

SCSS
@function text-retro($color: black, $depth: 8) {
$shadows: (1px 1px $color,);
@for $i from 2 through $depth {
$shadows: append($shadows,
($i*1px) ($i*1px) $color, comma);
}

@return $shadows;
}

h1 {
color: white;
background: hsl(0,50%,45%);
text-shadow: text-retro();
}


CSS Text Decoration: http://w3.org/TR/css-text-decor
28


SVG

,
. , -
, , CSS .
CSS,
, CSS ,
, , .
, -
?

, .
, <span>
,
. ,
DOM-,
.
28. 217

. 5.41. , , -
http://juliancheal.co.uk. ,
, ,

- , <textPath>
CSS ,
<path>, -
,

SVG. SVG
- -
, <circle>.
. ?
-
SVG <textPath>
<text>. <textPath>
<path>,
.
SVG
( line-height ,
SVG ), ,
,
SVG,
.
, circular
reasoning works because , -
, . 5.42.
SVG -
. 5.42.
HTML, , ,
:
218 5

SVG
<div class="circular">
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1,1 0,1 z"
id="circle" />
</svg>
</div>

, viewBox,
width height. -
,
. ;
CSS-,
100% <svg>
.
, .
, , SVG,
. ,
, :
M 0,50: (0,50);

a 50,50 0 1,1 0,1: , -


, , 0 1
. 50, ,
.
, , ;
z: .


(.5.43). <text> <textPath>
xlink:href,
:

SVG
<div class="circular">
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1,1 0,1 z"
id="circle" />
<text><textPath xlink:href="#circle">
circular reasoning works because
</textPath></text>
</svg>
</div>
28. 219

. 5.44, SVG
, - ? -
, -
,
, ,
, CSS
! SVG- , -
SVG


. , ,
- .
;
. -
: ,
<defs> (-
).

SVG-, CSS,
fill: none:

.circular path { fill: none; }

, , -
.
, . 5.43.
SVG-
. ,
(black)

SVG- overflow: visible ,



:

.circular {
width: 30em;
height: 30em;
}

.circular svg {
display: block;
overflow: visible;
}

. 5.46. , . 5.44.
, . ,
, - ,
SVG-, , CSS
220 5

.
, , - -
,
<svg>, SVG-
. ,
:

.circular {
width: 30em;
height: 30em;
margin: 3em auto 0;
. 5.45. }
,
.circular svg {
display: block;
overflow: visible;
}

!
.5.42, -
.
,
(, -),
.

,
SVG.
,
SVG-,
:

HTML
<div class="circular">
circular reasoning works because
</div>

. 5.46. : -
-
-
-. circular, -
: overflow: , SVG-
visible :
28. 221

JS
$$('.circular').forEach(function(el) {
var NS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
var svg = document.createElementNS(NS, "svg");
var circle = document.createElementNS(NS, "path");
var text = document.createElementNS(NS, "text");
var textPath = document.createElementNS(NS, "textPath");
svg.setAttribute("viewBox", "0 0 100 100");

circle.setAttribute("d", "M0,50 a50,50 0 1,1 0,1z");


circle.setAttribute("id", "circle");

textPath.textContent = el.textContent;
textPath.setAttributeNS(xlinkNS, "xlink:href", "#circle");

text.appendChild(textPath);
svg.appendChild(circle);
svg.appendChild(text);
el.textContent = '';
el.appendChild(svg);
});

!
http://play.csssecrets.io/circular-text


Scalable Vector Graphics (SVG): http://w3.org/TR/SVG

6
29


,
, , -
.
- .
. CSS 2.1
.
cursor , - ,
pointer,
help. wait progress
. .
CSS User Interface Level 3 (http://w3.org/TR/css3-ui/#cursor)
,
.
,
, .
!

. 6.2,
. ,
-. ,
29. 225

cell, ,
.
.

. 6.1. CSS 2.1 (


, OS X)

-

. -

-,
.
226 6

. 6.2. , CSS User Interface Level3


(http:// w3.org/TR/css3-ui/#cursor) ( , OS X)


, not-allowed
(.6.3). ,
-
, . ,
29. 227

- ,
-
, .
:

:disabled, [disabled], [aria-disabled="true"] {


cursor: not-allowed;
}

!
http://play.csssecrets.io/disabled



. -

-
? ,
, . 6.3.
, , not-allowed
,


(,
, -
),
,
,
.
!

, , -
,
. ,
,
, - .
, -
- -
, -
.
.
none. -
CSS 2.1,
GIF
11, :
228 6

video {
cursor: url(transparent.gif);
}

,
cursor: none. ,
Level 3.
:

cursor: url('transparent.gif');
cursor: none;


CSS Basic User Interface: http://w3.org/TR/css3-ui
30 ,



,
. -
(Paul Fitts)
1954, , , - http://
simonwallner.at/ext/fitts.
,

. -
T D
a b log 2 1 , T , D -
W
, W , a b .
,
-
, -
(Human-Computer Interaction, HCI). ,
- , ,
,
.
, ,
. , ,
( ), -
,
( ), .
230 6

,
. , -
,
.
, ,
, , , -
, -
. -
( ).
CSS?


, , -
.6.4,
10px
. -
, cursor:
. 6.4. pointer, -
:
1 , -

() ,
() .
-
, ,
,
. ,
10px
:

border: 10px solid transparent;

, . 6.5, ,
! ,

1
(affordance) , -
,
. , ,
, ,
. https://ru.wikipedia.org/wiki/
( https://en.wikipedia.org/wiki/Affordance).
, -
.
30. , 231

. -
background-clip -
:

border: 10px solid transparent;


background-clip: padding-box;

. 6.6, . 6.5. ! -
. , -
border,


, -

. ? :
()
(. 6.7):

border: 10px solid transparent;


box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
background-clip: padding-box;

! . 6.6.

http://play.csssecrets.io/hit-area-border background-clip

, box-shadow
-
, ,

. , -
,
,
. ,
-
,
. 6.7.
,
box-shadow
( , ,
):

box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset,


0 .1em .2em -.05em rgba(0,0,0,.5);

,
(. 6.8).
232 6

.
,
. ?
-
,
, -
. 6.8. .

-
,
10px :

button {
position: relative;
/* [ ] */
}

button::before {
content: '';
position: absolute;
top: -10px; right: -10px;
bottom: -10px; left: -10px;
}

,
, . -
-
, , !

!
http://play.csssecrets.io/hit-area


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
31


-. - -
, (checkbox),
-
CSS, -,
-
,
, (radio button),
, .
CSS.
CSS , -
,
CSS .
,
CSS ,

.
, -
.
.

, , -
-,
div JavaScript.

, -
?
234 6


, -
:checked
. Selectors
[checked]? Level 3 (http://w3.org/TR/css3-selectors)

: :checked .
-
,

, -
HTML. , .
-
, ,
,
CSS.

.

, - , ,
-
, , . ,
, -
-
, <label>.


<label>, ,
, .

(label), ,
.
,1
-

. ,
, ,
,
!
.
:

HTML
<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>

CSS 2.1: [ ] ,
1

CSS, ,
.
, .
31. 235


,
Awesome!
, . 6.9.
:

input[type="checkbox"] + label::before {
content: '\a0'; /* */
display: inline-block;
vertical-align: .2em;
width: .8em; ,
height: .8em;
margin-right: .2em; ,
border-radius: .2em; , -
background: silver; . -
text-indent: .15em;
line-height: .65;
} CSS -

. 6.9 , - !

. -
, .
,
, .
Awesome!
:
. 6.10.
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}

. 6.10, -
.
!

,
-
, -
-. - .
, display: none, input[type="checkbox"]
- ,
. ,
(-
:
, ),
, ,
input[type="checkbox"] {
position: absolute; ,
clip: rect(0,0,0,0); -
} .
236 6

Awesome! ! -
. , -
: ,
Awesome! ,
, . 6.11:
Awesome!
input[type="checkbox"]:focus + label::before {
. 6.11. :
box-shadow: 0 0 .1em .1em #58a;
}
,
;
input[type="checkbox"]:disabled + label::before {
,
background: gray;
;
box-shadow: none;

color: #555;
}

,
, - .
--
:
.

- !

(radio button). !
-
. http://play.csssecrets.io/checkboxes

(Ryan Seddon)
,
(http://thecssninja.com/css/custom-inputs-using-css). -
-
, (http://labs.thecssninja.
com/bootleg), , -
, . ,

-.


-
, HTML
. ,
: ,
, , .
31. 237


,
.
,
,
, . ,
, . 6.12:
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
input[type="checkbox"] + label {
display: inline-block;
padding: .3em .5em;
background: #ccc;
background-image: linear-gradient(#ddd,
#bbb); . 6.12.
border: 1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px white;
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:active + label {
box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}


. -
, ,
- .

!
http://play.csssecrets.io/toggle-buttons


Selectors: http://w3.org/TR/selectors
32



RGBA


,

. , -
(. 6.13) . -

HTML, CSS,
:

.overlay { /* */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.lightbox { /* , */
position: absolute;
z-index: 1;
/* [ ] */
}
32. 239

. 6.13. Twitter

,
. .lightbox z-index,
. , , ,
HTML,
CSS . -
, .
, .


-
HTML, , :

body.dimmed::before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0,0,0,.8);
}
240 6

,
CSS-. ,
<body> - -
::before. ,
JavaScript, dimmed.

::before ,
z-index: -1;, . ,
,
Z.
( ), ,
, .
,
JavaScript. -
-
, , , ,
.
, ,
, .

box-shadow
-
. -

,
box-shadow , .
, ,
:
box-shadow: 0 0 0 999px rgba(0,0,0,.8);


(> 2000px).
.
,
, ,
. -
,
, ,
vmax. , vmax, , 1vmax
1vw, 1vh, .
32. 241

100vw , , , 100vh
. , ,
, 50vmax, ,
100vmax
:

box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);

,
, . ?
-, -
, ,
, position: fixed;
, .
,
, .

-
.
-, (
)
. -
,
. box-shadow
. ,
,
.
.

!
http://play.csssecrets.io/dimming-box-shadow


,
, ( <dialog>,
showModal()),
, User Agent.

::backdrop, , :
242 6

dialog::backdrop {
background: rgba(0, 0, 0, .8);

, -
, ,
, . ,
, , ,
-
.

!
http://play.csssecrets.io/native-modal


CSS Values & Units: http://w3.org/TR/css-values/#viewport-relativelengths
CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
Fullscreen API: http://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element
33



, ,


-
.
, ,

.
, . 6.14, ,
, , -
. ,
, , , -
, .
. -
Filter Effects (http://w3.org/TR/filter-effects) ,
blur() .
? ,
?
<body>, , , -
. ,
,
244 6

,
, .
?

. 6.14. - polygon.com

, -
HTML: -
, ,
, -,
. <main>,


: -
(
) ,
. :

HTML
<main>Bacon Ipsum dolor sit amet</main>
<dialog>
O HAI, I'm a dialog. Click on me to dismiss.
</dialog>
<!-- -->
33. 245

. 6.15 , - ,
. , <dialog> -

<main> ,

,
, : .

main.de-emphasized {
filter: blur(5px);
}

. 6.16,
. -
,
-
. CSS
, -
:
. 6.15. -
main { , -
transition: .6s filter;

}

main.de-emphasized {
filter: blur(5px);
}


( ).

brightness() / contrast():

main.de-emphasized {
filter: blur(3px) contrast(.8)
brightness(.8);
}
. 6.16. -
<main>,
. 6.17. -
CSS ,
,
. , -
- ,

(, box-shadow,
).
246 6

,
.6.17. ,
.6.18, ,
.

!
http://play.csssecrets.io/deemphasizing-blur
. 6.17.

CSS

(Hakim El
Hattab, http://hakim.se) -
(http://lab.hakim.
se/avgrund). , ,
,
-
scale(),
,
,
.
. 6.18.
CSS

box-shadow,


Filter Effects: http://w3.org/TR/filter-effects
CSS Transitions: http://w3.org/TR/css-transitions
34


CSS, background-size

,
,
. -
,

,
,
-
, .

( -
), ,
,
, -
,
,
. . 6.19.
- ,
,
, Google Reader,
,
RSS- Google (
), - ,

248 6

: , ,
/ (. 6.20).

. 6.20. Google Reader,


. :
. : RSS-.
:

Google Reader,
.
CSS?

, -
( !):

HTML
<ul>
<li>Ada Catlace</li>
<li>Alan Purring</li>
<li>Schrdingcat</li>
<li>Tim Purrners-Lee</li>
<li>WebKitty</li>
<li>Json</li>
<li>Void</li>
<li>Neko</li>
<li>NaN</li>
<li>Cat5</li>
<li>Vector</li>
</ul>
34. 249

<ul> ,
-
:

overflow: auto;
width: 10em;
height: 8em;
padding: .3em .5em;
border: 1px solid silver;

. -
:

background: radial-gradient(at top, rgba(0,0,0,.2),


transparent 70%) no-repeat;
background-size: 100% 15px;

. 6.21.
,
. ,
:
, -
, -
. -

background-attachment: fixed;
, ,
. . 6.21.

-
?
.
, Backgrounds &
Borders Level3 (http://w3.org/TR/css3-background/#local0) background-attachment
: local.
background-attachment: local
.
, : ,
,
. -
.
, : ,
, , ,
250 6

. , ,
background-attachment (scroll), ,
.
background-attachment, local,
, .
,
, .

, (
):

background: linear-gradient(white, white),


radial-gradient(at top, rgba(0,0,0,.2),
transparent 70%);
background-repeat: no-repeat;
background-size: 100% 15px;
background-attachment: local, scroll;

. 6.22 , .
, ,
: ,
.
?

. 6.22. . :
. : . :

,
() ,
white (hsla(0,0%,100%,0)
rgba(255,255,255,0)),
:
34. 251

background: linear-gradient(white, hsla(0,0%,100%,0)),


radial-gradient(at top, rgba(0,0,0,.2),
transparent 70%);

. 6.23. white transparent


. ,
. 6.23, transparent?
, .
-
-
rgba(0,0,0,0),
: ,
.
,
white ( , 15px - -
), . -

, -
-
. , -
, premultiplied RGBA,
, . .
,
( , -
,
).
,
, -
50px . -
, , .
. 6.24:

background: linear-gradient(white 30%, transparent),


radial-gradient(at 50% 0, rgba(0,0,0,.2),
transparent 70%);
background-repeat: no-repeat;
background-size: 100% 50px, 100% 15px;
background-attachment: local, scroll;
252 6

. 6.24.

, ,
, ,
, (
! ).

!
http://play.csssecrets.io/scrolling-hints


(http://kizu.ru/en/fun/shadowscroll).
, -
,
.


CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
CSS Image Values: http://w3.org/TR/css-images
35



, . ,
-
, -

- .

.
. ,
,
.
-
. -
- ,
.
,

, , -
GIF CSS. , -
,
, - .
, ,
,
-
.
254 6

. 6.25. , -
2011 ( -
The Guardian). ,
, ,
, , -
(Move the slider). ,

: http://theguardian.com/uk/interactive/2011/aug/09/london-riots-before-after-photographs


. ,
, ,
. , HTML
.
, ,
JavaScript JS-.
-
? , !
35. 255

resize CSS
, , -
, -
, <textarea> resize:
vertical,
. -
-

, ,
JavaScript: -
.
, .
, -
. CSS User Interface Level 3 (http://
object-fit object-
w3.org/TR/css3-ui/#resize) ,
position -
,
: resize! ,
-
,

,
both , -
<textarea>,
- .
.
,
overflow
visible. resize -
none,
. both,
horizontal vertical,
.
,

. , ,
!

<img>. resize -
<img> ,
-
.
<div>.
:
256 6

HTML
<div class="image-slider">
<div>
<img src="adamcatlace-before.jpg" alt="Before" />
</div>
<img src="adamcatlace-after.jpg" alt="After" />
</div>

CSS -
:

.image-slider {
position:relative;
display: inline-block;
}

.image-slider > div {


position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%; /* */
overflow: hidden; /* */
}

.image-slider img { display: block; }

. 6.26, -
.
,
.

,
resize, -
:

.image-slider > div {


. 6.26. position: absolute;
top: 0; bottom: 0; left: 0;
- width: 50%;
, overflow: hidden;
resize: horizontal;
}

,

-
(. 6.27),
35. 257


! ,
:
<div>, -
;
-
.
.
max-width 100%. . 6.27.
. , -
-
. ,
(, -

::-webkit-resizer), -
-
, .
: ,
, ,
pointer-events: none. , ,
,
. :

.image-slider > div::before {


content: '';
position: absolute;
bottom: 0; right: 0;
width: 12px; height: 12px;
background: white;
cursor: ew-resize;
}

cursor: ew-resize -
, ,
.
, ,
.
-
(. 6.28).
. ,
, 5px (
. 6.29). :
258 6

padding: 5px;
background:
linear-gradient(-45deg, white 50%,
transparent 0);
background-clip: content-box;


user-select: none
, -
-
. 6.28. .
:

.image-slider {
position: relative;
display: inline-block;
}

.image-slider > div {


position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}

.image-slider > div::before {


content: '';
position: absolute;
bottom: 0; right: 0;
width: 12px; height: 12px;
. 6.29. padding: 5px;
, background:
linear-gradient(-45deg, white 50%,
, transparent 0);
, background-clip: content-box;
5px cursor: ew-resize;
}

.image-slider img {
display: block;
user-select: none;
}
35. 259

!
http://play.csssecrets.io/image-slider


resize CSS, , -
.
:
;

-
, ,
.
-
,
;
-
,
, ,
.
,
slider ( HTML).
, -
. .
JS, -
, ,
:

HTML
<div class="image-slider">
<img src="adamcatlace-before.jpg" alt="Before" />
<img src="adamcatlace-after.jpg" alt="After" />
</div>

JS
, div:
260 6

HTML
<div class="image-slider">
<div>
<img src="adamcatlace-before.jpg" alt="Before" />
</div>
<img src="adamcatlace-after.jpg" alt="After" />
<input type="range" />
</div>

JavaScript :

JS
$$('.image-slider').forEach(function(slider) {
// div
//
var div = document.createElement('div');
var img = slider.querySelector('img');
slider.insertBefore(img, div);
div.appendChild(img);
//
var range = document.createElement('input');
range.type = 'range';
range.oninput = function() {
div.style.width = this.value + '%';
};
slider.appendChild(range);
});

CSS-, , -
. -
:
resize;

.image-slider > div::before,


;
max-width ,
.
CSS- :

.image-slider {
position:relative;
display: inline-block;
}
.image-slider > div {
35. 261

position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%;
overflow: hidden
}
.image-slider img {
display: block;
user-select: none;
}

, ,
, : . 6.30.
- ,
(. 6.30).
CSS,
:

.image-slider input {
position: absolute;
left: 0; input:in-range
bottom: 10px; input,
width: 100%; -
margin: 0;
} , -
. -

. 6.31, - -
. -
, .
,
. ::-moz-range-track, ::-ms-track,
::-webkit-slider-thumb, ::-moz-range-thumb ::-ms-
thumb. -
,
, , -
,

. .
-

,
/ . multiply, screen . 6.31.
luminosity .
, filter: contrast(4)
-,
262 6

. -
, -
.
, :

filter: contrast(.5);
mix-blend-mode: luminosity;

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


CSS:
.

width: 50%;
-
transform: scale(2);
CSS
transform-origin: left bottom;

. 6.32.
,
,
resize.

(Dudley Storey) -
(http://demosthenes.info/blog/819/A-Before-And-After-Image-
Comparison-Slide-Control-in-HTML5).


CSS Basic User Interface: http://w3.org/TR/css3-ui
CSS Image Values: http://w3.org/TR/css-images
CSS Backgrounds & Borders: http://w3.org/TR/css-backgrounds
Filter Effects: http://w3.org/TR/filter-effects
Compositing and Blending: http://w3.org/TR/compositing
CSS Transforms: http://w3.org/TR/css-transforms

7
36

, height
, -
. ,
width? , ,
HTML5, :

HTML
<p>Some text []</p>
<figure>
<img src="adamcatlace.jpg" />
<figcaption>
The great Sir Adam Catlace was named after
Countess Ada Lovelace, the first programmer.
</figcaption>
</figure>
<p>More text [].</p>

, - ,
, .
.7.1. ,
( ),
.
:
. ,
,
?1

CSS , -
1

, .
36. 265

CSS-,
Lets assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.

width,
:
<figure> ,
,
, ,
The great Sir Adam Catlace was named after Countess Ada Lovelace, the programmer ever.

We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.

, (. 7.2);
. 7.1.
display: inline-block
; CSS-

, ,

(. 7.3). ,
-
, -
Lets assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.

We also have some more text here. Et laborum venison nostrud, ut veniam

.
sint kielbasa ullamco pancetta.

textalign: center
text-align: left -
The great Sir Adam Catlace was named after

(p, ul, ol, dl, ...);


Countess Ada Lovelace, the programmer.

. 7.2.


width max-width -

max-width: 100% figure > img.
-
, Lets assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.

,
.

CSS -
, The great Sir Adam Catlace was named after Countess Ada Lovelace, the programmer.

? We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.

. 7.3.
, display:
inline-block

, CSS Intrinsic
& Extrinsic Sizing Module Level 3 (http://w3.org/TR/
css3-sizing),
width height,
min-content.

266 7

(
Lets assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.

-
). , !
-
The great Sir Adam Catlace was named after
Countess Ada Lovelace, the programmer. , ,
:
We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.

. 7.4.
figure {
width: min-content;
margin: auto;
}

, max- . 7.4. -
content, - -
,
display: inline-
max-width, :
block .
fit-content figure {
, - max-width: 300px;
( , max-width: min-content;

margin: auto;
-
}
min-content). figure > img { max-width: inherit; }

max-width ,
, max-width: inherit
.

!
http://play.csssecrets.io/intrinsic-sizing

(Dudley Storey, http://demosthenes.info)


, (http://demosthenes.
info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent).


CSS Intrinsic & Extrinsic Sizing: http://w3.org/TR/css3-sizing
37



, -:
, ,
,
. , -
, ,
display, . -
,
, .
,
, width
, . 7.5.

, .
?

CSS 2.1
table-layout. auto, -
, -
, . 7.5.
, fixed, .
268 7

,
,
.
,
.

,
,
.
,

.
,

.
,
.

2000px.
,
3000px,
.
33,3% 66,6%
1000px .

text-overflow: ellipsis .
,
,

.

. 7.5.
( )
37. 269

,
,
.
,
.

,
,
. ,

.
,
, .
.

, .
1000px

text-overflow: ellipsis .
,

,

.

. 7.6. , . 7.5, table-layout: fixed.


( ):
,
;
;
, ;
overflow text-overflow ;
( overflow
visible)
270 7

(, !), -
.
,
, ( text-overflow),
.
,
.
,
. , -
-
. .
,
<table> display: table. -
, , ,
( 100%).
, text-overflow: ellipsis,
. !
.7.6.

table {
table-layout: fixed;
width: 100%;
}

!
http://play.csssecrets.io/table-column-widths

(Chris Coyier, http://css-tricks.com), -


(http://css-tricks.com/fixing-tables-long-
strings).

38


,
,
.


. :
.
, -
.
,
. ,

, ;
,
, .
,
( );
, -
.
, , ,
, (. 7.7);
<textarea>, -
( http://
bytesizematters.com).
272 7

. 7.7.
.
, : .
Adobe Color (http://color.adobe.com):
Agave (http://color.adobe.com/agave-color-theme-387108)
Sushi Maki (http://color.adobe.com/Sushi-Maki-colortheme-350205)

CSS -
- . ,
,
4. li:nth-
child(4) , , ;
, ,
.

(~) :nth-child(), li:nth-child(4), li:nthchild(4) ~ li.

38. 273

(.7.8), -
1 2 3 4
. ,

5 6 7 8
,
CSS? ,
. 7.8. ,
.

li:nth-child(4),
li:nthchild(4) ~ li

, , :
:only-child, .
; ,
, -
. , , . 7.7
, .
CSS :only-child:
li:only-child {
/* , */
}

:only-child :first-child:last-child. -
: ,
, . , :last-child
:nthlast-child(1):

li:first-child:nth-last-child(1) {
/* , li:only-child */
}

1,
. ,
li:first-child:nth-last-child(4). ,
:only-child ,
, .
, .
: ,
: :first-child, :nth-last-child(4). ,
,
, , ,
. ?
: , -
(. 7.9). , , :
274 7

,
, -
:nth-child(),
(~) ,

:nth-of-
. ,
type(), -
, , -
, , :
,
. li:first-child:nth-last-child(4),
- li:first-child:nth-last-child(4) ~ li {
, /* ,
*/
- }
.
-
-
, ,
SCSS,
1 2 3
:

1 2 3 4
SCSS
/* */
1 2 3 4 @mixin n-items($n) {
&:first-child:nth-last-child(#{$n}),
5 6 7 8
&:first-child:nth-last-child(#{$n}) ~ & {
@content;
}
. 7.9. }

li:first- /* : */
child:nth-last-child(4) li {
, @include n-items(4) {
/* */
}
}

(Andr Lus, http://andr3.net) , -


(http://andr3.net/
blog/post/142).

38. 275



, - ,
. , :nth-*,
:nth-child() -
, : . .
,
,
-
,
an+b (, :nth-child(2n+1)), n -
0 + ( -
- .
-,
). http://lea.verou.me/demos/nth.
html, -
n+b (, a 1), -
.
n,
, b. ,
n+b 1 2 3
, b- . , :nth-
child(n+4) ,
, (. 7.10). 1 2 3 4


1 2 3 1 2 3 4


5 6 7 8
1 2 3 4
. 7.11.

1 2 3 4 5 6 7 8
li:first-
child:nth-last-child(n+4),
. 7.10. li:first-child:nth-last-child(n+4)
li:nth-child(n+4) , ~ li ,


,
(.7.11). , :nth-last-
child(), n+4:

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li {
/* ,
*/
}
276 7

, -n+b
1 2 3
b .
-

1 2 3 4 ,
,
:
1 2 3 4
li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li {
5 6 7 8
/* ,
*/
. 7.12. }

li:first-
child:nth-last-child(-n+4),
, ,
li:first-child:nth-last-child(-n+4) .
~ li , ,
, 2 6-
:

li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li {
/* ,
2 6 */
}

!
http://play.csssecrets.io/styling-sibling-count


Selectors: http://w3.org/TR/selectors
39 ,


- -
, ,
. :
,
, ;
,
,
. -
.
- , -
(. 7.15
. 7.14).

, -
(. 7.13).
-

:
,
. 7.13. -
.

margin: auto. , http://airbnb.com
-
:
278 7

. 7.14. - http://kayak.com -
,

HTML
<footer>
<div class="wrapper">
<!-- -->
</div>
</footer>
CSS- , :
footer {
background: #333;
}
.wrapper {
max-width: 900px;
margin: 1em auto;
}

? -

.
!
-
calc()

+ CSS
, ?

!



: , -
,
calc() -
, margin: auto. ,
. ,
39. , 279

.
-
( ,
),
50% - 450px.
calc(), CSS Values and
Units Level3 (http://w3.org/TR/css-values-3/#calc), -

. auto
calc(), -:

.wrapper {
max-width: 900px;
margin: 1em calc(50% - 450px);
}

,
-, -
auto
margin.
calc(),
CSS,
, -
. ,

padding:

footer {
max-width: 900px; . 7.15.
padding: 1em calc(50% - 450px); -
Cono Sur
background: #333;
Vineyards and Winery (http://
}
conosur.ie)
.wrapper {}

,
CSS- , , -

!

. -
HTML. -
? , ,
.
.
, - -
width, . .
280 7

, -
,
. ? ,
50%-450px ,
900px (2450px) .
, width -
900px .
900px,
,
, DRY.
,
.
, -
- , calc()
:

footer {
padding: 1em;
padding: 1em calc(50% - 450px);
background: #333;
}

! ,
DRY -
,
CSS- !

!
http://play.csssecrets.io/fluid-fixed

. 7.16. - Alfred
(https://www.alfredapp.com),


Mac OS,
- CSS Values & Units: http://w3.org/TR/css-values
-
,

40

44 , -
CSS.
(James Anderson,
http://twitter.com/jsa/status/358603820516917249)

CSS :
, text-align: center ,
, margin: auto .
, , ,
.
CSS
. ,
:
, ;

, -
.

,
.
,
. ,
:
282 7

( )
, HTML;
, , ,
.
, -
Centering in the Unknown (http://csstricks.com/
centering-in-the-unknown).

, -
<body>, , ,
:

Am I centered yet?
HTML
Center me, please!
<main>
<h1>Am I centered yet?</h1>
<p>Center me, please!</p>
</main>


. 7.17. CSS , ..,
. 7.17.


-
:

main {
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em; /* 6/2 = 3 */
margin-left: -9em; /* 18/2 = 9 */
width: 18em;
height: 6em;
}

, -
( ),
, ,
, ,
. calc() :
40. 283

main {
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;
}

, ,
, -
, .
, -
, . ,
CSS ( margin)
.
CSS, .
CSS. -
translate(),

, !
,
, Am I centered

, CSS, - yet?
Center me, please!

.
:

main { . 7.18. -
position: absolute; -
top: 50%;
left: 50%;
transform: translate(-50%, -50%); CSS
}

. 7.18, Center me, please!

: - Center me, please!


Center me, please!

, .
Center me, please!
Center me, please!
Center me, please!

, ,
Center me, please!
Center me, please!
Center me, please!
: Center me, please!
Center me, please!

-
, . 7.19. ,

;
,
,
,
284 7

(.7.19). ,
;
,
, .
, transform-style: preserve-3d,
, , .

!
http://play.csssecrets.io/vertical-centering-abs

, ,
,
- StackOverflow (http://stackoverflow.com)
Charlie (http://stackoverflow.com/users/479836/

charlie), Align
vertically using CSS 3? (http://stackoverflow.com/a/16026893/90826)
16 2013 .


,
translate(),
.
50% ,
left top?
-
margin, :

main {
width: 18em;
padding: 1em 1.5em;
margin: 50% auto 0;
transform: translateY(-50%);
}

, . 7.20, .
, margin
. ,
margin-top margin-bottom!
40. 285

,
, -
. CSS Values and Units Level3
(http://w3.org/TR/css-values-3/#viewport-relative-lengths)
Am I centered yet?
Center me, please!

, :
vw . . 7.20.
, 1vw 1%
, 100%;

vw, 1vh 1% - margin
;

1vmin 1vw, -
;
1vh; , , -
, -
1vmax 1vw, -
; ,
1vh. -
,
-
vh: .

main { Make full screen
width: 18em; sections with 1 line of CSS
padding: 1em 1.5em; (Andrew Ckor, http://medium.
margin: 50vh auto 0; com/@ckor/make-full-screen-
transform: translateY(-50%); sections-with-1-line-of-css-
} b82227c75cbd).

. 7.21,
. ,
, -
, , - Am I centered yet?
. Center me, please!

!
. 7.21.
http://play.csssecrets.io/vertical-centering-vh 50vh

,


286 7


, , , (
Flexbox, http://w3.org/TR/css-flexbox)
. ,
, ,
, -
.
, , : display: flex
( <body>)
margin: auto , ( -
<main>):

body {
display: flex;
min-height: 100vh;
margin: 0;
}

main {
margin: auto;
}

, margin: auto -
, .
, (
): max-
content. ( ,
?)
,
, . 7.17 (
), , -
.
,
(
). , :

HTML
<main>Center me, please!</main>
40. 287


main -
, align-items justify- Center me, please!

content,
Flexbox (. 7.22):

main {
display: flex; . 7.22.
align-items: center; -
justify-content: center;
width: 18em;
height: 10em;
}

<body>

<main>, margin:
!
auto , -
http://play.csssecrets.io/vertical-centering .


CSS Transforms: http://w3.org/TR/css-transforms
CSS Values & Units: http://w3.org/TR/css-values
CSS Flexible Box Layout: http://w3.org/TR/css-flexbox
CSS Box Alignment: http://w3.org/TR/css-align

.
!
CSS Box Alignment Level 3 (http://
w3.org/TR/css-align-3), -
.
, :

align-self: center;
, -
. , ,
,
!
41


, (. -
), calc()

,
, -



-. ,
.
.
: -
, ,
,
, (, -
). ,
, , .
,
, .
,
, . ,
CSS 2.1 : -
, ,
. ,
, .
,
41. 289

CSS 2.1. CSS !


?


, <body>
:

HTML
<header>
<h1>Site name</h1>
</header>
<main>
<p>Bacon Ipsum dolor sit amet
<!-- - baconipsum.com --></p>
</main>
<footer>
<p> 2015 No rights reserved.</p>
<p>Made with by an anonymous -
pastafarian.</p> -
</footer> ,

, -

,
,
. - ,
. 7.23. -
. ,
. 7.24. CSS Level 3 -
! , - :

, ? http://cssstickyfooter.com

, http://ryanfait.com/sticky-footer
. http://css-tricks.com/snippets/
, css/sticky-footer
CSS-: http://pixelsvsbytes.com/
blog/2011/09/sticky-css-
2 +3 +
footersthe-flexible-way
+ =
=21.5em+31em+1em=7em http://mystrd.at/modern-clean-
csssticky-footer
, 2.5em. -
, , - , -
, calc() , -
.
290 7

, , ,
Site name
CSS-:
Bacon ipsum dolor sit amet turkey veniam shankle,
culpa short ribs kevin t-bone occaecat. Et laborum

main {
venison nostrud, ut veniam sint kielbasa ullamco
pancetta. Qui drumstick tail, bacon leberkas shoulder

min-height: calc(100vh - 2.5em - 7em);


capicola laborum. Minim ipsum bacon, mollit laboris
t-bone pariatur. Ham hock reprehenderit sint beef,

/* /
sausage pig eiusmod t-bone shankle strip steak.

Cow enim excepteur, boudin dolore lorem magna


fugiat consequat voluptate. Picanha fugiat chicken,
cupim aliquip magna mignon prosciutto ut
: */
nostrud. Kielbasa rump frankfurter sunt corned beef.
box-sizing: border-box;
id. Chicken sunt nisi tempor sed. In eiusmod non
fatback tempor tenderloin pastrami adipisicing cow
}
lorem ut tail jerky cupidatat venison. Jowl consequat
commodo pork loin ipsum pork belly prosciutto aute
beef. Ball tip shoulder aliqua, fugiat landjaeger kevin
pork chop beef ribs leberkas hamburger cillum turkey
ut doner culpa.
-
<header> <main>,
2015 No rights reserved.

Made with  by an anonymous pastafarian.


:

#wrapper {
. 7.23. min-height: calc(100vh - 7em);
, - }

(. 7.25), -

Site name .
Bacon ipsum dolor sit amet turkey veniam shankle,
culpa short ribs kevin t-bone occaecat. Et laborum
, -
venison nostrud, ut veniam sint.
, - -
2015 No rights reserved. .
Made with  by an anonymous pastafarian.
,
, min-height
, -
. 7.24. (

DRY ),


HTML,
. -
Site name ,
Bacon ipsum dolor sit amet turkey veniam shankle, !
culpa short ribs kevin t-bone occaecat. Et laborum
venison nostrud, ut veniam sint.

!
2015 No rights reserved.

Made with  by an anonymous pastafarian. http://play.csssecrets.io/sticky-footer-fixed

. 7.25.
,

CSS
41. 291

! -
, -

-
calc(): -
. + -
CSS- .
, -
HTML-. -, -
display: flex <body>, . -
calc()

,
.
. flex- CSS - -
flow column,
.
(.7.26):

body {
display: flex; Bacon

flex-flow: column;
ipsum 2015
Site dolor sit No

}
amet rights
name turkey reserved.
veniam
Made
shankle,
with
culpa

, short ribs
kevin t-
by
an

bone
occaecat.
anonymous
pastafarian.

, -
Et
laborum

, . 7.26.
. , flex
!

,
100vh min-height
<body>, -
.
, .7.24, , ,
<body>,
( ,
CSS).
, -
,
. ,
( 1) flex <main>:
292 7

body {
flex -
display: flex;
flex-flow: column;
,
min-height: 100vh;
flex-grow, flex-
}
shrink flex-basis. -
, main { flex: 1; }
flex
0, ,
, ! -
, flex
(
-
, . 7.25) -

!
. -
,
?
<main>
flex:2, <footer>
!
flex: 1, -
http://play.csssecrets.io/sticky-footer
-
.
4 2 (Philip
2 1, Walton, http://philipwalton.com)
, (http://
. philipwalton.github.io/solved-by-

flexbox/demos/sticky-footer).


CSS Flexible Box Layout: http://w3.org/TR/css-flexbox
CSS Values & Units: http://w3.org/TR/css-values

8
42


CSS, CSS

-
, -
CSS, ( -
top margin-top?
)

-
,
- ,
, ,
CSS .
-
.
, , -
,
, , ,
, ,
. , ,
, (. 8.1),
transform none translateY(350px).
,
.
, :
, (,
:hover, ,
transform: scale(0), );
42. 295

, (, -
,
).
JavaScript -
.
.
CSS?

. 8.1.


CSS
, :
296 8

@keyframes bounce {
60%, 80%, to { transform: translateY(350px); }
70% { transform: translateY(250px); }
90% { transform: translateY(300px); }
}
.ball {
/* , .. */
animation: bounce 3s;
}

, -
. 8.1. , ,
. , ,
, , ,
. ,
.
? .
, , (-

(easing curve)). , -
, ,
, .8.2.
, :
, , 80%!
-
ease animation/transition,
animation-timing-function/transition-timing-
function. ease ,
.
,
;
(50%, 80%) .8.3.
, ease-out
ease-in. ,
:
,

. -
, -

animation
. 8.2. . ,

( ) (ease-out), -
(ease-in):
42. 297

(50%, 68%)

(50%, 32%)


ease-in ease-out

(50%, 50%) (50%, 50%)


ease-in-out linear

. 8.3. ,

@keyframes bounce {
60%, 80%, to {
transform: translateY(400px);
animation-timing-function: ease-out;
}
70% { transform: translateY(300px); }
90% { transform: translateY(360px); }
}

.ball {
/* */
animation: bounce 3s ease-in;
}

, , -
.

.
298 8

, -
. , -

,
(, ease)
.
ease,
?
. 8.4.
;
(-
) . ,

(, Adobe
Illustrator).
, -
(
).

,
(. 8.4). CSS -
,
.

. 8.5

(ease)
.
. 8.5.
ease ,
,
cubic-bezier(), -
.
,
-
, cubic-bezier(x1,
y1, x2, y2), (x1, y1)
, (x2, y2) . -
: (0, 0)
( , ),
(1, 1) (100% , 100% ).

, -
. x
[0, 1] ( -
).
. (?)
42. 299

, , -
, , -

.
: -
(50%, 30%)


-
, cubic-bezier()
. -
, cubic-bezier()
. 8.6.

.
ease
, -
,

. ; , -
, cubic-bezier(). ,
ease cubic-bezier(.25,.1,.25,1),
cubic-bezier(.1,.25,1,.25). . 8.6. -
, ease,
:

@keyframes bounce {
60%, 80%, to {
transform: translateY(400px);
animation-timing-function: ease;
}
70% { transform: translateY(300px); }
90% { transform: translateY(360px); }
}

.ball {
/* */
animation: bounce 3s cubic-bezier(.1,.25,1,.25);
}

, http://cubic-bezier.com (.8.7),

.

!
http://play.csssecrets.io/bounce
300 8

. 8.7.
,
. , ,
, http://cubic-bezier.com ( )

animate.css (Dan Eden, http://daneden.


me) cubic-bezier(.215,
.61,.355,1) cubic-bezier(.755,.05,.855,.06) -
.

, .


, , ,
,
.
:

HTML
<label>
Your username: <input id="username" />
<span class="callout">Only letters, numbers,
underscores (_) and hyphens (-) allowed!</span>
</label>
42. 301

. 8.8.

CSS- -

( ): -
height, -
, , -
input:not(:focus) + .callout { height: 0 (
transform: scale(0); ) height:
} auto ,
auto ,
.callout {
-
transition: .5s transform;

transform-origin: 1.4em -.4em; .
} max-
height
, .
, -
0,5 , ,
. 8.8. , -
,
( 110% , -
100%). ,
, :

@keyframes elastic-grow {
from { transform: scale(0); }
70% {
transform: scale(1.1);
animation-timing-function:
cubic-bezier(.1,.25,1,.25); /* ease */
}
}
input:not(:focus) + .callout { transform: scale(0); }
input:focus + .callout { animation: elastic-grow .5s; }
.callout { transform-origin: 1.4em -.4em; }
302 8

, , .
. 8.9:
. , , , -
. ,
, ,
,
, . - -
, ?

. 8.9.
,

cubic-
bezier(). ,
0 1. ,
-
, ,
-
.
(70%, 110%) 01, -
0% 100%.
(50%, 100%) , ? ,
scale(0) -
scale(1)
, scale(1.1)
, ,
-

.


: , -
. 8.10. 110% (
scale(1.1)), -
-
100%.
-
01
ease (cubic-bezier(.25,.1,.25,1))
42. 303

,
bezier(.25,.1,.3,1.5). . 8.10, 100%
50% . -
; , ,
110% 70% ,
30% . -
, ,
. , :

input:not(:focus) + .callout { transform: scale(0); }


.callout {
transform-origin: 1.4em -.4em;
transition: .5s cubic-bezier(.25,.1,.3,1.5);
}

, , -
, , ,
, ,
, (. 8.11). -
? , :
,
, scale(1),
scale(0). ,
, 110% 350 .
110% scale(1.1), scale(-0.1)!

. 8.11. ?!

,
. , ,
,
ease. ,
CSS, :
304 8

input:not(:focus) + .callout {
transform: scale(0);
transition-timing-function: ease;
}

.callout {
transform-origin: 1.4em -.4em;
transition: .5s cubic-bezier(.25,.1,.3,1.5);
}

, ,
,
cubic-bezier(),
.
: -
, .
? . , -
100% 50% ( 250 ).
, 0% 100% , -
(500 ), .
, -
, transition-duration transition,
. -
ease, :
input:not(:focus) + .callout {
transform: scale(0);
transition: .25s;
}

.callout {
transform-origin: 1.4em -.4em;
transition: .5s cubic-bezier(.25,.1,.3,1.5);
}

-
( ),
. ,
, . ,
(. 8.12),
.
-
, ,
, .
42. 305

. 8.12. rgb(100%, 0%, 40%) gray (rgb(50%, 50%,


50%)) cubic-bezier(.25,.1,.2,3). RGB -
,
rgb(0%, 100%, 60%). http://play.csssecrets.io/elastic-color

transition
, transition-property - -
: all. ,
, , ,
. , ,

, -
,
, transition-delay -
background,
. transition.
: ,
,
input:not(:focus) + .callout { width height, ,
transform: scale(0);
transition: .25s transform;
} (,
-
.callout { -
transform-origin: 1.4em -.4em; ),
transition: .5s cubic-bezier(.25,.1,.3,1.5)
-
transform;
: transition:
}
.5s height, .8s .5s width;
(
width
!

http://play.csssecrets.io/elastic height).


CSS Transitions: http://w3.org/TR/css-transitions
CSS Animations: http://w3.org/TR/css-animations
43


CSS,

,
, CSS-
. ,
. , -
, , ,
.
, ,
GIF. , -
GIF- ,
,
:
256 , ;

-,
, , -
GIF-. , ,
(. 8.13);
CSS- -
, , ,
. . GIF,
43. 307

, , -
.
,
.
-, 2004 ,
Mozilla -
,
PNG,
, , . 8.13.
GIF-. - (
APNG - - http://www.dabblet.
, com);
PNG :

,
GIF
PNG-,
.
, APNG
,
-
.
JavaScript
-
,
background-position . ,
, -
! APNG
https://
ru.wikipedia.org/wiki/APNG.
CSS-?

, PNG,
, . 8.14.

. 8.14. ( 800100)
308 8

,
( -
!), -
,
:

HTML . 8.15.
<div class="loader">Loading</div>
,
.loader {
width: 100px; height: 100px;
background: url(img/loader.png) 0 0;
/* */
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
}

. 8.15: ,
.
background-position, , -100px0 , 200px0
. .
:
@keyframes loader {
to { background-position: -800px 0; }
}
.loader {
width: 100px; height: 100px;
background: url(img/loader.png) 0 0;
animation: loader 1s infinite linear;
/* */
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
}

, ( -
167 ), (. 8.16).
, ,
.
steps() , .
43. 309

- ?! .
,
,
. ;
, -
CSS.
.

. 8.16. ,

, -
steps() -
-
.
,
steps() .
CSS

,
, steps(), -

, ,
. . 8.17.
.
, steps(8), linear
ease
,
:

animation: loader 1s infinite steps(8);

, steps() , start
end ( ), ,
310 8

( end
. 8.17), .
, step-start
step-end, steps(1, start) steps(1, end) -
.

!
http://play.csssecrets.io/frame-by-frame

Simurai (http://simurai.com)
Sprite sheet animation with
steps() (http://simurai.com/blog/2012/12/03/step-animation).


CSS Animations: http://w3.org/TR/css-animations
44


CSS,

<blink>? , . -
, , -
,
-.
,
, - .
: [ ] ,
- .
, , <blink>, ,
.
- , ,
. ,
, -
, .
-
( !) ,
,
(,
#).

,
, <blink>. ,
(
) ( ,
312 8

), , (

).
? <blink>
CSS, text-decoration: blink,
, ,
.
CSS JS?

CSS
: ( opacity),
( color), ( border-
color) .. ,
, -
. .
.
:

@keyframes blink-smooth { to { color: transparent } }


.highlight { animation: 1s blink-smooth 3; }

. , -
, .
,
(.8.18):

. 8.18. 3 ( )

.
, ! ,
, ,
.
, :

@keyframes blink-smooth { 50% { color: transparent } }

.highlight {
animation: 1s blink-smooth 3;
}
44. 313

, .
( /
), ,
, , -
(, )
.
: animation-direction.
animation-direction
(reverse),
(alternate), (alternate-reverse).
, ,
.
:
@keyframes blink-smooth { to { color: transparent } }

.highlight {
animation: .5s blink-smooth 6 alternate;
}

, (
, ),
.
animation-duration.

noormal
nnormal
orrmmaall
allternate
aalternate
ltteerrnnaattee
reeverse
evveerrssee
reverse
alternate-reverse
alternate-reverse
. 8.19. animation-direction
black transparent

, . ,
? ?
:

@keyframes blink { to { color: transparent } }


.highlight {
animation: 1s blink 3 steps(1);
}
314 8

-
: .
, steps(1) -
steps(1, end), ,
transparent
,

(.8.20). ,
, -

.
. 8.20.
steps(1, start),


: -
steps(1) ,
.
steps(2) ( -
start end). - , -

. -
, steps() ,
, -
,
50%, :
@keyframes blink { 50% { color: transparent } }
.highlight {
animation: 1s blink 3 steps(1); /* step-end */
}

- ! ,
, ? CSS

!
http://play.csssecrets.io/blink


CSS Animations: http://w3.org/TR/css-animations
45


CSS, ,

,
, - .

- . -

.

, JS-.
, CSS
. ?

, , -
, ,
. , , -
: .
, ,
.
316 8

. 8.21. CERN -
, , (http://line-mode.cern.ch)

, ,

, : -


-


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

(<h1> ),
, , -
. 8.22. :

HTML
<h1>CSS is awesome!</h1>
45. 317

, -
0
, :

@keyframes typing {
from { width: 0 }
}

h1 {
width: 7.7em; /* */
animation: typing 8s;
}
. 8.23.
,
, ? ,
,
. 8.23,
, .
, , . -
, white-space: nowrap;
-
,
. -,
overflow: hidden;,
. , -

(.8.24), :
, , . 8.24.

,
;

,

em, , , , ,
. 7,7? ?
steps(),
. -
, ,
, ,
. , ,
,
JavaScript.
ch. ch
, CSS
318 8

Values and Units Level 3 (http://w3.org/TR/css3-values)


0. -
,
-

0. -
.
. 8.25. 0 -
. ,
, - ch,

. 15. -
:

@keyframes typing {
from { width: 0; }
}

h1 {
width: 15ch; /* */
overflow: hidden;
white-space: nowrap;
animation: typing 6s steps(15);
}

, . 8.25, - -
: .
. , ?
, ,
.
.
, opacity . -
, ,
, , ,
:

@keyframes typing {
from { width: 0 }
}

@keyframes caret {
50% { border-color: transparent; }
}

h1 {
width: 15ch; /* */
45. 319

overflow: hidden;
white-space: nowrap;
border-right: .05em solid;
animation: typing 6s steps(15),
caret 1s steps(1) infinite;
}

, , -
. 8.26.
,

( ,

),
infinite . ,
, -
.

. 8.26.
,
:
, ,
, - . , -
JS:

JS
$$('h1').forEach(function(h1) {
var len = h1.textContent.length, s = h1.style;

s.width = len + 'ch';


s.animationTimingFunction = "steps("+len+"),steps(1)";
});

JS
: , -
!
, , , -
CSS? , , -
, :

h1 {
width: 15ch; /* */
overflow: hidden;
white-space: nowrap;
border-right: .05em solid;
}
320 8

,
ch, , . 8.27.
,
em.
, , -
,
, :

. 8.27. , CSS
(: ch; : ch)

@keyframes caret {
50% { border-color: currentColor; }
}

h1 {
/* ... */
border-right: .05em solid transparent;
animation: typing 6s steps(15),
caret 1s steps(1) infinite;
}

:
, ,
.

!
http://play.csssecrets.io/typing


CSS Animations: http://w3.org/TR/css-animations
CSS Values & Units: http://w3.org/TR/css-values
46


CSS, animation-direction (
)

.
-
, ,
(:active).
,
, , -
. ,
:hover
, . , ,
?
- ,

, .

. -
-
,
. ,
, . ,
-
- .
. - ?
322 8

. 8.28. ,
- (Julian, http://
juliancheal.co.uk). . -
.
, ,
, . , -
, ,
- , - . -
, , ,

, -
, , . 8.29, ,
, 150150 .
46. 323

. 8.29. naxos-greece.jpg, ,
( )

:
,
, (,
). ,
:

.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
}

, . 8.29,
. , ,
background-position 0 0 100% 0
.
!

@keyframes panoramic {
to { background-position: 100% 0; }
}
.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
}

. - ,
.
324 8

,

, , - -
,
,
-
. ,
,
.
:
. 8.30.

.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
}

.panoramic:hover, .panoramic:focus {
animation: panoramic 10s linear infinite alternate;
}

, ,
: , -
.
, ,
(. 8.31). ,
!

. 8.31. ,
, , ,

,
.
:hover, .
46. 325

, :hover .
, , -
: animation-play-state!
, .panoramic, -
, :hover.
, -
, ,
, .
, . 8.32:

. 8.32. , ,

@keyframes panoramic {
to { background-position: 100% 0; }
}
.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
animation-play-state: paused;
}
.panoramic:hover, .panoramic:focus {
animation-play-state: running;
}

!
http://play.csssecrets.io/state-animations


CSS Animations: http://w3.org/TR/css-animations
47


CSS, CSS, ,
,

, CSS ,
(http://css-tricks.com) ,
CSS .
CSS,
. , Google+
, , 11 ,
: , -
.
,
- habrahabr.ru
(.8.34).
404
,
-.
,
, -
. 8.33. Google+
: . -
, ,

, .
47. 327

. 8.34. 404 - habrahabr.ru


.
- CSS,
CSS?
.

, , -

Google+. :

HTML
<div class="path">
<img src="lea.jpg" class="avatar" />
</div>

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

- . , -
, 300px,
150px. CSS!
328 8

, -
. , ,
.
CSS ?
, , -
:

@keyframes spin {
to { transform: rotate(1turn); }
}

.avatar {
animation: spin 3s infinite linear;
transform-origin: 50% 150px; /* 150px = path radius */
}

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

. 8.36.

, . -
, , ,
, , -
- .
, ?
47. 329


,
. , -
:
, . -
, . , ,
, .
, HTML-,
div:

HTML
<div class="path">
<div class="avatar">
<img src="lea.jpg" />
</div>
</div>

,
, .avatar. . 8.36, , -
. ,
, -
? ,
,
!
: ,
, , -
. , 60deg,
60deg ( 300deg), 70deg,
70deg ( 290deg).
0deg 360deg ( 0turn 1turn, ), ?
, .
( 360deg 0deg), :
@keyframes spin {
to { transform: rotate(1turn); }
}
@keyframes spin-reverse {
from { transform: rotate(1turn); }
}

.avatar {
animation: spin 3s infinite linear;
transform-origin: 50% 150px; /* 150px = */
}
330 8

.avatar > img {


animation: spin-reverse 3s infinite linear;
}

,
x , 360x ,
, . ,
, , . 8.37, .

. 8.37. ,

, , .
. -
, ,
DRY. , -
:

@keyframes spin {
to { transform: rotate(1turn); }
}
@keyframes spin-reverse {
from { transform: rotate(1turn); }
}

.avatar {
animation: spin 3s infinite linear;
transform-origin: 50% 150px; /* 150px = */
}

.avatar > img {


animation: inherit;
animation-name: spin-reverse;
}

, -
? animation-direction
47. 331

? , -
alternate. reverse,
,
:

@keyframes spin {
to { transform: rotate(1turn); }
}
.avatar {
animation: spin 3s infinite linear;
transform-origin: 50% 150px; /* 150px = */
}

.avatar > img {


animation: inherit;
animation-direction: reverse;
}

! , ,
,
CSS-!


! -
http://play.csssecrets.io/circular-2elements http://lists.
w3.org/Archives/Public/www-
style/2012Feb/0201.html.


, , , -
, HTML-.
, CSS (
),
.
, ,
, .
, (Aryeh Gregor),
CSS Transforms, ,
:
transform-origin .
translate().

332 8

, , transform-origin -
translate(). ,
:

transform: rotate(30deg);
transform-origin: 200px 300px;

transform: translate(200px, 300px)


rotate(30deg)
translate(-200px, -300px);
transform-origin: 0 0;

transform: rotate(30deg);
transform-origin: 100px 50px;

30
50px de
g

100px

50
px

100px
10
50px 0p
x

30deg

transform: translate(100px,50px); transform: translate(100px,50px) transform: translate(100px,50px)


transform-origin: 0 0; rotate(30deg); rotate(30deg)
transform-origin: 0 0; translate(-100px,-50px);
transform-origin: 0 0;

. 8.38. .
. : transform-origin. :
,

, , -
, .
, ,
, , ,
. , -
,
, .
, . 8.38 .
47. 333

,
transform-origin (
,
):

@keyframes spin {
from {
transform: translate(50%, 150px)
rotate(0turn)
translate(-50%, -150px);
}
to {
transform: translate(50%, 150px)
rotate(1turn)
translate(-50%, -150px);
}
}
@keyframes spin-reverse {
from {
transform: translate(50%,50%)
rotate(1turn)
translate(-50%,-50%);
}
to {
transform: translate(50%,50%)
rotate(0turn)
translate(-50%, -50%);
}
}

.avatar {
animation: spin 3s infinite linear;
}

.avatar > img {


animation: inherit;
animation-name: spin-reverse;
}

, ,
. , -
,
. , ,
.avatar:

@keyframes spin {
from {
transform: translate(50%, 150px)
rotate(0turn)
334 8

translate(-50%, -150px)
translate(50%,50%)
rotate(1turn)
translate(-50%,-50%)
}
to {
transform: translate(50%, 150px)
rotate(1turn)
translate(-50%, -150px)
translate(50%,50%)
rotate(0turn)
translate(-50%, -50%);
}
}
.avatar { animation: spin 3s infinite linear; }

, , , -
.
HTML: ?

.
avatar -
, , ,
,
. translate(), translate(-50%, -150px)
translate(50%, 50%). ,
(
calc(), ).
, , ,
Y (translateY(-150px) translateY(50%)). ,
, -
.
:

@keyframes spin {
from {
transform: translateY(150px) translateY(-50%)
rotate(0turn)
translateY(-150px) translateY(50%)
rotate(1turn);
}
to {
transform: translateY(150px) translateY(-50%)
rotate(1turn)
translateY(-150px) translateY(50%)
rotate(0turn);
}
}
.avatar { animation: spin 3s infinite linear; }
47. 335

, , .
?
( . 8.39),
, , , .
:

@keyframes spin {
from {
transform: rotate(0turn)
translateY(-150px) translateY(50%)
rotate(1turn);
}
to {
transform: rotate(1turn)
translateY(-150px) translateY(50%)
rotate(0turn);
}
}

.avatar { animation: spin 3s infinite linear; }

, ,
. -
DRY,
.
HTML.
,
, . 8.39.

.
,

. ,
!
http://play.csssecrets.io/circular
,
,

,


CSS Animations: http://w3.org/TR/css-animations
CSS Transforms: http://w3.org/TR/css-transforms
.
CSS.
.

.
.
.
. , .
.

, 192102, -, . (. ), 3, , . 7.
034-2014, 58.11.12.000
, .
24.06.16. 70100/16. . . . . 27,090. 1000. 0000.
. .
142300, , . , . , 1.
: www.chpk.ru. E-mail: marketing@chpk.ru
: 8(496) 726-54-10, : (495) 988-63-87

Оценить