Яндекс разработал лучшую в мире страницу печати Карт. Как мы это сделали, с какими проблемами столкнулись, какие трюки изобрели. P.S. А вы точно хотите научиться печатать фоновые цвета и изображения? ;)

1. Распечатай Яндекс.Карты
Вадим Макишвили, июль 2013

10. Конкуренты
1. Google Maps
2. Yahoo! Maps
3. Bing Maps
4. MapQuest
5. Wikimapia
6. OpenStreetMap
...и это ещё не все
7. Géoportail
8. Apple Maps
9. Nokia Maps
10. ViaMichelin
11. Seat Pagine Gialle
12. Terralink International
10

11. Какая нужна
карта?

12. чистая

13. удобная

14. подробная

15. полная

16. наглядная

17. Print & Go!

18. Критерии:
• Размер карты
• Подача информации
• Альбомная ориентация
18

19. А4 формат
21х29cm
19

20. Google Maps
15х15cm
20

21. Google Maps 21

22. Google Maps 22

23. Google Maps 23

24. Google Maps 24

25. Google Maps 25

26. Google Maps 26

27. Google Maps 27

28. Google Maps 28

29. Yahoo! Maps
15х10cm
29

30. Yahoo! Maps 30

31. Microsoft Bing
12х12cm
3х3cm
31

32. Microsoft Bing 32

33. Microsoft Bing 33

34. Microsoft Bing 34

35. Рамблер Карты
15х15cm
35

36. Рамблер Карты 36

37. Рамблер Карты 37

38. Карты Mail.ru
15х12cm
38

39. Карты Mail.ru 39

40. Карты Mail.ru 40

41. Недостатки существующих решений:
• Карта маленькая
• Подача информации неоптимальная
• Нет альбомной версии
41

42. Но!

43. Печать на
Яндекс.Картах

44. Размеры карты:
20 х 27cm
44

45. 45

46. 46

47. 47

48. 48

49. 49

50. 50

51. 51

52. 52

53. 53

54. 54

55. Печать на
Яндекс.Картах

56. Как мы это
сделали?

57. ... Quirks again?

58. 58

59. 1998

60. 2012

61. Дальше будет:
• как искали раскладку
• как подключали стили
• как фильтровали браузеры
• как обошлись с IE
• ...
• как напечатать фон?
61

62. В поисках раскладки 62
Карта
Шапка
Подвал

63. Quirks Mode
<table height=' 100% '>
...
</table>
td.map {
height: 100%
}
В поисках раскладки
01.
02.
03.
04.
05.
06.
63
<td class='map'> Карта </td>
<td> Шапка </td>
<td> Подвал </td>

64. Javascript?
В поисках раскладки 64
<td class='map'> Карта </td>
<td> Шапка </td>
<td> Подвал </td>

65. Javascript
:(

66. Javascript for printer?
if ( page.orientation === 'landscape' ) {
// do something
}
if ( page.size.width === '210mm' ) {
// do something
}
01.
02.
03.
01.
02.
03.
66

67. CSS for printer
@media print and (orientation:landscape) {
// do something
}
01.
02.
03.
67

68. @rules

69. 69

70. @page
/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
70

71. @page
/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
file://localhost/Users/makishvili/projects/print-and-go/page-zero.html
05.07.13
71

72. @page
/* Обнулить поля */
@page {
margin: 0
}
Не работает?
01.
02.
03.
04.
72

73. @page
/* Изменить поля */
@page {
margin: 1cm
}
Заработало!
01.
02.
03.
04.
73

74. @page
/* Изменить поля */
@page {
margin: 1cm
}
Точка отсчёта -
дефолтные отступы,
а не край листа
01.
02.
03.
04.
74

75. @page
/* Принудительно задать ориентацию */
@page {
size: landscape
}
01.
02.
03.
04.
75

76. @page
/* Группировать правила */
@page myName {
padding: 10px
}
div {
page: myName
}
01.
02.
03.
04.
05.
06.
07.
76

77. @page: фильтрация стилей для Opera
@page {margin: 0}
@page operaPage {margin: 0.5cm}
html.opera body {
page: operaPage
}
01.
02.
03.
04.
05.
77

78. http://clck.ru/8hBQu
bolk@ «взламывает» Оперу 78

79. @page: фильтрация стилей для Firefox
@page {margin: 0}
@-moz-document regexp('*') {
@page {
margin-top: 1cm;
margin-bottom: 1cm;
}
}
01.
02.
03.
04.
05.
06.
07.
79

80. Media-queries

81. Ориентация листа
@media print and (orientation:portrait) {
/* стили только для портрета */
}
@media print and (orientation:landscape) {
/* стили только для альбома */
}
01.
02.
03.
04.
05.
06.
9+
8-
81

82. Ориентация листа: а так?
min-aspect-ratio: 1/1 /* screen-size is in landscape */
max-aspect-ratio: 1/1 /* screen-size is in portrait */
min-device-aspect-ratio: 1/1 /* device is in landscape */
max-device-aspect-ratio: 1/1 /* device is in portrait */
http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html
01.
02.
03.
04.
82

83. Раскладка 83
Карта
Шапка
Подвал

84. table, td.map {
height: 100%
}
1. Таблица
01.
02.
03.
84
<td class='map'> Карта </td>
<td> Шапка </td>
<td> Подвал </td>

85. div {
display: table-cell
}
.map {
height: 100%
}
1. Таблица
01.
02.
03.
04.
05.
06.
85
<div class='map'> Карта </div>
<div> Шапка </div>
<div> Подвал </div>

86. • нет min-height и max-height
CSS 2.1 не определяет поведение min-height и max-height в таблицах,
поэтому любая реалиция этих свойств (применительно к таблицам) -
CSS2.1-совместимая
MDN
• нет overflow:hidden внутри ячейки
1. Таблица
“
86

87. div {
position: absolute
left: 0
right: 0
}
.head {
top: 0
height: 100px
}
.map {
top: 100px
bottom: 100px
}
.foot {
bottom: 0
height: 100px
}
2. Позиционирование
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
87
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>

88. • не работает page-break-before
User Agents must apply these properties to block-level elements in the
normal flow of the root element.
CSS2 specification
• нужна фиксированная высота подвала или javascript
2. Позиционирование
“
88

89. .map {
height: 100%
}
3. Поток
01.
02.
03.
89
<div class='map'> Карта </div>

90. .map {
height: 100%
}
.head, .foot {
position: absolute
left: 0
right: 0
}
.head {
top: 0
}
.foot {
bottom: 0
}
3. Поток + «наляпки»
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
90
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>

91. .map {
height: 100%
}
.head, .foot {
position: absolute
left: 0
right: 0
}
.head {
top: 0
}
.foot {
bottom: 0
}
3. Поток + «наляпки»
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
91
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
Утверждаю

92. Как организовать
стили?

93. Как организовать стили так, чтобы:
• разделить на экранные и принтерные
• разделить на портретные и альбомные
• ...
• и уметь это дебажить
93

94. Сначала бездумно
body {
width: 900px
}
@media print {
body {
width: auto /* переопределяю */
padding: 5mm
}
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
94

95. Потом с медиа-типами
@media screen {
body { width: 900px }
}
@media print {
body { padding: 5mm }
}
01.
02.
03.
04.
05.
06.
95

96. Потом с медиа-выражениями
@media screen {
body { width: 900px }
}
@media print {
body { padding: 5mm }
}
@media print and (orientation:landscape) {
body { height: 210mm }
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
96

97. Наконец, с умом
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE7'>
<!--[if gt IE 7]><!-->
<link href='page.css'>
<!--<![endif]-->
<!--[if lt IE 8]>
<link href='page.ie.css'>
<![endif]-->
<link rel='stylesheet' href=' page.screen.css ' media=' screen '>
<link rel='stylesheet' href=' page.print.css ' media=' print '>
<link rel='stylesheet' href=' page.print.portrait.css ' media='print and ( orientation:portrait )'>
<link rel='stylesheet' href=' page.print.landscape.css ' media='print and ( orientation:landscape )'>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
97

98. Подождите, а что с IE?
<meta ... content=' IE=EmulateIE7 '>
А почему не так?
<meta ... content=' IE=EmulateIE7 , IE=edge '>
98

99. Осторожно!
9 печатает, как
6 отображает...
99

100. <div class='view'>
<img class='map' src='map.png'>
</div>
.view {
position: relative
overflow: hidden
width: 200px; height: 200px
}
.map {
position: absolute
top: 50%; left: 50%
width: 1000px; height: 1000px
margin: -500px 0 0 -500px
}
Большая картинка
в маленьком окне
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
100

101. <div class='view'>
<img class='map' src='map.png'>
</div>
.view {
position: relative
overflow: hidden
width: 200px; height: 200px
}
.map {
position: absolute
top: 50%; left: 50%
width: 1000px; height: 1000px
margin: -500px 0 0 -500px
}
Большая картинка
в маленьком окне
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
overflow: hidden
9
на печати
101

102. <div class='view'>
<img class='map' src='map.png'>
</div>
.view {
position: relative
overflow: hidden
width: 200px; height: 200px
}
.map {
position: absolute
top: 50%; left: 50%
width: 1000px; height: 1000px
margin: -500px 0 0 -500px
}
Большая картинка
в маленьком окне
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
+ display: inline-block
9
на печати
102

103. .map {
height: 100%
}
.head, .foot {
position: absolute
left: 0
right: 0
}
.head {
top: 0
}
.foot {
bottom: 0
}
3. Поток + «наляпки»
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
103
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>

104. .map {
height: 100%
}
.head, .foot {
position: absolute
left: 0
right: 0
}
.head {
top: 0
}
.foot {
bottom: 0
}
3. Поток + «наляпки»
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
9
на печати
104
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
<div class='map'> Карта </div>

105. .map {
height: 100%
}
.head, .foot {
position: absolute
left: 0
right: 0
}
.head {
top: 0
}
.foot {
bottom: 0
}
3. Поток + «наляпки»
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
9
на печати
105
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
<div class='map'> Карта </div>

106. .map {
height: 100%
}
.head, .foot {
position: absolute
left: 0
right: 0
}
.head {
top: 0
}
.foot {
bottom: 0
}
3. Поток + «наляпки»
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
MacOS
106
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>

107. .map {
height: 100%
}
.head, .foot {
position: absolute
left: 0
right: 0
}
.head {
top: 0
}
.foot {
bottom: 0
}
3. Поток + «наляпки»
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
MacOS
107
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>

108. .map {
height: 100%
}
.head, .foot {
position: absolute
left: 0
right: 0
}
.head {
top: 0
}
.foot {
bottom: 0
}
3. Поток + «наляпки»
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
+
+ <div class='opacity-hack'></div>
.opacity-hack {
position: absolute
background: red
opacity: 0.3
}
01.
02.
03.
04.
05.
MacOS
108
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>

109. .map {
height: 100%
}
.head, .foot {
position: absolute
left: 0
right: 0
}
.head {
top: 0
}
.foot {
bottom: 0
}
3. Поток + «наляпки»
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
<div class='opacity-hack'></div>
.opacity-hack {
position: absolute
opacity: 0
}
01.
02.
03.
04.
MacOS
109
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>

110. <div class='view'>
<img class='map' src='map.png'>
</div>
.view {
overflow: hidden
width: 200px; height: 200px
}
.map {
position: absolute
top: 50%; left: 50%
width: 1000px; height: 1000px
margin: -500px 0 0 -500px
}
Большая картинка
в маленьком окне
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
110

111. <div class='view'>
<img class='map' src='map.png'>
</div>
.view {
overflow: hidden
width: 200px; height: 200px
}
.map {
position: absolute
top: 50%; left: 50%
width: 1000px; height: 1000px
margin: -500px 0 0 -500px
}
Большая картинка
в маленьком окне
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
на печати
111

112. <div class='view'>
<div class=' map-holster '>
<img class='map' src='map.png'>
</div>
</div>
.map-holster {
top: 50%
left: 50%
}
.map {
top: -50%
left: -50%
}
Большая картинка
в маленьком окне
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
на печати
112

113. Фильтруем
браузеры

114. (function (jQuery) {
var ua = navigator.userAgent;
var browser = jQuery.browser;
var browserName;
switch (true) {
case Boolean(browser.opera):
browserName = ' opera '; break;
case Boolean(ua.indexOf('Safari') !== -1):
browserName = ' safari '; break;
...
}
if (browserName) {
document. documentElement.className += (' ' + browserName);
}
}(jQuery));
Фильтруем браузеры
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
114
<html class=' opera '>
...
</html>
01.
02.
03.

115. html, body {
height: 100%
}
.map {
width: 100%
height: 100%
}
100% листа
01.
02.
03.
04.
05.
06.
07.
115
<div class='map'> Карта </div>

116. html, body {
height: 100%
}
.map {
width: 100%
height: 100%
}
100% листа
01.
02.
03.
04.
05.
06.
07.
116
<div class='map'> Карта </div>

117. html, body {
height: 100%
}
.map {
width: 100%
height: 100%
}
@media print {
@page { margin: 5mm }
html.chrome { height: 267mm }
html.safari { height: 247mm }
}
@media print and (orientation:landscape) {
html.chrome { height: 187mm }
html.safari { height: 167mm }
}
100% листа
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
117
<div class='map'> Карта </div>

118. Предпросмотр
печати
врёт

119. @page
/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
119

120. @page
/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
120

121. @page
/* Обнулить поля */
@page {
margin: 0
}
Молодец!
01.
02.
03.
04.
121

122. Что здесь не так?
122

123. Линии?!
• это точно не border
• точно не outline
• не зазор между блоками
• ...
• что это? o_O
123

124. Неверный центр
карты
124
Шапка
Подвал

125. Неверный центр
карты
125
Шапка
Подвал

126. Неверный центр
карты
126
Шапка
Панорама
Подвал

127. 127
Шапка
Панорама
Подвал
Шапка
Подвал

129. <style media="print and
(orientation:portrait)">
.view .map {
top: -35px
}
</style>
Переместить центр
карты
01.
02.
03.
04.
05.
129
Шапка
Подвал

130. <style media="print and
(orientation:portrait)">
.view .map {
top: 75px
}
</style>
Переместить центр
карты
01.
02.
03.
04.
05.
130
Шапка
Панорама
Подвал

131. http://clck.ru/8hvkH
jQuery.injectCSS 131

132. Фон

133. bgcolor, background

134. 134

135. О питомнике
Новости
О породе Бобтейл
Начинающему заводчику
Выставки
Чемпионы
Приглашаем на вязки
Фотогалерея
Наши путешествия
Наши услуги
Полезные документы
Ссылки
Они навсегда в нашей памяти ...
Контакты
Напишите нам
О ПИТОМНИКЕ
Мы кушаем корма " HAPPY DOG " с 30 % скидкой! eda-82
135

136. ГЛАВНАЯ ПРОДАЖА ФОТОГАЛЕРЕЯ ЧИХУАХУА
ВЫПУСКНИКИ КОНТАКТЫ НОВОСТИ СТАТЬИ
English version
136

137. питомник основан в 1993 г. Москва
♥ порода: БРИТАНСКАЯ КОРОТКОШЕРСТНАЯ ♥
ПРОДАЖА британских котят
ГОЛУБОГО КЛАССИЧЕСКОГО ОКРАСА
Заводчик, инструктор-фелинолог Курофф Юлия Валерьевна
тел. +7(916)426-18-18
e-mail: silverysnow@list.ru
♥ ГЛАВНАЯ
♥ Новости питомника
♥ О питомнике
♥ О породе
♥ К продаже
♥ Наши КОТЯТА
(фотогалерея)
БРИТАНСКИЕ КОТЯТА НА ПРОДАЖУ
На данной страничке вашему вниманию предлагаются котята, которые прод
питомнике в данный момент (возле фото указан возраст котят)
Внимание.
На данный момент в питомнике продаются голубые британские котята
ведется предварительная запись на ГОЛУБЫХ БРИТАНСКИХ кот
ЕСЛИ ВЫ желаете записаться заранее на котят - присылайте заявку по эл.
Вы желаете купить британского котенка? Спасибо, что выбрали
137

138. http://clck.ru/8hLnN
CSSWG: «Как включить печать фона?» 138

139. CSSWG: «Как включить печать фона?»
.selector {
-webkit-print-color-adjust: exact
}
Одно из предложений
@page {
print-color-adjust: exact
}
01.
02.
03.
01.
02.
03.
139

140. Все браузеры
печатают...

141. 141
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>

142. Больше белого!
• Это красиво
• Это воздушно
• Берите пример с хорошего ;)
142

143. IE не печатает
белый

144. А так печатает
.selector {
filter: progid:DXImageTransform.Microsoft. gradient (
startColorstr= '#ffffff' ,
endColorstr= '#ffffff' ,
GradientType=0 );
}
01.
02.
03.
8-
144

145. Фоновый цвет

146. 1. Экстраразметка с картинкой
<div class='view'>
<img class='map' src=' green.png '>
</div>
.view {
position: relative
}
.map {
position: absolute
top: 0; bottom: 0
left: 0; right: 0
}
Фоновый цвет
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
146

147. 1. Экстраразметка с картинкой
<div class='view'>
<img class='map' src='green.png'>
</div>
.view {
position: relative
}
.map {
position: absolute
top: 0; bottom: 0
left: 0; right: 0
}
Фоновый цвет
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
147
Старьё!

148. 2. Псевдоэлемент + PNG
<div class='view'></div>
.view {
position: relative
}
.view::before {
position: absolute
top: 0; bottom: 0
left: 0; right: 0
content : url( green.png )
}
Фоновый цвет
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
148

149. 2. Псевдоэлемент + PNG
<div class='view'></div>
.view {
position: relative
}
.view::before {
position: absolute
top: 0; bottom: 0
left: 0; right: 0
content : url( green.png )
}
Фоновый цвет
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
149
Неуспех!

150. 2. Псевдоэлемент + SVG
<div class='view'></div>
.view::before {
...
content: url(green. svg )
}
<svg width=' 100% ' height=' 100% '>
<rect fill=' #00ff00 ' width='100%' height='100%'/>
</svg>
Фоновый цвет
01.
02.
03.
04.
05.
06.
07.
08.
150

151. 2. Псевдоэлемент + SVG
<div class='view'></div>
.view::before {
...
content: url( 'data:image/svg+xml;<svg>...</svg>' )
}
<svg width='100%' height='100%'>
<rect fill='#00ff00' width='100%' height='100%'/>
</svg>
Фоновый цвет
01.
02.
03.
04.
05.
06.
07.
08.
151

152. 2. Псевдоэлемент + SVG
<div class='view'></div>
.view::before {
...
content: url('data:image/svg+xml; base64,[data] ')
}
<svg width='100%' height='100%'>
<rect fill='#00ff00' width='100%' height='100%'/>
</svg>
Фоновый цвет
01.
02.
03.
04.
05.
06.
07.
08.
152

153. 2. Псевдоэлемент + SVG
<div class='view'></div>
.view::before {
...
content: url('data:image/svg+xml; base64,[data] ')
}
<svg width='100%' height='100%'>
<rect fill='#00ff00' width='100%' height='100%'/>
</svg>
Фоновый цвет
01.
02.
03.
04.
05.
06.
07.
08.
153
на печати
content:url(SVG)

154. 3. Border
<div class='view'></div>
.view {
position: relative
overflow: hidden
}
.view ::before {
position: absolute; z-index:-1
top: 0; bottom: 0
left: 0; right: 0
content: ''
border: solid green
border-width: 1000px 0 0
}
Фоновый цвет
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
154

155. 3. Border - i-блок
<div class='head i-bgcolor '></div>
<div class='foot i-bgcolor '></div>
.i-bgcolor {
position: relative
overflow: hidden
}
.i-bgcolor::before {
position: absolute; z-index:-1
top: 0; bottom: 0
left: 0; right: 0
content: ''
border-style: solid
border-width: 1000px 0 0
}
Фоновый цвет
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
.head::before {
border-color: green
}
.foot::before {
border-color: red
}
15.
16.
17.
18.
19.
20.
155

156. 3. Border - i-блок
<div class='head i-bgcolor '></div>
<div class='foot i-bgcolor '></div>
.i-bgcolor {
position: relative
overflow: hidden
}
.i-bgcolor::before {
position: absolute; z-index:-1
top: 0; bottom: 0
left: 0; right: 0
content: ''
border-style: solid
border-width: 1000px 0 0
}
Фоновый цвет
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
.head:before {
border-color: green
filter: ...Microsoft.gradient(
startColorstr='#ff008000'
endColorstr='#ff008000'
GradientType=0)
}
.foot:before {
border-color: red
filter: ...Microsoft.gradient(
startColorstr='#ffff0000'
endColorstr='#ffff0000'
GradientType=0)
}
15.
16.
17.
18.
19.
20.
21.
22.
156
Утверждаю

157. Фоновое
изображение

158. 158

159. 159

160. 160

161. 161

162. 1. Маркер списка
.view {
width: 300px
height: 200px
background: url(fox.png) 0 0 no-repeat
list-style: url(fox.png) inside
}
@media print {
.view {
display: list-item
}
}
Одиночная фоновая картинка
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
162

163. 2. Псевдоэлемент + PNG
<div class='view'></div>
.view {
position: relative
width: 300px
height: 200px
}
.view::before {
position: absolute
z-index:-1
content: url(fox.png)
}
Одиночная фоновая картинка
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
163

164. 2. Псевдоэлемент + PNG
<div class='view'></div>
.view {
position: relative
width: 300px
height: 200px
}
.view::before {
position: absolute
z-index:-1
content: url(fox.png)
}
Одиночная фоновая картинка
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
164
Утверждаю

165. 3. Псевдоэлемент + опять SVG
<div class='view'></div>
.view {
position: relative
width: 300px
height: 200px
}
.view::before {
position: absolute
z-index:-1
content: url(fox. svg )
}
Одиночная фоновая картинка
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
<svg width='300' height='200' >
<image xlink:href='fox. png ' width='300' height='200' />
</svg>
12.
13.
14.
165

166. 3. Псевдоэлемент + опять SVG
<div class='view'></div>
.view {
position: relative
width: 300px
height: 200px
}
.view::before {
position: absolute
z-index:-1
content: url(fox. svg )
}
Одиночная фоновая картинка
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
<svg width='300' height='200' >
<image xlink:href='fox. png ' width='300' height='200' />
</svg>
12.
13.
14.
166

167. 1. Псевдоэлемент + SVG
<div class='view'></div>
.view {
position: relative
overflow: hidden
width: 400px
height: 200px
}
.view::before {
position: absolute
z-index:-1
content: url(small.fox.svg)
}
Размноженная фоновая картинка
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
<svg width=' 9999 ' height=' 80 '>
<defs>
<pattern id='myFox' width=' 9999 ' height=' 80 '>
<image xlink:href='small.fox.png'
width='100' height=' 80 '/>
</pattern>
</defs>
<rect fill='url(#myFox)' width=' 9999 ' height=' 80 '/>
</svg>
13.
14.
15.
16.
17.
18.
19.
20.
167

168. 1. Псевдоэлемент + SVG
<div class='view'></div>
.view {
position: relative
overflow: hidden
width: 400px
height: 200px
}
.view::before {
position: absolute
z-index:-1
content: url(small.fox.svg)
}
Размноженная фоновая картинка
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
<svg width=' 100 ' height=' 9999 '>
<defs>
<pattern id='myFox' width=' 100 ' height=' 9999 '>
<image xlink:href='small.fox.png'
width=' 100 ' height='80'/>
</pattern>
</defs>
<rect fill='url(#myFox)' width=' 100 ' height=' 9999 '/>
</svg>
13.
14.
15.
16.
17.
18.
19.
20.
168

169. 1. Псевдоэлемент + SVG
<div class='view'></div>
.view {
position: relative
overflow: hidden
width: 400px
height: 200px
}
.view::before {
position: absolute
z-index:-1
content: url(small.fox.svg)
}
Размноженная фоновая картинка
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
<svg width=' 9999 ' height=' 9999 '>
<defs>
<pattern id='myFox' width=' 9999 ' height=' 9999 '>
<image xlink:href='small.fox.png'
width='100' height='80'/>
</pattern>
</defs>
<rect fill='url(#myFox)' width=' 9999 ' height=' 9999 '/>
</svg>
13.
14.
15.
16.
17.
18.
19.
20.
169

170. 1. Псевдоэлемент + SVG
<div class='view'></div>
.view {
position: relative
overflow: hidden
width: 400px
height: 200px
}
.view::before {
position: absolute
z-index:-1
content: url(small.fox.svg)
}
Размноженная фоновая картинка
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
<svg width='9999' height='9999'>
<defs>
<pattern id='myFox' width='9999' height='9999'>
<image xlink:href='small.fox.png'
width='100' height='80'/>
</pattern>
</defs>
<rect fill='url(#myFox)' width='9999' height='9999'/>
</svg>
13.
14.
15.
16.
17.
18.
19.
20.
170

171. 2. Border-image
...
border-image: url(box.png) 100 0 0 0 / auto repeat;
...
Размноженная фоновая картинка
01.
02.
03.
171

172. 2. Border-image
<div class='view'></div>
.view {
position: relative
overflow: hidden
width: 400px
height: 200px
}
Размноженная фоновая картинка
01.
02.
03.
04.
05.
06.
07.
.view::before {
position: absolute; z-index:-1
top: 0
left: 0
right: 0
content: ''
border-style: solid
border-width: 100px 0 0
border-image: url(fox.png) 100 0 0 0 / auto repeat
}
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
172

173. 2. Border-image
<div class='view'></div>
.view {
position: relative
overflow: hidden
width: 400px
height: 200px
}
Размноженная фоновая картинка
01.
02.
03.
04.
05.
06.
07.
.view::before {
position: absolute; z-index:-1
top: 0
left: 0
right: 0
content: ''
border-style: solid
border-width: 0 0 0 100px
border-image: url(fox.png) 0 0 0 100 / auto repeat
}
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
173

174. 3. Бонус
<div class='view'></div>
.view {
position: relative
overflow: hidden
width: 400px
height: 200px
}
Растянутая фоновая картинка
01.
02.
03.
04.
05.
06.
07.
.view::before {
position: absolute; z-index:-1
top: 0
left: 0
right: 0
content: ''
border-style: solid
border-width: 0 0 0 100px
border-image: url(fox.png) 0 0 0 100 / auto stretch
}
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
174

175. • Нужен фоновый цвет?
::before + border-color
• Нужна одинокая картинка в фоне?
::before + content: url(png)
• Хотите замостить картинку?
::before + border-image: url(pbg) + repeat
• Или растянуть?
::before + border-image: url(pbg) + stretch
175

177. 177

178. Распечатай Яндекс.Карты
Вадим Макишвили, июль 2013
• makishvili.com
• makishvili@yandex-team.ru
178