Download - Вадим Макишвили — Распечатай Яндекс.Карты
![Page 1: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/1.jpg)
Распечатай Яндекс.КартыВадим Макишвили, WSD декабрь 2013
![Page 2: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/2.jpg)
![Page 3: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/3.jpg)
![Page 4: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/4.jpg)
![Page 5: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/5.jpg)
![Page 6: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/6.jpg)
![Page 7: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/7.jpg)
![Page 8: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/8.jpg)
![Page 9: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/9.jpg)
![Page 10: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/10.jpg)
Конкуренты1. Google Maps
2. Yahoo! Maps
3. Bing Maps
4. MapQuest
5. Wikimapia
6. 2GIS
...и это ещё не все
7. OpenStreetMap
8. Géoportail
9. Apple Maps
10. Nokia Maps
11. ViaMichelin
12. Seat Pagine Gialle
10
![Page 11: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/11.jpg)
Какая нужна
карта?
![Page 12: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/12.jpg)
чистая
![Page 13: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/13.jpg)
удобная
![Page 14: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/14.jpg)
подробная
![Page 15: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/15.jpg)
полная
![Page 16: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/16.jpg)
наглядная
![Page 17: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/17.jpg)
Print & Go!
![Page 18: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/18.jpg)
Критерии качества:• Размер карты
• Подача информации
• Альбомная ориентация
18
![Page 19: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/19.jpg)
А4 формат
21х29cm
19
![Page 20: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/20.jpg)
Google Maps
15х15cm
20
![Page 21: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/21.jpg)
Google Maps 21
![Page 22: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/22.jpg)
Google Maps 22
![Page 23: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/23.jpg)
Google Maps 23
![Page 24: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/24.jpg)
Google Maps 24
![Page 25: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/25.jpg)
Google Maps 25
![Page 26: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/26.jpg)
Google Maps 26
![Page 27: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/27.jpg)
Google Maps 27
![Page 28: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/28.jpg)
Google Maps 28
![Page 29: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/29.jpg)
Yahoo! Maps
15х10cm
29
![Page 30: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/30.jpg)
Yahoo! Maps 30
![Page 31: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/31.jpg)
Microsoft Bing
12х12cm
3х3cm
31
![Page 32: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/32.jpg)
Microsoft Bing 32
![Page 33: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/33.jpg)
Microsoft Bing 33
![Page 34: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/34.jpg)
Microsoft Bing 34
![Page 35: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/35.jpg)
Рамблер Карты
15х15cm
35
![Page 36: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/36.jpg)
Рамблер Карты 36
![Page 37: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/37.jpg)
Рамблер Карты 37
![Page 38: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/38.jpg)
Карты Mail.ru
15х12cm
38
![Page 39: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/39.jpg)
Карты Mail.ru 39
![Page 40: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/40.jpg)
Карты Mail.ru 40
![Page 41: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/41.jpg)
Яндекс.Карты до 2013 года
15х15cm
41
![Page 42: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/42.jpg)
Яндекс.Карты до 2013 года 42
![Page 43: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/43.jpg)
Яндекс.Карты до 2013 года 43
![Page 44: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/44.jpg)
Яндекс.Карты до 2013 года 44
![Page 45: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/45.jpg)
Яндекс.Карты до 2013 года 45
![Page 46: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/46.jpg)
Недостатки существующих решений:
• Карта маленькая
• Подача информации неоптимальная
• Нет альбомной версии
46
![Page 47: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/47.jpg)
Но!
![Page 48: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/48.jpg)
Печать на
Яндекс.Картах
![Page 49: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/49.jpg)
Размеры карты:
20 х 27cm
49
![Page 50: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/50.jpg)
50
![Page 51: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/51.jpg)
51
![Page 52: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/52.jpg)
52
![Page 53: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/53.jpg)
53
![Page 54: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/54.jpg)
54
![Page 55: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/55.jpg)
55
![Page 56: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/56.jpg)
56
![Page 57: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/57.jpg)
57
![Page 58: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/58.jpg)
58
![Page 59: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/59.jpg)
59
![Page 60: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/60.jpg)
Печать на
Яндекс.Картах
![Page 61: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/61.jpg)
Как мы это
сделали?
![Page 62: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/62.jpg)
... Quirks again?
![Page 63: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/63.jpg)
63
![Page 64: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/64.jpg)
1998
![Page 65: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/65.jpg)
2012
![Page 66: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/66.jpg)
Дальше будет:• как искали раскладку
• как подключали стили
• как фильтровали браузеры
• как обошлись с IE
• ...
• как напечатать фон?
66
![Page 67: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/67.jpg)
В поисках раскладки 67
Карта
Шапка
Подвал
![Page 68: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/68.jpg)
Quirks Mode
<table height=' 100% '>
...
</table>
td.map {
height: 100%
}
В поисках раскладки
01.
02.
03.
04.
05.
06.
68
<td class='map'> Карта </td>
<td> Шапка </td>
<td> Подвал </td>
![Page 69: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/69.jpg)
Javascript?
В поисках раскладки 69
<td class='map'> Карта </td>
<td> Шапка </td>
<td> Подвал </td>
![Page 70: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/70.jpg)
Javascript
:(
![Page 71: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/71.jpg)
Хочется красотыif ( page.orientation === 'landscape' ) {
// do something
}
if ( page.size.width === '210mm' ) {
// do something
}
01.
02.
03.
01.
02.
03.
71
![Page 72: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/72.jpg)
CSS for printer@media print and (orientation:landscape) {
// do something
}
01.
02.
03.
72
![Page 73: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/73.jpg)
@rules
![Page 74: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/74.jpg)
74
![Page 75: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/75.jpg)
Nitro
WebCore
Webkit2
75
![Page 76: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/76.jpg)
V8
WebCore
Chromium
76
![Page 77: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/77.jpg)
V8
Blink
Chromium
77
![Page 78: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/78.jpg)
12
78
![Page 79: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/79.jpg)
@page/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
79
![Page 80: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/80.jpg)
@page/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
file://localhost/Users/makishvili/projects/print-and-go/page-zero.html
05.07.13
80
![Page 81: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/81.jpg)
@page/* Обнулить поля */
@page {
margin: 0
}
Не работает?
01.
02.
03.
04.
12
81
![Page 82: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/82.jpg)
@page/* Изменить поля */
@page {
margin: 1cm
}
Заработало!
01.
02.
03.
04.
12
82
![Page 83: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/83.jpg)
@page/* Изменить поля */
@page {
margin: 1cm
}
Точка отсчёта -
дефолтные отступы,
а не край листа
01.
02.
03.
04.
12
83
![Page 84: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/84.jpg)
@page size/* Принудительно задать ориентацию */
@page {
size: landscape
}
01.
02.
03.
04.
84
![Page 85: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/85.jpg)
@page name/* Группировка свойств */
@page myName {
font-size: 18px
padding: 10px
}
div {
page: myName
}
01.
02.
03.
04.
05.
06.
07.
08.
85
![Page 86: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/86.jpg)
@page name. Фильтрация браузеров?@page chromePage { margin: 0 }
body.chrome { page: chromePage }
@page operaPage { margin: 5mm }
body.opera { page: operaPage }
01.
02.
03.
04.
86
![Page 87: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/87.jpg)
@page name. Увы :(@page { margin: 0 }
@page operaPage { margin: 5mm }
body.opera { page: operaPage }
01.
02.
03.
04.
12
87
![Page 88: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/88.jpg)
@document: фильтруем Firefox@page { margin: 0 }
@-moz-document regexp('*') {
@page {
margin-top: 1cm;
margin-bottom: 1cm;
}
}
01.
02.
03.
04.
05.
06.
07.
08.
88
![Page 89: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/89.jpg)
Media-queries
![Page 90: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/90.jpg)
Ориентация листа
@media print and (orientation:portrait) {
/* стили только для портрета */
}
@media print and (orientation:landscape) {
/* стили только для альбома */
}
01.
02.
03.
04.
05.
06.
9+
12-
90
![Page 91: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/91.jpg)
Раскладка 91
Карта
Шапка
Подвал
![Page 92: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/92.jpg)
table, td.map {
height: 100%
}
1. Таблица01.
02.
03.
92
<td class='map'> Карта </td>
<td> Шапка </td>
<td> Подвал </td>
![Page 93: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/93.jpg)
div {
display: table-cell
}
.map {
height: 100%
}
1. Таблица01.
02.
03.
04.
05.
06.
93
<div class='map'> Карта </div>
<div> Шапка </div>
<div> Подвал </div>
![Page 94: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/94.jpg)
• нет min-height и max-height
CSS 2.1 не определяет поведение min-height и max-height в таблицах,
поэтому любая реалиция этих свойств (применительно к таблицам) -
CSS2.1-совместимая
MDN
• нет overflow:hidden внутри ячейки
1. Таблица
“
94
![Page 95: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/95.jpg)
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.
95
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
![Page 96: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/96.jpg)
• не работает 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. Позиционирование
“
96
![Page 97: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/97.jpg)
.map {
height: 100%
}
3. Поток01.
02.
03.
97
<div class='map'> Карта </div>
![Page 98: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/98.jpg)
.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.
98
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
![Page 99: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/99.jpg)
.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.
99
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
Утвержд
ено
![Page 100: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/100.jpg)
Как организовать
стили?
![Page 101: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/101.jpg)
Как организовать стили так, чтобы:• разделить на экранные и принтерные
• разделить на портретные и альбомные
• ...
• и уметь это дебажить
101
![Page 102: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/102.jpg)
Сначала бездумноbody {
width: 900px
}
@media print {
body {
width: auto /* переопределяю */
padding: 5mm
}
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
102
![Page 103: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/103.jpg)
Потом с медиа-типами@media all {
body { font-size: 16px }
}
@media screen {
body { width: 900px }
}
@media print {
body { padding: 5mm }
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
103
![Page 104: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/104.jpg)
Потом с медиа-выражениями@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.
104
![Page 105: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/105.jpg)
Наконец, с умом
<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.
105
![Page 106: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/106.jpg)
Подождите, а что с IE?<meta ... content=' IE=EmulateIE7 '>
А почему не так?<meta ... content=' IE=EmulateIE7 , IE=edge '>
106
![Page 107: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/107.jpg)
IE9 печатает
хуже, чем IE7
o_O
![Page 108: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/108.jpg)
<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.
108
![Page 109: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/109.jpg)
Большая картинкав маленьком окне
overflow: hidden
9на печати
109
![Page 110: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/110.jpg)
Большая картинкав маленьком окне
+ display: inline-block
9на печати
110
![Page 111: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/111.jpg)
.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.
111
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
![Page 112: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/112.jpg)
.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на печати
112
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
<div class='map'> Карта </div>
![Page 113: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/113.jpg)
.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на печати
113
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
<div class='map'> Карта </div>
![Page 114: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/114.jpg)
.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.
12 on Mac
114
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
![Page 115: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/115.jpg)
.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.
12 on Mac
115
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
![Page 116: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/116.jpg)
3. Поток + «наляпки»
+ <div class='opacity-hack'></div>
.opacity-hack {
position: absolute
background: red
opacity: 0.3
}
01.
02.
03.
04.
05.
12 on Mac
116
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
![Page 117: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/117.jpg)
3. Поток + «наляпки»
<div class='opacity-hack'></div>
.opacity-hack {
position: absolute
opacity: 0
}
01.
02.
03.
04.
12 on Mac
117
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
![Page 118: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/118.jpg)
Фильтруем
браузеры
![Page 119: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/119.jpg)
(function () {
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);
}
}());
Фильтруем браузеры01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
119
<html class=' opera '>
...
</html>
01.
02.
03.
![Page 120: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/120.jpg)
html, body {
height: 100%
}
.map {
width: 100%
height: 100%
}
100% листа01.
02.
03.
04.
05.
06.
07.
120
<div class='map'> Карта </div>
![Page 121: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/121.jpg)
html, body {
height: 100%
}
.map {
width: 100%
height: 100%
}
100% листа01.
02.
03.
04.
05.
06.
07.
25 6
121<div class='map'> Карта </div>
![Page 122: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/122.jpg)
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.
122
<div class='map'> Карта </div>
25 6
![Page 123: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/123.jpg)
Предпросмотр
печативрёт
![Page 124: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/124.jpg)
@page/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
124
![Page 125: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/125.jpg)
@page/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
125
![Page 126: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/126.jpg)
@page/* Обнулить поля */
@page {
margin: 0
}
Молодец!
01.
02.
03.
04.
12
126
![Page 127: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/127.jpg)
@page/* Обнулить поля */
@page {
margin: 0
}
Молодец!
01.
02.
03.
04.
18+
127
![Page 128: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/128.jpg)
Что-то здесьнеправильно
128
![Page 129: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/129.jpg)
Линии?!
129
![Page 130: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/130.jpg)
Линии?!• это точно не border
• точно не outline
• не зазор между блоками
• ...
• что это? o_O
130
![Page 131: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/131.jpg)
Javascript
;)
![Page 132: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/132.jpg)
События• onbeforeprint
• onafterprint
5+ 6+ не захотели
132
![Page 133: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/133.jpg)
Match @mediaif (window.matchMedia(' (min-width: 400px) ').matches) {
// do something
}
01.
02.
03.
5.112 10 6+ 9+
133
![Page 134: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/134.jpg)
Помните, мечтали о красоте...
if ( page.orientation === 'landscape' ) {
// do something
}
if (window.matchMedia(' print and (orientation: landscape) ').matches) {
// do something
}
Неужели, сбылось? :)
01.
02.
03.
01.
02.
03.
134
![Page 135: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/135.jpg)
Match "@media print"if (window.matchMedia(' print ').matches) {
// do something
}
if (window.matchMedia(' print and (orientation: landscape) ').matches) {
// do something
}
Match "@media orientation"
01.
02.
03.
5.1
01.
02.
03.
135
![Page 136: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/136.jpg)
http://clck.ru/8vbdS
TJ VanToll"Detecting Print Requests with JavaScript"
136
![Page 137: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/137.jpg)
Адаптивный
комментарий
![Page 138: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/138.jpg)
138
![Page 139: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/139.jpg)
139
![Page 140: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/140.jpg)
5 строк
140
![Page 141: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/141.jpg)
.footer {
position: absolute
bottom: 0
}
.footer and (min-width: 86px) {
position: static
}
Хочется Element Queries:01.
02.
03.
04.
05.
06.
07.
141
![Page 142: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/142.jpg)
![Page 143: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/143.jpg)
if (footerHeight > 86) {
footer.addClass('on-next-page');
}
/* Больше 86px — отправляется на второй лист */
.foote.on-next-page {
position: static
}
Комментарий на второй лист:01.
02.
03.
01.
02.
03.
04.
143
![Page 144: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/144.jpg)
15 строк
144
![Page 145: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/145.jpg)
15 ?
145
![Page 146: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/146.jpg)
10 строк
146
![Page 147: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/147.jpg)
@media print and (orientation: landscape) {
.footer and (min-width: 160px) { position: static }
}
@media print and (orientation: portrait) {
.footer and (min-width: 240px) { position: static }
}
Хочется Media + Element Queries01.
02.
03.
04.
05.
06.
147
![Page 148: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/148.jpg)
if (footerHeight > 160) {
footer.addClass('on-next-page_ for-landscape ');
}
if (footerHeight > 240) {
footer.addClass('on-next-page_ for-portrait ');
}
Наша красота:
01.
02.
03.
04.
05.
06.
148
![Page 149: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/149.jpg)
<!-- Подвал меньше 160px -->
<div class="footer"></div>
<!-- Больше 160px -->
<div class="footer on-next-page_ for-landscape "></div>
<!-- Больше 240px -->
<div class="footer on-next-page_ for-landscape
on-next-page_ for-portrait "></div>
Наша красота:
01.
02.
03.
04.
05.
06.
149
![Page 150: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/150.jpg)
@media print {
/* Подвал меньше 160px */
.footer { position: absolute; bottom: 0 }
}
@media print and (orientation: landscape ) {
/* Больше 160px */
.footer.on-next-page_ for-landscape { position: static }
}
@media print and (orientation: portrait ) {
/* Больше 240px */
.footer.on-next-page_ for-portrait { position: static }
}
Наша красота:
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
150
![Page 151: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/151.jpg)
151
15 строк 10 строк
![Page 152: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/152.jpg)
Масштабированиекарты
![Page 153: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/153.jpg)
153
![Page 154: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/154.jpg)
Неточный
центр карты
![Page 155: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/155.jpg)
Неточный центр
карты
155Шапка
Подвал
![Page 156: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/156.jpg)
Неточный центр
карты
156Шапка
Подвал
![Page 157: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/157.jpg)
Неточный центр
карты
157Шапка
Панорама
Подвал
![Page 158: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/158.jpg)
158Шапка
Панорама
Подвал
Шапка
Подвал
![Page 159: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/159.jpg)
![Page 160: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/160.jpg)
Переместить центркарты<style media="print and (orientation:portrait)">
.map { top: -35px }
</style>
01.
02.
03.
160Шапка
Подвал
![Page 161: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/161.jpg)
Переместить центркарты<style media="print and (orientation:portrait)">
.map { top: 75px }
</style>
01.
02.
03.
161Шапка
Панорама
Подвал
![Page 162: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/162.jpg)
http://clck.ru/8hvkH
jQuery.injectCSS 162
![Page 163: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/163.jpg)
Фон
![Page 164: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/164.jpg)
bgcolor, background
![Page 165: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/165.jpg)
МЕНЮ
КонтактыНовостиАбиссинские котятаАбиссинская породаСтандарт CFAСтандарт TICAОкрасы абиссинскихкошекЗаводчики и судьи обабиссинахВыбор абиссинскогокотенкаГостевая книгаКаталог статей
ПлеменноеразведениеЗдоровьеГенетика
Контакты
телефон: 8-916-271-71-57
е-мейл: [email protected]@list.ru
Россия, Москва. Iultina Veselyaeva
Здесь вы можете написать и отправить нам письмо, мы ответим на все Ваши вопросы: заполнитепредлагаемую форму обратной связи-укажите, пожалуйста, ваше имя и электронный адрес.
форма обратной связи
Имя отправителя*:
E-mail отправителя*: -
ГЛАВНАЯ КОТЫ (MALE) КОШКИ (FEMALE) КОТЯТА (KITTENS) ЗАЯВКА НА КОТЕНКА КОНТАКТЫ ССЫЛКИ
165
![Page 166: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/166.jpg)
О питомнике
Новости
О породе Бобтейл
Начинающему заводчику
Выставки
Чемпионы
Приглашаем на вязки
Фотогалерея
Наши путешествия
Наши услуги
Полезные документы
Ссылки
Они навсегда в нашейпамяти ...
Контакты
Напишите нам
ЩЕНКИ
Наши собаки снимаются в
О ПИТОМНИКЕ
логотип
Мы кушаем корма " HAPPY DOG " с 30 % скидкой!
166
![Page 167: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/167.jpg)
питомник основан в 1993 г. Москва ♥ порода: БРИТАНСКАЯ КОРОТКОШЕРСТНАЯ ♥
ПРОДАЖА британских котят ГОЛУБОГО КЛАССИЧЕСКОГО ОКРАСА
Заводчик, инструктор-фелинолог Курофф Юлия Валерьевна
тел. +7(916)426-18-18 e-mail: [email protected]
♥ ГЛАВНАЯ
♥ Новости питомника
♥ О питомнике
♥ О породе
♥ Кпродаже
♥ Наши КОТЯТА(фотогалерея)
♥ Наши кошки
♥ Вязки
♥ Наши коты
БРИТАНСКИЕ КОТЯТА НА ПРОДАЖУ
На данной страничке вашему вниманию предлагаются котята, которые продаются в питомникев данный момент (возле фото указан возраст котят)
Внимание. На данный момент в питомнике продаются голубые британские котята, а также
ведется предварительная запись на ГОЛУБЫХ БРИТАНСКИХ котят ЕСЛИ ВЫ желаете записаться заранее на котят - присылайте заявку по эл.почте
Вы желаете купить британского котенка? Спасибо, что выбрали
именно наш питомник!
167
![Page 168: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/168.jpg)
http://clck.ru/8hLnN
CSSWG: «Как включить печать фона?» 168
![Page 169: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/169.jpg)
CSSWG: «Как включить печать фона?».selector {
-webkit-print-color-adjust: exact
}
Одно из предложений
@page {
print-color-adjust: exact
}
01.
02.
03.
01.
02.
03.
169
![Page 170: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/170.jpg)
Все браузеры
печатают...
![Page 171: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/171.jpg)
171
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
![Page 172: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/172.jpg)
Больше белого!• Это красиво
• Это воздушно
• Берите пример с хорошего ;)
172
![Page 173: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/173.jpg)
IE не печатает
белый
![Page 174: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/174.jpg)
А так печатает.selector {
filter: progid:DXImageTransform.Microsoft. gradient (
startColorstr= '#ffffff' ,
endColorstr= '#ffffff' ,
GradientType=0 );
}
01.
02.
03.
8-
174
![Page 175: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/175.jpg)
Фоновый цвет
![Page 176: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/176.jpg)
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.
176
![Page 177: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/177.jpg)
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.
177
Старьё!
![Page 178: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/178.jpg)
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.
178
![Page 179: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/179.jpg)
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.
179
Неуспех!
![Page 180: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/180.jpg)
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.
180
![Page 181: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/181.jpg)
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.
181
![Page 182: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/182.jpg)
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.
182
![Page 183: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/183.jpg)
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.
183
12 на печати
content:url(SVG)
![Page 184: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/184.jpg)
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.
184
![Page 185: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/185.jpg)
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.
185
![Page 186: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/186.jpg)
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.
186
Утвержд
ено
![Page 187: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/187.jpg)
Фоновое
изображение
![Page 188: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/188.jpg)
188
![Page 189: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/189.jpg)
189
![Page 190: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/190.jpg)
190
![Page 191: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/191.jpg)
191
![Page 192: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/192.jpg)
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.
192
![Page 193: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/193.jpg)
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.
193
![Page 194: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/194.jpg)
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.
194
Утвержд
ено
![Page 195: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/195.jpg)
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.
195
![Page 196: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/196.jpg)
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.
196
12
![Page 197: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/197.jpg)
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.
197
![Page 198: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/198.jpg)
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.
198
![Page 199: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/199.jpg)
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.
199
![Page 200: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/200.jpg)
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.
200
12
![Page 201: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/201.jpg)
2. Border-image...
border-image: url(box.png) 100 0 0 0 / auto repeat;
...
Размноженная фоновая картинка
01.
02.
03.
201
![Page 202: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/202.jpg)
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.
202
![Page 203: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/203.jpg)
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.
203
![Page 204: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/204.jpg)
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.
204
![Page 205: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/205.jpg)
• Нужен фоновый цвет?
::before + border-color
• Нужна одинокая картинка в фоне?
::before + content: url(png)
• Хотите замостить картинку?
::before + border-image: url(pbg) + repeat
• Или растянуть?
::before + border-image: url(pbg) + stretch
205
![Page 206: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/206.jpg)
![Page 207: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/207.jpg)
207
![Page 208: Вадим Макишвили — Распечатай Яндекс.Карты](https://reader033.vdocuments.site/reader033/viewer/2022052904/557f3665d8b42a46658b512e/html5/thumbnails/208.jpg)
Распечатай Яндекс.КартыВадим Макишвили
Презентация: makishvili.github.io/print-and-go/index.html
208