Oleg Mohov

659 views

Published on

Операция CSS3

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
659
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Oleg Mohov

  1. 1. CSS3 Олег Мохов Я.Субботник, Киев, 28 мая 2011 года
  2. 2. Начните использовать CSS3 уже сейчас! 3
  3. 3. Огласите весь список! 4
  4. 4. text-shadow :afterborder-radius :focus box-shadow :before background: gradientborder-image content 5
  5. 5. 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: gradientcolumn-width background-size column-gap resize border-image content counter-increment writing-mode 6
  6. 6. 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
  7. 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 8
  8. 8. С какого начать? 9
  9. 9. 10
  10. 10. data:uri для иконок.example-icon{ background: url(b-icon.png);} 11
  11. 11. data:uri для иконок.example-icon{ background: url(b-icon.png); background: url(data:image/png;base64,iVBO…);} 12
  12. 12. data:uri для иконок.example-icon{ background: url(b-icon.png);}.example-icon:not(b){ background: url(data:image/png;base64,iVBO…);} 13
  13. 13. data:uri для курсоров.b-grab{    cursor: move;}.b-grab:not(b){    cursor:url(data:image/gif;base64,R0lGODlhEAAQAJECAP///wAAAAAAAAAA) 8 8,move;} 14
  14. 14. Плавные движения 15
  15. 15. Транзишены.b-transition{     -moz-transition: linear 1s margin;    -webkit-transition: linear 1s margin;     -o-transition: linear 1s margin;     transition: linear 1s margin;} 16
  16. 16. Проблемы 17
  17. 17. Конфликт «одинаковых» свойств 18
  18. 18. 19
  19. 19. .example-round{ -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px;} 20
  20. 20. Safari, Chrome 21
  21. 21. Firefox 3.6, Opera 11/Next 22
  22. 22. Firefox 4/5b 23
  23. 23. Много кода 24
  24. 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
  25. 25. .example-gradient{ background: linear-gradient(90deg,…);} 26
  26. 26. Несовершенство стандартов 27
  27. 27. Дай дизайнеру в руки CSS3... 28
  28. 28. 29
  29. 29. 30
  30. 30. 31
  31. 31. 32
  32. 32. 33
  33. 33. 34
  34. 34. .example-shadow{ position: relative;} 35
  35. 35. .example-shadow{ position: relative;}.example-shadow:before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; content: “”;} 36
  36. 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
  37. 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}
  38. 38. 39
  39. 39. 40
  40. 40. 41
  41. 41. 42
  42. 42. 43
  43. 43. .example-border-image{ position: relative;} 44
  44. 44. .example-border-image{ position: relative;}.example-border-image:before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; content: “”;} 45
  45. 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
  46. 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}
  47. 47. – А где бабуля?– Я за неё
  48. 48. border-image " -o-border-image 49
  49. 49. border-image " -o-border-image 50
  50. 50. А компот? 51
  51. 51. 52
  52. 52. Photoshop Browser 53
  53. 53. 54
  54. 54. Browser Photoshop Photoshopsmoothness 100% smoothness 0% 55
  55. 55. И главное 56
  56. 56. Начните использовать CSS3 уже сейчас! 57
  57. 57. Не бойтесь 58
  58. 58. пробовать 59
  59. 59. разное 60
  60. 60. и вы всегда будете на шаг впереди 61
  61. 61. А теперь вопросы Олег Мохов mokhov@yandex-team.ru

×