Embed Size (px)
DESCRIPTION
В Яндексе разработали лучшую в мире страницу печати Карт. Как они это сделали, с какими проблемами столкнулись, какие трюки изобрели.
Citation preview
Распечатай Яндекс.КартыВадим Макишвили, WSD декабрь 2013
Конкуренты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
Какая нужна
карта?
чистая
удобная
подробная
полная
наглядная
Print & Go!
Критерии качества:• Размер карты
• Подача информации
• Альбомная ориентация
18
А4 формат
21х29cm
19
Google Maps
15х15cm
20
Google Maps 21
Google Maps 22
Google Maps 23
Google Maps 24
Google Maps 25
Google Maps 26
Google Maps 27
Google Maps 28
Yahoo! Maps
15х10cm
29
Yahoo! Maps 30
Microsoft Bing
12х12cm
3х3cm
31
Microsoft Bing 32
Microsoft Bing 33
Microsoft Bing 34
Рамблер Карты
15х15cm
35
Рамблер Карты 36
Рамблер Карты 37
Карты Mail.ru
15х12cm
38
Карты Mail.ru 39
Карты Mail.ru 40
Яндекс.Карты до 2013 года
15х15cm
41
Яндекс.Карты до 2013 года 42
Яндекс.Карты до 2013 года 43
Яндекс.Карты до 2013 года 44
Яндекс.Карты до 2013 года 45
Недостатки существующих решений:
• Карта маленькая
• Подача информации неоптимальная
• Нет альбомной версии
46
Но!
Печать на
Яндекс.Картах
Размеры карты:
20 х 27cm
49
50
51
52
53
54
55
56
57
58
59
Печать на
Яндекс.Картах
Как мы это
сделали?
... Quirks again?
63
1998
2012
Дальше будет:• как искали раскладку
• как подключали стили
• как фильтровали браузеры
• как обошлись с IE
• ...
• как напечатать фон?
66
В поисках раскладки 67
Карта
Шапка
Подвал
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>
Javascript?
В поисках раскладки 69
<td class='map'> Карта </td>
<td> Шапка </td>
<td> Подвал </td>
Javascript
:(
Хочется красотыif ( page.orientation === 'landscape' ) {
// do something
}
if ( page.size.width === '210mm' ) {
// do something
}
01.
02.
03.
01.
02.
03.
71
CSS for printer@media print and (orientation:landscape) {
// do something
}
01.
02.
03.
72
@rules
74
Nitro
WebCore
Webkit2
75
V8
WebCore
Chromium
76
V8
Blink
Chromium
77
12
78
@page/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
79
@page/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
file://localhost/Users/makishvili/projects/print-and-go/page-zero.html
05.07.13
80
@page/* Обнулить поля */
@page {
margin: 0
}
Не работает?
01.
02.
03.
04.
12
81
@page/* Изменить поля */
@page {
margin: 1cm
}
Заработало!
01.
02.
03.
04.
12
82
@page/* Изменить поля */
@page {
margin: 1cm
}
Точка отсчёта -
дефолтные отступы,
а не край листа
01.
02.
03.
04.
12
83
@page size/* Принудительно задать ориентацию */
@page {
size: landscape
}
01.
02.
03.
04.
84
@page name/* Группировка свойств */
@page myName {
font-size: 18px
padding: 10px
}
div {
page: myName
}
01.
02.
03.
04.
05.
06.
07.
08.
85
@page name. Фильтрация браузеров?@page chromePage { margin: 0 }
body.chrome { page: chromePage }
@page operaPage { margin: 5mm }
body.opera { page: operaPage }
01.
02.
03.
04.
86
@page name. Увы :(@page { margin: 0 }
@page operaPage { margin: 5mm }
body.opera { page: operaPage }
01.
02.
03.
04.
12
87
@document: фильтруем Firefox@page { margin: 0 }
@-moz-document regexp('*') {
@page {
margin-top: 1cm;
margin-bottom: 1cm;
}
}
01.
02.
03.
04.
05.
06.
07.
08.
88
Media-queries
Ориентация листа
@media print and (orientation:portrait) {
/* стили только для портрета */
}
@media print and (orientation:landscape) {
/* стили только для альбома */
}
01.
02.
03.
04.
05.
06.
9+
12-
90
Раскладка 91
Карта
Шапка
Подвал
table, td.map {
height: 100%
}
1. Таблица01.
02.
03.
92
<td class='map'> Карта </td>
<td> Шапка </td>
<td> Подвал </td>
div {
display: table-cell
}
.map {
height: 100%
}
1. Таблица01.
02.
03.
04.
05.
06.
93
<div class='map'> Карта </div>
<div> Шапка </div>
<div> Подвал </div>
• нет min-height и max-height
CSS 2.1 не определяет поведение min-height и max-height в таблицах,
поэтому любая реалиция этих свойств (применительно к таблицам) -
CSS2.1-совместимая
MDN
• нет overflow:hidden внутри ячейки
1. Таблица
“
94
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-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
.map {
height: 100%
}
3. Поток01.
02.
03.
97
<div class='map'> Карта </div>
.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>
.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>
Утвержд
ено
Как организовать
стили?
Как организовать стили так, чтобы:• разделить на экранные и принтерные
• разделить на портретные и альбомные
• ...
• и уметь это дебажить
101
Сначала бездумноbody {
width: 900px
}
@media print {
body {
width: auto /* переопределяю */
padding: 5mm
}
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
102
Потом с медиа-типами@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
Потом с медиа-выражениями@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
Наконец, с умом
<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
Подождите, а что с IE?<meta ... content=' IE=EmulateIE7 '>
А почему не так?<meta ... content=' IE=EmulateIE7 , IE=edge '>
106
IE9 печатает
хуже, чем IE7
o_O
<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
Большая картинкав маленьком окне
overflow: hidden
9на печати
109
Большая картинкав маленьком окне
+ display: inline-block
9на печати
110
.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>
.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>
.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>
.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>
.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>
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>
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>
Фильтруем
браузеры
(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.
html, body {
height: 100%
}
.map {
width: 100%
height: 100%
}
100% листа01.
02.
03.
04.
05.
06.
07.
120
<div class='map'> Карта </div>
html, body {
height: 100%
}
.map {
width: 100%
height: 100%
}
100% листа01.
02.
03.
04.
05.
06.
07.
25 6
121<div class='map'> Карта </div>
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/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
124
@page/* Обнулить поля */
@page {
margin: 0
}
01.
02.
03.
04.
125
@page/* Обнулить поля */
@page {
margin: 0
}
Молодец!
01.
02.
03.
04.
12
126
@page/* Обнулить поля */
@page {
margin: 0
}
Молодец!
01.
02.
03.
04.
18+
127
Что-то здесьнеправильно
128
Линии?!
129
Линии?!• это точно не border
• точно не outline
• не зазор между блоками
• ...
• что это? o_O
130
Javascript
;)
События• onbeforeprint
• onafterprint
5+ 6+ не захотели
132
Match @mediaif (window.matchMedia(' (min-width: 400px) ').matches) {
// do something
}
01.
02.
03.
5.112 10 6+ 9+
133
Помните, мечтали о красоте...
if ( page.orientation === 'landscape' ) {
// do something
}
if (window.matchMedia(' print and (orientation: landscape) ').matches) {
// do something
}
Неужели, сбылось? :)
01.
02.
03.
01.
02.
03.
134
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
http://clck.ru/8vbdS
TJ VanToll"Detecting Print Requests with JavaScript"
136
Адаптивный
комментарий
138
139
5 строк
140
.footer {
position: absolute
bottom: 0
}
.footer and (min-width: 86px) {
position: static
}
Хочется Element Queries:01.
02.
03.
04.
05.
06.
07.
141
if (footerHeight > 86) {
footer.addClass('on-next-page');
}
/* Больше 86px — отправляется на второй лист */
.foote.on-next-page {
position: static
}
Комментарий на второй лист:01.
02.
03.
01.
02.
03.
04.
143
15 строк
144
15 ?
145
10 строк
146
@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
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
<!-- Подвал меньше 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
@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
151
15 строк 10 строк
Масштабированиекарты
153
Неточный
центр карты
Неточный центр
карты
155Шапка
Подвал
Неточный центр
карты
156Шапка
Подвал
Неточный центр
карты
157Шапка
Панорама
Подвал
158Шапка
Панорама
Подвал
Шапка
Подвал
Переместить центркарты<style media="print and (orientation:portrait)">
.map { top: -35px }
</style>
01.
02.
03.
160Шапка
Подвал
Переместить центркарты<style media="print and (orientation:portrait)">
.map { top: 75px }
</style>
01.
02.
03.
161Шапка
Панорама
Подвал
http://clck.ru/8hvkH
jQuery.injectCSS 162
Фон
bgcolor, background
МЕНЮ
КонтактыНовостиАбиссинские котятаАбиссинская породаСтандарт CFAСтандарт TICAОкрасы абиссинскихкошекЗаводчики и судьи обабиссинахВыбор абиссинскогокотенкаГостевая книгаКаталог статей
ПлеменноеразведениеЗдоровьеГенетика
Контакты
телефон: 8-916-271-71-57
е-мейл: [email protected]@list.ru
Россия, Москва. Iultina Veselyaeva
Здесь вы можете написать и отправить нам письмо, мы ответим на все Ваши вопросы: заполнитепредлагаемую форму обратной связи-укажите, пожалуйста, ваше имя и электронный адрес.
форма обратной связи
Имя отправителя*:
E-mail отправителя*: -
ГЛАВНАЯ КОТЫ (MALE) КОШКИ (FEMALE) КОТЯТА (KITTENS) ЗАЯВКА НА КОТЕНКА КОНТАКТЫ ССЫЛКИ
165
О питомнике
Новости
О породе Бобтейл
Начинающему заводчику
Выставки
Чемпионы
Приглашаем на вязки
Фотогалерея
Наши путешествия
Наши услуги
Полезные документы
Ссылки
Они навсегда в нашейпамяти ...
Контакты
Напишите нам
ЩЕНКИ
Наши собаки снимаются в
О ПИТОМНИКЕ
логотип
Мы кушаем корма " HAPPY DOG " с 30 % скидкой!
166
питомник основан в 1993 г. Москва ♥ порода: БРИТАНСКАЯ КОРОТКОШЕРСТНАЯ ♥
ПРОДАЖА британских котят ГОЛУБОГО КЛАССИЧЕСКОГО ОКРАСА
Заводчик, инструктор-фелинолог Курофф Юлия Валерьевна
тел. +7(916)426-18-18 e-mail: [email protected]
♥ ГЛАВНАЯ
♥ Новости питомника
♥ О питомнике
♥ О породе
♥ Кпродаже
♥ Наши КОТЯТА(фотогалерея)
♥ Наши кошки
♥ Вязки
♥ Наши коты
БРИТАНСКИЕ КОТЯТА НА ПРОДАЖУ
На данной страничке вашему вниманию предлагаются котята, которые продаются в питомникев данный момент (возле фото указан возраст котят)
Внимание. На данный момент в питомнике продаются голубые британские котята, а также
ведется предварительная запись на ГОЛУБЫХ БРИТАНСКИХ котят ЕСЛИ ВЫ желаете записаться заранее на котят - присылайте заявку по эл.почте
Вы желаете купить британского котенка? Спасибо, что выбрали
именно наш питомник!
167
http://clck.ru/8hLnN
CSSWG: «Как включить печать фона?» 168
CSSWG: «Как включить печать фона?».selector {
-webkit-print-color-adjust: exact
}
Одно из предложений
@page {
print-color-adjust: exact
}
01.
02.
03.
01.
02.
03.
169
Все браузеры
печатают...
171
<div class='map'> Карта </div>
<div class='head'> Шапка </div>
<div class='foot'> Подвал </div>
Больше белого!• Это красиво
• Это воздушно
• Берите пример с хорошего ;)
172
IE не печатает
белый
А так печатает.selector {
filter: progid:DXImageTransform.Microsoft. gradient (
startColorstr= '#ffffff' ,
endColorstr= '#ffffff' ,
GradientType=0 );
}
01.
02.
03.
8-
174
Фоновый цвет
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
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
Старьё!
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
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
Неуспех!
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
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
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
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)
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
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
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
Утвержд
ено
Фоновое
изображение
188
189
190
191
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
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
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
Утвержд
ено
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
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
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
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
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
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
2. Border-image...
border-image: url(box.png) 100 0 0 0 / auto repeat;
...
Размноженная фоновая картинка
01.
02.
03.
201
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
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
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
• Нужен фоновый цвет?
::before + border-color
• Нужна одинокая картинка в фоне?
::before + content: url(png)
• Хотите замостить картинку?
::before + border-image: url(pbg) + repeat
• Или растянуть?
::before + border-image: url(pbg) + stretch
205
207
Распечатай Яндекс.КартыВадим Макишвили
Презентация: makishvili.github.io/print-and-go/index.html
208
