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

http://bar.yandex.com.tr

Ложка дёгтя

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

Разработчик интерфейсовmokhov@yandex-team.rutwitter: olmokhov

Олег Мохов