Олег Мохов "CSS3 фарш"
92
CSS3 фарш Я.Субботник, Новосибирск, 19 ноября 2011 года Разработчик интерфейсов Олег Мохов
-
Upload
yandex -
Category
Technology
-
view
1.250 -
download
0
description
Олег Мохов "CSS3 фарш" Я.Субботник в Новосибирске О докладе: Давайте приготовим что-нибудь вкусненькое на CSS3. Сварим немного градиентов, перемешаем со скруглёнными уголками, добавим «тенюшек» и заправим всё это флексбоксом. Такой винегрет новых технологий даёт кучу интересных результатов, когда свойства бывают несовместимы друг с другом, и дизайнеры, которым дали в руки напильник из CSS3, рисуют «космические» картинки, о которых и не подозревают разработчики веб-стандартов. Рассказ пойдет о том, как верстальщики Яндекса пытаются справиться с этим «фаршем», и что из этого обычно получается.
Transcript of Олег Мохов "CSS3 фарш"
CSS3 фарш
Я.Субботник, Новосибирск, 19 ноября 2011 года
Разработчик интерфейсовОлег Мохов
2011
2
2011CSS2.1
2
CSS3
3
CSS3
3
CSS3
4
CSS3 Первое упоминание в 1999
4
CSS3 Первое упоминание в 1999
Более 50 модулей
4
CSS3 Первое упоминание в 1999
Более 50 модулей
3 модуля рекомендованы
4
CSS3 Первое упоминание в 1999
Более 50 модулей
3 модуля рекомендованы
4 модуля в кандидатах
4
5
6
7
7
7
8
9
1010
11
11
Firefox 4IE9
11
Firefox 4IE9
11
Firefox 4IE9
ChromeSafari
11
Firefox 4IE9
ChromeSafari
11
Firefox 4IE9
ChromeSafari
11
Firefox 4IE9
ChromeSafari
Opera
11
12
12
13
background: #b3b3b3
13
background: #b3b3b3
13
border-radius: 20px
14
border-radius: 20px
14
box-shadow: 3px 3px 5px #0ff
15
box-shadow: 3px 3px 5px #0ff
15
16
16
16
17
18
18
19
20
20
21
position: relative
position: relative
:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0}
position: relative
:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0}
position: relative
:before { z-index: -1}
:before { z-index: -1}
:before { box-shadow: ...}
:before { box-shadow: ...}
26
27
Photoshop Browser
Photoshop Browser
Photoshopsmoothness
100%
Photoshopsmoothness
0%
Browser
31
.b-mail-list:not(:last-of-type):after{ content: ', '}
32
33
33
34
35
36
37
.b-button:after, .b-button:before { transition: 0.5s opacity linear;}
.b-button:after { opacity: 0;}
.b-button:hover:before { opacity: 0 !important; }
.b-button:hover:after { opacity: 1 !important; }
38
background: linear-gradient(top, #c5c5c5 0, rgba(197,197,197, 0) 3px),
linear-gradient(-170deg, #c5c5c5 0, rgba(197,197,197, 0) 4px),
linear-gradient(-10deg, #c5c5c5 0, rgba(197,197,197, 0) 4px),
#fff;
.b-menu__layout-cell:first-of-type .b-tabbed-pane__tab:not(.b-tabbed-pane__tab_state_current):after,
.b-menu__layout-cell:last-of-type .b-tabbed-pane__tab:not(.b-tabbed-pane__tab_state_current):before
Ложка дёгтя
.b-block:not(.hidden):last-of-type{ margin-right: 0;}
.b-block:last-of-type:not(.hidden){ margin-right: 0;}
45
.b-block:last-of-type:not(:hidden){ display: block;}
46
.b-block <~ .b-block:not(.hidden){ display: block;}
47
48
CSS3 Первое упоминание в 1999
Более 50 модулей
3 модуля рекомендованы
4 модуля в кандидатах
http://lab.simurai.com/css/umbrui/
http://lab.simurai.com/css/buttons/
