oleg mohov

Олег МоховЯ.Субботник, Киев, 28 мая 2011 года

CSS3

Начните использовать CSS3 уже сейчас!

3

Огласите весь список!4

border-radius

box-shadow

:before

:after

content

:focus

text-shadow

border-image

background: gradient

5

border-radius

box-shadow

:before

:after

content

:focus

text-shadow

border-image

background: gradient

counter-increment

counter-reset

background-clip

counter-increment

background-origin

background-size

box-sizing

column-count

column-gap

column-rule

column-width

opacity

overflow-xoverflow-y

resize

text-align-last

text-overflow

word-wrap

writing-mode

background: gradientbackground: gradient

6

border-radius

box-shadow

:before

:after

content

:focus

text-shadow

border-image

background: gradient

counter-increment

counter-reset

background-clip

counter-increment

background-origin

background-size

box-sizing

column-count

column-gap

column-rule

column-width

opacity

overflow-xoverflow-y

resize

text-align-last

text-overflow

word-wrap

writing-mode

background: gradientbackground: gradient

:checked

:default

:disabled

:default:empty

:enabled

:first-of-type

:indeterminate

:invalid

:last-child

:last-of-type

:not

:nth-child

:nth-last-child

:nth-of-type

:only-child

:only-of-type

:optional

:read-only

:read-write

:required

:root

:target

:valid

:first-letter

:first-line

::selection

7

border-radius

box-shadow

:before

:after

content

:focus

text-shadow

border-image

background: gradient

counter-increment

counter-reset

background-clip

counter-increment

background-origin

background-size

box-sizing

column-count

column-gap

column-rule

column-width

opacity

overflow-xoverflow-y

resize

text-align-last

text-overflow

word-wrap

writing-mode

background: gradientbackground: gradient

:checked

:default

:disabled

:default:empty

:enabled

:first-of-type

:indeterminate

:invalid

:last-child

:last-of-type

:not

:nth-child

:nth-last-child

:nth-of-type

:only-child

:only-of-type

:optional

:read-only

:read-write

:required

:root

:target

:valid

:first-letter

:first-line

::selection

8

С какого начать?9

10

data:uri для иконок.example-icon{ background: url(b-icon.png);}

11

.example-icon{ background: url(b-icon.png); background: url(data:image/png;base64,iVBO…);}

data:uri для иконок

12

.example-icon{ background: url(b-icon.png);}

.example-icon:not(b){ background: url(data:image/png;base64,iVBO…);}

data:uri для иконок

13

data:uri для курсоров.b-grab{    cursor: move;}

.b-grab:not(b){    cursor:url(data:image/gif;base64,R0lGODlhEAAQAJECAP///wAAAAAAAAAA) 8 8,move;}

14

Плавные движения

15

Транзишены

.b-transition{     -moz-transition: linear 1s margin;    -webkit-transition: linear 1s margin;     -o-transition: linear 1s margin;     transition: linear 1s margin;}

16

Проблемы

17

Конфликт «одинаковых» свойств18

19

.example-round{ -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px;}

20

Safari, Chrome21

Firefox 3.6, Opera 11/Next22

Firefox 4/5b23

Много кода

24

.example-gradient{ background: -moz-linear-gradient(90deg,…); background: -o-linear-gradient(90deg,…); background: -webkit-gradient(linear,…); background: -webkit-linear-gradient(90deg,…); background: linear-gradient(90deg,…); filter:progid:DXImageTransform.Microsoft.gradient…;-ms-filter:”progid:DXImageTransform.Microsoft.gradient…”;}

25

.example-gradient{ background: linear-gradient(90deg,…);}

26

Несовершенство стандартов

27

Дай дизайнеру в руки CSS3...

28

29

30

31

32

33

34

.example-shadow{ position: relative;}

35

.example-shadow{ position: relative;}

.example-shadow:before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; content: “”;}

36

.example-shadow{ position: relative;}

.example-shadow:before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”;}

37

.example-shadow{ position: relative;}

.example-shadow:before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”; box-shadow: 0 0 14px #fff;}

38

39

40

41

42

43

.example-border-image{ position: relative;}

44

.example-border-image{ position: relative;}

.example-border-image:before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; content: “”;}

45

.example-border-image{ position: relative;}

.example-border-image:before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”;}

46

.example-border-image{ position: relative;}

.example-border-image:before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”; border-image: ...;}

47

– А где бабуля?– Я за неё

border-image " -o-border-image

49

border-image " -o-border-image

50

А компот?51

52

Photoshop Browser

53

54

Photoshopsmoothness 100%

Photoshopsmoothness 0%

Browser

55

И главное

56

Начните использовать CSS3 уже сейчас!

57

Не бойтесь58

пробовать 59

разное60

и вы всегда будете на шаг впереди

61

А теперь вопросы

Олег Моховmokhov@yandex-team.ru