Sekretyi Css (RU)

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);
-
, , , , -

,

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);

.
, 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);
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

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 :
box-shadow: 0 0 0 10px #655, 0 0 0 15px
deeppink;
. 2.6.
, ,
, box-shadow, -
box-shadow ,
, . -
, -
5px,
15px (10px+5px).

:
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:
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 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;
!
http://play.csssecrets.io/extended-bg-position
background-origin
, -
,
. background-
position, , :
3. 59
padding: 10px;
background: url(code-pirate.svg) no-repeat #58a;
. 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 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;
padding: 1em;
}
62 2
, -
,

,
.
:-( ?
. 2.16.
outline

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

background: tan;
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

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),
. :
,
?
. 2.21.
, 60%
, , ,
, . -
;

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

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

, -

, ,
background-size:

background-size: 100% 30px;
.2.24, -
15px .
. 2.23. -
, -
(. 2.25). 50%
66 2

, -
(. 2.26):

. 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);

. 2.26.

. ,
-
(. 2.27):
background: linear-gradient(#fb3 33.3%,

#58a 0, #58a 66.6%, yellowgreen 0);
. 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. :


#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
. 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 :

#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);
#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 -
:
#fb3, #fb3 15px, #58a 0, #58a 30px);
:
,
. ,
, background-size.
; .
, ,
, .
2 !
, -
,
. ,
60 (. 2.36):
#fb3, #fb3 15px, #58a 0, #58a 30px);
!
,
,
. ,

,
.
. 2.36.
45,
60
, ,

, :
#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

, ,
. -
, :
#79b, #79b 15px, #58a 0, #58a 30px);
.2.37, #58a
.
, . ,
, (!) .
.

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

. , . 2.36 :
#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 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: #58a;
background-image:
linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px,
transparent 0);
( . 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);
6. 77
,
.

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

transparent 0),
radial-gradient(tan 30%,
transparent 0);
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);
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);
. 2.47.

, , ,
? : ,

background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%,
transparent 0),
linear-gradient(45deg, transparent 75%,
#bbb 0);
, , -
. 2.48, -
. . 2.48.
,
-
:
background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
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%);
,
, -
http://leaverou.github.io/conic-gradient.
!
http://play.csssecrets.io/test-conic-gradient
6. 81
, ? , -
, . . 2.49. , , ,
. ,
, , -
, ,
:
background: #eee;
background-image:
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px,
15px 15px, 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),
rgba(0,0,0,.25) 25%, transparent 0,
transparent 75%, rgba(0,0,0,.25) 0);
, , ,
WET.
, .
, . ,
Sass :
82 2
SCSS
@mixin checkerboard($size, $base,
$accent: rgba(0,0,0,.25)) {
background: $base;
background-image:
$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>');
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

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
.
. , -
( )
- .
,
, :
#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-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-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-clip: padding-box, border-box;

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

background,
:
,
?
padding: 1em;
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;
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;
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

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

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;
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;
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 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,

#655 0)
left;
background-size: 50% 100%;
, !
,
. 3.27.
!
background-size, -
!
.
, background-repeat,
. 3.27. .
background-size ,
, .
:
background: #58a;
background:
#58a 0) right,
#655 0) left;
. 3.28 , -!
! , -
. , :
12. 117
background: #58a;
background: , !
linear-gradient(135deg, transparent 15px, ,
#58a 0) !
top left,
!
#655 0)
top right,
linear-gradient(-45deg, transparent 15px, . 3.28.
#58a 0) , ,
bottom right,
#655 0)
bottom left;
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;
}
, , , ,
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;
. 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-image: 1 url('data:image/svg+xml,\
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 (
), -


<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"\ ,
<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;

<svg xmlns="http://www.w3.org/2000/svg"\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
background: #58a;
, 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 Masking: http://w3.org/TR/css-masking
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;
z-index: -1;
background: #58a;
}
. 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;
padding: .3em 1em 0;
}
nav > a::before {
content: '';
position: absolute; . 3.47.
z-index: -1; scale(),
background: #ccc;
background-image: linear-gradient( ()
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
border-bottom: none;
border-radius: .5em .5em 0 0;
box-shadow: 0 .15em white inset;
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

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%;
}
(,
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: 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%;
animation: spin 3s linear infinite,
bg 6s step-end infinite;
}
. 3.54. -
(
! )
, -
http://play.csssecrets.io/pie-animated

, -

, -
? -

:
HTML
<div class="pie">20%</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 {
}
@keyframes bg { 20%
}
.pie::before {
/* [ ] */
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-image:
linear-gradient(to right, transparent 50%, #655 0);
color: transparent;
text-align: center;
}
@keyframes spin {
}
@keyframes bg {
}
.pie::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 50%; height: 100%;
border-radius: 0 100% 100% 0 / 50%;
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);
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 {
border-radius: 50%;
}
circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 32;
stroke-dasharray: 38 100; /* 38% */
}
, . ,
,
SVG- .
JavaScript .
, HTML-,

HTML
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 {
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


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

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 {
}
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 {
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).

Compositing and Blending: http://w3.org/TR/compositing
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;
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 {
}
main {
position: relative;
}
main::before {
content: '';
position: absolute;
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 {
}
main {
position: relative;
overflow: hidden;
}
main::before {
content: '';
position: absolute;
filter: blur(20px);
margin: -30px;
}
. 4.23.
168 4
,
. , -
.
, , -
(. 4.14). ,
.
!
http://play.csssecrets.io/frosted-glass

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:
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:
. 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:

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:
no-repeat 100% 0 / 3em 1.73em,
. 4.32. ,

, -
!
.
, -
,
, -

.
,
. 4.32.
, . , -

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

position: absolute;
)
top: 0; right: 0;
background: linear-gradient(to left bottom,
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, ,
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-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:
}
.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);
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

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


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

. ,
,
.
-
,
. -

, JavaScript, ,
,
(), -
,
. 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, -
, .

(, ),
, (). 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

, .
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: , ﬁ - -
fi. , (&),
,
:
E t (et
, , ).
( ,
deﬁ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">&</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 {
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 {
src: local('Baskerville'),
local('Goudy Old Style'),
local('Palatino'),
local('Book Antiqua');
}
h1 {
}
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 {
src: local('Baskerville-Italic'),
local('GoudyOldStyleT-Italic'),
local('Palatino-Italic'),
local('BookAntiqua-Italic');
}
h1 {
}
, ,
. 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
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-position: 0 1.15em; . 5.25.
,
text-shadow

, .5.24.
.
,
p y. , ,
?
,
text-shadow, ,
(. 5.25):
background: linear-gradient(gray, gray) no-repeat;

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 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%):

color: hsl(210, 13%, 30%);
(
), .
, ,
, . -
-,
27. 209
.
80% ,
:

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-
: (: ,
: )
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
<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
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;

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
:
, . 6.5, ,
! ,
1
(affordance) , -
,
. , ,
, ,
. https://ru.wikipedia.org/wiki/
( https://en.wikipedia.org/wiki/Affordance).
, -
.
30. , 231
. -
background-clip -
:

. 6.6, . 6.5. ! -
. , -
border,

, -

. ? :
()
(. 6.7):

box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
! . 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

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'; /* */
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';
}
. 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 {
padding: .3em .5em;
background: #ccc;
background-image: linear-gradient(#ddd,
#bbb); . 6.12.
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

32

RGBA

,

. , -
(. 6.13) . -

HTML, CSS,
:
.overlay { /* */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.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;
}
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
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;

}

filter: blur(5px);
}

( ).

brightness() / contrast():
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,

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;
. 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-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-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).
, -
,
.

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;
}
.image-slider > div {

position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%; /* */
overflow: hidden; /* */
}
.image-slider img { display: block; }
. 6.26, -
.
,
.

,
resize, -
:

. 6.26. position: absolute;
- 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;
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;
}

position: absolute;
width: 50%;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}
.image-slider > div::before {

content: '';
position: absolute;
bottom: 0; right: 0;
. 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>
JS
, div:
260 6
HTML
<div>
</div>
<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;
}
35. 261
position: absolute;
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).

Compositing and Blending: http://w3.org/TR/compositing

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). ,
-
, -
We also have some more text here. Et laborum venison nostrud, ut veniam
.
sint kielbasa ullamco pancetta.
textalign: center
text-align: left -
(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
(
-
). , !
-
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

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 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
</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,
, -
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, !
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

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); }
}
.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;
}
}
.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;
}
}
.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 {
transition-timing-function: ease;
}
.callout {
}
, ,
,
cubic-bezier(),
.
: -
, .
? . , -
100% 50% ( 250 ).
, 0% 100% , -
(500 ), .
, -
, transition-duration transition,
. -
ease, :
input:not(:focus) + .callout {
transition: .25s;
}
.callout {
}
-
( ),
. ,
, . ,
(. 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, ,
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 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 {
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 {
background: url(img/loader.png) 0 0;
animation: loader 1s infinite linear;
/* */
text-indent: 200%;
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).

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

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;
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;
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;
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

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 {
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 {
animation: panoramic 10s linear infinite alternate;
}
. - ,
.
324 8
,

, , - -
,
,
-
. ,
,
.
:
. 8.30.
.panoramic {
}
.panoramic:hover, .panoramic:focus {
}
, ,
: , -
.
, ,
(. 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 {
}
.panoramic:hover, .panoramic:focus {
animation-play-state: running;
}
!
http://play.csssecrets.io/state-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 {
}
@keyframes spin-reverse {
from { transform: rotate(1turn); }
}
.avatar {
transform-origin: 50% 150px; /* 150px = */
}
330 8
.avatar > img {

animation: spin-reverse 3s infinite linear;
}
,
x , 360x ,
, . ,
, , . 8.37, .
. 8.37. ,
, , .
. -
, ,
DRY. , -
:
@keyframes spin {
}
from { transform: rotate(1turn); }
}
.avatar {
}
.avatar > img {

animation: inherit;
animation-name: spin-reverse;
}
, -
? animation-direction
47. 331
? , -
alternate. reverse,
,
:
@keyframes spin {
}
.avatar {
}
.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-origin: 200px 300px;
transform: translate(200px, 300px)

rotate(30deg)
translate(-200px, -300px);
transform-origin: 0 0;
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 {
rotate(1turn)
translate(-50%, -150px);
}
}
from {
transform: translate(50%,50%)
rotate(1turn)
translate(-50%,-50%);
}
to {
transform: translate(50%,50%)
rotate(0turn)
translate(-50%, -50%);
}
}
.avatar {
}
.avatar > img {

animation: inherit;
animation-name: spin-reverse;
}
, ,
. , -
,
. , ,
.avatar:
@keyframes spin {
from {
rotate(0turn)
334 8
translate(-50%, -150px)
translate(50%,50%)
rotate(1turn)
translate(-50%,-50%)
}
to {
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)
rotate(0turn);
}
}
47. 335
, , .
?
( . 8.39),
, , , .
:
@keyframes spin {
from {
transform: rotate(0turn)
rotate(1turn);
}
to {
transform: rotate(1turn)
rotate(0turn);
}
}
, ,
. -
DRY,
.
HTML.
,
, . 8.39.

.
,

. ,
!
http://play.csssecrets.io/circular
,
,

,

.
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

Sekretyi Css (RU)

Загружено:

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

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

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

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

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

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

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

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

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

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

Sekretyi Css (RU)

Загружено:

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

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

32.988.

12+ ( 29 2010 . 436-.)

ISBN 978-1449372637 . 2016 Piter Press Ltd.

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

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

House Made Sausage from Prairie Grass Cafe, Northbrook,

Cats that Webchick Is Herding, Kathleen Murtagh

Stone Art, Josef Stuefer

A Field of Tulips, Roman Boed

Resting in the Sunshine, Steve Wilson

Naxos Island, Greece, Chris Hutchison

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

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

Wikipedia Comparison of Layout Engines (Cascading Style Sheets)

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

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

background: rgb(255, 128, 0);

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

4. (Candidate Recommendation, CR):

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

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

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)

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)

padding: 6px 16px;

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

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

input, select, button { font: inherit; }

.callout { position: relative; }

- (Responsive Web Design,

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

background: url(tr.png) top right,

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

. 2.1. 24ways.org -, 2008

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

, Backgrounds & Borders Level 3

background-position: top left;.

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

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

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

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

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

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

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

background: linear-gradient(#fb3 33.3%,

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

. 2.41. background: #655;

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

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

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

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

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

.something-meaningful > div {

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

border-radius: 100px / 75px;

border-radius: 50% / 50%;