Операция CSS3

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

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

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

5. text-shadow
:after
border-radius
:focus
box-shadow
:before
background: gradient
border-image content
5

6. background-origin column-rule
overflow-x
word-wrap text-shadow overflow-y
:after
border-radius counter-reset
text-overflow
opacity :focus
background-clip text-align-last
box-shadow
box-sizing
:before
column-count background: gradient
column-width background-size column-gap
resize
border-image content
counter-increment
writing-mode 6

7. background-origin :empty :only-child :first-line
column-rule
:read-write
::selection word-wrap :enabled overflow-x
text-shadow overflow-y
:disabled :after
border-radius :nth-of-type :first-letter
counter-reset :required
text-overflow
:only-of-type opacity :root :focus
:nth-child
background-clip text-align-last
:checked box-shadow
:optional box-sizing
:nth-last-child :not
:default :before :last-child
column-count background: gradient
:read-only
column-width :indeterminate :target
background-size column-gap
resize
border-image :invalid content
:valid
:first-of-type counter-increment
:last-of-type writing-mode 7

8. background-origin :empty :only-child :first-line
column-rule
:read-write
::selection word-wrap :enabled overflow-x
text-shadow overflow-y
:disabled :after
border-radius :nth-of-type :first-letter
counter-reset :required
text-overflow
:only-of-type opacity :root :focus
:nth-child
background-clip text-align-last
:checked box-shadow
:optional box-sizing
:nth-last-child :not
:default :before :last-child
column-count background: gradient
:read-only
column-width :indeterminate :target
background-size column-gap
resize
border-image :invalid content
:valid
:first-of-type counter-increment
:last-of-type writing-mode 8

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

10. 10

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

12. data:uri для иконок
.example-icon
{
background: url(b-icon.png);
background: url(data:image/png;base64,iVBO…);
}
12

13. data:uri для иконок
.example-icon
{
background: url(b-icon.png);
}
.example-icon:not(b)
{
background: url(data:image/png;base64,iVBO…);
}
13

14. data:uri для курсоров
.b-grab
{
cursor: move;
}
.b-grab:not(b)
{
cursor:url(data:image/
gif;base64,R0lGODlhEAAQAJECAP///wAAAAAAAAAA) 8 8,move;
}
14

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

16. Транзишены
.b-transition
{
-moz-transition: linear 1s margin;
-webkit-transition: linear 1s margin;
-o-transition: linear 1s margin;
transition: linear 1s margin;
}
16

17. Проблемы
17

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

19. 19

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

21. Safari, Chrome 21

22. Firefox 3.6, Opera 11/Next 22

23. Firefox 4/5b 23

24. Много кода
24

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

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

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

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

29. 29

30. 30

31. 31

32. 32

33. 33

34. 34

35. .example-shadow
{
position: relative;
}
35

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

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

38. .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. 39

40. 40

41. 41

42. 42

43. 43

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

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

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: “”;
}
46

47. .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
}

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

49. border-image " -o-border-image
49

50. border-image " -o-border-image
50

51. А компот?
51

52. 52

53. Photoshop Browser
53

54. 54

55. Browser
Photoshop Photoshop
smoothness 100% smoothness 0%
55

56. И главное
56

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

58. Не бойтесь
58

59. пробовать 59

60. разное 60

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

62. А теперь вопросы
Олег Мохов
mokhov@yandex-team.ru