Css3 в руках дизайнера

2 likes353 views

Документ обсуждает возможности использования CSS3 для создания графических объектов и прототипирования в веб-дизайне. Приведены примеры эффектов и свойств CSS3, таких как градиенты, тени и анимация, которые позволяют создавать сложные интерфейсы без растровой графики. Указаны преимущества работы с прототипами, включая возможность совместной работы и легкость редактирования.

Design Technology Education

CSS3 в руках дизайнера
Вадим Пацев
Легкий и быстрый

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

HTML-прототип
снимает наибольшую
часть вопросов

А как же кнопки,
подложки и градиенты?
3

Какая из кнопок нарисована
в редакторе?

5

http://www.webstuﬀshare.com/2010/04/photoshop-eﬀect-vs-css3-properties/

7

CSS3 для работы
с графикой:
— multiple Backgrounds;

— gradients;

— drop shadows;

— rounded Corners;

— RGBA.

8

Как в CSS:

— Несколько раз text-shadow

http://desandro.com

http://shakenandstirredweb.com/playground/blur/

Как в CSS:

— text-shadow

— transition

— transform

http://shakenandstirredweb.com/playground/blur/

http://shakenandstirredweb.com/playground/depth-of- eld-2/

Как в CSS:

— text-shadow

— transform

— box-shadow

— transitions

— border-radius

http://shakenandstirredweb.com/playground/depth-of- eld-2/

http://dl.dropbox.com/u/921159/Keyboard/page.html

12

h"p://lab.je,a"erton.com/iphone‐css3/

13

http://graphicpeel.com/cssiosicons

“Cascading Style Sheets can create a
great deal of artwork now, without
reliance on bitmap graphics.”
John Nack, Principal Product Manager at Adobe

Сейчас с использованием CSS можно создавать
в том числе и достаточно сложные
графические объекты, не используя
растровую графику.
John Nack, Principal Product Manager at Adobe

Но у меня уже есть
инструмент.
Зачем мне еще один?
17

А давай попробуем
перекрасить все
ссылки в черный

19

А как выглядит если
будет 100 писем?

20

еще
Ад авай их ч ерез
одкр асим
п
стр очку

21

А мо
жет
отст сдел
уп м аем
пись ежд
мам у
и

22

ыдви гается
А к ак в лька?
пане
вот эта

23

А теперь давай во
всех вариантах
поменяем иконки

25

CSS3 для
прототипирования:
— pseudo classes;

— media Queries;

— transitions;

— animation.

26

Печеньки:
— можно кликать;
— текст как в браузере;
— в одном прототипе все варианты и экраны;
— в одном прототипе интерфейсы под разные
устройства;
— легко редактировать;
— анимация, переходы, эффекты;
— над прототипом можно работать совместно;
— можно использовать в производстве.
29

Вадим Пацев
Легкий и быстрый

basvasilich@yandex-team.ru
@basvasilich

Css3 в руках дизайнера

1. CSS3 в руках дизайнера Вадим Пацев Легкий и быстрый Я.Субботник, Киев, 28 мая 2011 года

2. HTML-прототип снимает наибольшую часть вопросов

3. А как же кнопки, подложки и градиенты? 3

5. Какая из кнопок нарисована в редакторе? 5

6. 6

7. http://www.webstuﬀshare.com/2010/04/photoshop-eﬀect-vs-css3-properties/ 7

8. 8

9. CSS3 для работы с графикой: — multiple Backgrounds; — gradients; — drop shadows; — rounded Corners; — RGBA. 8

10. http://desandro.com

11. Как в CSS: — Несколько раз text-shadow http://desandro.com

12. http://shakenandstirredweb.com/playground/blur/

13. Как в CSS: — text-shadow — transition — transform http://shakenandstirredweb.com/playground/blur/

14. http://shakenandstirredweb.com/playground/depth-of- eld-2/

15. Как в CSS: — text-shadow — transform — box-shadow — transitions — border-radius http://shakenandstirredweb.com/playground/depth-of- eld-2/

16. http://dl.dropbox.com/u/921159/Keyboard/page.html 12

17. h"p://lab.je,a"erton.com/iphone‐css3/ 13

18. http://graphicpeel.com/cssiosicons

20. “Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics.” John Nack, Principal Product Manager at Adobe

21. Сейчас с использованием CSS можно создавать в том числе и достаточно сложные графические объекты, не используя растровую графику. John Nack, Principal Product Manager at Adobe

22. Но у меня уже есть инструмент. Зачем мне еще один? 17

23. 18

24. Все хорошо, но... 18

25. 19

26. А давай попробуем перекрасить все ссылки в черный 19

27. 20

28. А как выглядит если будет 100 писем? 20

29. 21

30. еще Ад авай их ч ерез одкр асим п стр очку 21

31. 22

32. А мо жет отст сдел уп м аем пись ежд мам у и 22

33. 23

34. ыдви гается А к ак в лька? пане вот эта 23

35. 24

36. А в телефоне как оно будет ? 24

37. 25

38. А теперь давай во всех вариантах поменяем иконки 25

39. 26

40. CSS3 для прототипирования: — pseudo classes; — media Queries; — transitions; — animation. 26

41. Зебра на CSS3 27

42. Какой следующий шаг? 28

43. 29

44. Печеньки: — можно кликать; — текст как в браузере; — в одном прототипе все варианты и экраны; — в одном прототипе интерфейсы под разные устройства; — легко редактировать; — анимация, переходы, эффекты; — над прототипом можно работать совместно; — можно использовать в производстве. 29

45. Спасибо 30

46. Вадим Пацев Легкий и быстрый basvasilich@yandex-team.ru @basvasilich

Editor's Notes

#2: &#x41F;&#x440;&#x438;&#x432;&#x435;&#x442;. \n&#x41C;&#x435;&#x43D;&#x44F; &#x437;&#x43E;&#x432;&#x443;&#x442; &#x412;&#x430;&#x434;&#x438;&#x43C;.\n&#x41A;&#x43E;&#x441;&#x442;&#x44F; &#x440;&#x430;&#x441;&#x441;&#x43A;&#x430;&#x437;&#x430;&#x43B; &#x43F;&#x440;&#x43E; &#x434;&#x438;&#x437;&#x430;&#x439;&#x43D;. &#x41A;&#x442;&#x43E; &#x442;&#x430;&#x43A;&#x43E;&#x439; &#x434;&#x438;&#x437;&#x430;&#x439;&#x43D;&#x435;&#x440;. &#x41A;&#x430;&#x43A; &#x43C;&#x44B; &#x44D;&#x442;&#x43E; &#x434;&#x435;&#x43B;&#x430;&#x435;&#x43C;.\n&#x41F;&#x43E; &#x445;&#x43E;&#x436;&#x435; &#x435;&#x433;&#x43E; &#x43F;&#x440;&#x435;&#x437;&#x435;&#x43D;&#x442;&#x430;&#x446;&#x438;&#x438; &#x431;&#x44B;&#x43B; &#x442;&#x430;&#x43A;&#x43E;&#x439; &#x441;&#x43B;&#x430;&#x439;&#x434; ->\n\n
#3: &#x418; &#x443; &#x434;&#x438;&#x437;&#x430;&#x439;&#x43D;&#x435;&#x440;&#x43E;&#x432; &#x43D;&#x430;&#x432;&#x435;&#x440;&#x43D;&#x43E;&#x435; &#x432;&#x43E;&#x437;&#x43D;&#x438;&#x43A; &#x432;&#x43E;&#x43F;&#x440;&#x43E;&#x441;. &#x423; &#x43C;&#x435;&#x43D;&#x44F; &#x43F;&#x43E; &#x43A;&#x440;&#x430;&#x439;&#x43D;&#x435;&#x439; &#x43C;&#x435;&#x440;&#x435; &#x432;&#x43E;&#x437;&#x43D;&#x438;&#x43A;. ->\n
#4: &#x414;&#x435;&#x439;&#x441;&#x442;&#x432;&#x438;&#x442;&#x435;&#x43B;&#x44C;&#x43D;&#x43E;. &#x412;&#x435;&#x434;&#x44C; css &#x44D;&#x442;&#x43E; &#x43D;&#x435; &#x433;&#x440;&#x430;&#x444;&#x438;&#x447;&#x435;&#x441;&#x43A;&#x438;&#x439; &#x440;&#x435;&#x434;&#x430;&#x43A;&#x442;&#x43E;&#x440;, &#x442;&#x430;&#x43C; &#x432;&#x435;&#x434;&#x44C; &#x43F;&#x440;&#x438;&#x447;&#x442;&#x438; &#x43D;&#x438;&#x447;&#x435;&#x433;&#x43E; &#x43D;&#x435;&#x442; &#x434;&#x43B;&#x44F; &#x43E;&#x444;&#x43E;&#x440;&#x43C;&#x43B;&#x435;&#x43D;&#x438;&#x44F;. \n
#5: &#x41A;&#x430;&#x43A; &#x442;&#x430;&#x43C; &#x434;&#x435;&#x43B;&#x430;&#x442;&#x44C; &#x432;&#x43A;&#x443;&#x441;&#x43D;&#x44B;&#x435; &#x438; &#x43A;&#x43B;&#x435;&#x432;&#x44B;&#x435; &#x448;&#x442;&#x443;&#x43A;&#x438; &#x434;&#x43B;&#x44F; &#x438;&#x43D;&#x442;&#x435;&#x440;&#x444;&#x435;&#x439;&#x441;&#x430;?\n&#x41D;&#x430;&#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440; &#x432;&#x43E;&#x442; &#x442;&#x430;&#x43A;&#x438;&#x435; &#x438;&#x43A;&#x43E;&#x43D;&#x43A;&#x438;.\n&#x417;&#x430;&#x43F;&#x43E;&#x43C;&#x43D;&#x438;&#x442;&#x435; &#x44D;&#x442;&#x443; &#x43A;&#x430;&#x440;&#x442;&#x438;&#x43D;&#x43A;&#x443;, &#x44F; &#x435;&#x449;&#x435; &#x432;&#x435;&#x440;&#x43D;&#x443;&#x441;&#x44C; &#x43A; &#x43D;&#x435;&#x439;.\n
#6: &#x418;&#x442;&#x430;&#x43A; &#x434;&#x43B;&#x44F; &#x43D;&#x430;&#x447;&#x430;&#x43B;&#x430; &#x43D;&#x435;&#x431;&#x43E;&#x43B;&#x44C;&#x448;&#x430;&#x44F; &#x437;&#x430;&#x434;&#x430;&#x447;&#x43A;&#x430;.\n&#x412;&#x43E;&#x442; &#x434;&#x432;&#x435; &#x43A;&#x43D;&#x43E;&#x43F;&#x43A;&#x438;, &#x43E;&#x434;&#x43D;&#x430; &#x43D;&#x430;&#x440;&#x438;&#x441;&#x43E;&#x432;&#x430;&#x43D;&#x430; &#x432; &#x433;&#x440;&#x430;&#x444;&#x438;&#x447;&#x435;&#x441;&#x43A;&#x43E;&#x43C; &#x440;&#x435;&#x434;&#x430;&#x43A;&#x442;&#x43E;&#x440;&#x435;, &#x432;&#x442;&#x43E;&#x440;&#x430;&#x44F; &#x441;&#x434;&#x435;&#x43B;&#x430;&#x43D;&#x430; &#x441; &#x43F;&#x43E;&#x43C;&#x43E;&#x449;&#x44C;&#x44E; css3\n&#x413;&#x434;&#x435; &#x43A;&#x430;&#x43A;&#x430;&#x44F;?\n&#x412;&#x430;&#x448;&#x438; &#x432;&#x430;&#x440;&#x438;&#x430;&#x43D;&#x442;&#x44B;.\n&#x41D;&#x430; &#x441;&#x430;&#x43C;&#x43E;&#x43C; &#x434;&#x435;&#x43B;&#x435; &#x44F; &#x43D;&#x435; &#x43F;&#x43E;&#x43C;&#x43D;&#x44E; &#x433;&#x434;&#x435; &#x43A;&#x430;&#x43A;&#x430;&#x44F;, &#x43D;&#x43E; &#x43A;&#x430;&#x436;&#x435;&#x442;&#x441;&#x44F; &#x432;&#x435;&#x440;&#x445;&#x43D;&#x44F;&#x44F;.\n
#7: &#x412;&#x43E;&#x442; &#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;&#x43D;&#x43E; &#x442;&#x430;&#x43A; &#x43C;&#x44B; &#x431;&#x44B; &#x43D;&#x430;&#x440;&#x438;&#x441;&#x43E;&#x432;&#x430;&#x43B;&#x438; &#x44D;&#x442;&#x443; &#x43A;&#x43D;&#x43E;&#x43F;&#x43A;&#x443; &#x432; &#x440;&#x435;&#x434;&#x430;&#x43A;&#x442;&#x43E;&#x440;&#x435;.\n&#x41D;&#x430;&#x43B;&#x43E;&#x436;&#x438;&#x43B;&#x438; &#x43D;&#x430; &#x441;&#x43B;&#x43E;&#x439; &#x432;&#x43E;&#x442; &#x442;&#x430;&#x43A;&#x438;&#x435; &#x44D;&#x444;&#x444;&#x435;&#x43A;&#x442;&#x44B;.\n
#8: &#x410; &#x442;&#x430;&#x43A; &#x431;&#x44B; &#x43C;&#x44B; &#x435;&#x435; &#x441;&#x434;&#x435;&#x43B;&#x430;&#x43B;&#x438; &#x432; css.\n&#x412;&#x441;&#x435; &#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;&#x43D;&#x43E; &#x442;&#x43E; &#x436;&#x435; &#x441;&#x430;&#x43C;&#x43E;&#x435;.\n
#9: &#x422;&#x430;&#x43F;&#x435;&#x440;&#x44C; &#x437;&#x43D;&#x430;&#x43A;&#x43E;&#x43C;&#x430;&#x44F; &#x432;&#x430;&#x43C; &#x43A;&#x430;&#x440;&#x442;&#x438;&#x43D;&#x43A;&#x430;. \n&#x42D;&#x442;&#x43E; &#x442;&#x435; &#x441;&#x430;&#x43C;&#x44B;&#x435; &#x44D;&#x444;&#x444;&#x435;&#x43A;&#x442;&#x44B; &#x441;&#x43B;&#x43E;&#x44F; &#x43A;&#x43E;&#x442;&#x43E;&#x440;&#x44B;&#x435; &#x443; &#x43D;&#x430;&#x441; &#x435;&#x441;&#x442;&#x44C; &#x432; &#x438;&#x437;&#x432;&#x435;&#x441;&#x442;&#x43D;&#x43E;&#x43C; &#x433;&#x440;&#x430;&#x444;&#x438;&#x447;&#x435;&#x441;&#x43A;&#x43E;&#x43C; &#x440;&#x435;&#x434;&#x430;&#x43A;&#x442;&#x43E;&#x440;&#x435;.\n&#x410; &#x432;&#x43E;&#x442; &#x441;&#x432;&#x43E;&#x439;&#x441;&#x442;&#x432;&#x430; &#x434;&#x43B;&#x44F; &#x440;&#x430;&#x431;&#x43E;&#x442;&#x44B; &#x441; &#x433;&#x440;&#x430;&#x444;&#x438;&#x43A;&#x43E;&#x439; &#x432; css3\n&#x422;&#x435; &#x436;&#x435; &#x441;&#x430;&#x43C;&#x44B;&#x435; &#x431;&#x44D;&#x43A;&#x433;&#x440;&#x430;&#x443;&#x43D;&#x434;&#x44B;, &#x433;&#x440;&#x430;&#x434;&#x438;&#x435;&#x43D;&#x442;&#x44B;, &#x442;&#x435;&#x43D;&#x438;, &#x441;&#x43A;&#x440;&#x443;&#x433;&#x43B;&#x435;&#x43D;&#x43D;&#x44B;&#x435; &#x443;&#x433;&#x43E;&#x43B;&#x43A;&#x438;, &#x430;&#x43B;&#x44C;&#x444;&#x430; &#x43A;&#x430;&#x43D;&#x430;&#x43B;&#x44B;, &#x43F;&#x440;&#x43E;&#x437;&#x440;&#x430;&#x447;&#x43D;&#x43E;&#x441;&#x442;&#x44C;\n&#x412;&#x441;&#x435; &#x44D;&#x442;&#x438; &#x44D;&#x444;&#x444;&#x435;&#x43A;&#x442;&#x44B; &#x43C;&#x43E;&#x436;&#x43D;&#x43E; &#x441; &#x440;&#x430;&#x437;&#x43D;&#x44B;&#x43C;&#x438; &#x442;&#x440;&#x443;&#x434;&#x43E;&#x437;&#x430;&#x442;&#x440;&#x430;&#x442;&#x430;&#x43C;&#x438; &#x43C;&#x43E;&#x436;&#x43D;&#x43E; &#x43F;&#x43E;&#x432;&#x442;&#x43E;&#x440;&#x438;&#x442;&#x44C; &#x432; css, &#x43D;&#x43E; &#x43A;&#x430;&#x43A; &#x43F;&#x440;&#x430;&#x432;&#x438;&#x43B;&#x43E; &#x43D;&#x443;&#x436;&#x43D;&#x430; &#x432;&#x441;&#x435;&#x433;&#x43E; &#x43F;&#x430;&#x440;&#x430;\n&#x41D;&#x435;&#x441;&#x43A;&#x43E;&#x43B;&#x44C;&#x43A;&#x43E; &#x43D;&#x435;&#x431;&#x43E;&#x43B;&#x44C;&#x448;&#x438;&#x445; &#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;&#x43E;&#x432;.\n
#10: &#x42F; &#x431;&#x443;&#x434;&#x443; &#x433;&#x43E;&#x432;&#x43E;&#x440;&#x438;&#x442;&#x44C; &#x432;&#x441;&#x44F;&#x43A;&#x438;&#x435; &#x441;&#x43B;&#x43E;&#x432;&#x430;. &#x432; &#x43F;&#x440;&#x435;&#x437;&#x435;&#x43D;&#x442;&#x430;&#x446;&#x438;&#x438; &#x435;&#x441;&#x442;&#x44C; &#x441;&#x441;&#x44B;&#x43B;&#x43A;&#x438; &#x43D;&#x430; &#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;&#x44B; &#x433;&#x434;&#x435; &#x43C;&#x43E;&#x436;&#x43D;&#x43E; &#x43F;&#x43E;&#x441;&#x43C;&#x43E;&#x442;&#x440;&#x435;&#x442;&#x44C; &#x43A;&#x43E;&#x43D;&#x43A;&#x440;&#x435;&#x442;&#x43D;&#x44B;&#x439; &#x43A;&#x43E;&#x434;\n\n&#x420;&#x430;&#x431;&#x43E;&#x442;&#x430; &#x441; &#x442;&#x435;&#x43A;&#x441;&#x442;&#x43E;&#x43C;.\n&#x41F;&#x440;&#x43E;&#x441;&#x442;&#x43E; &#x43F;&#x440;&#x438;&#x43C;&#x435;&#x43D;&#x435;&#x43D;&#x438;&#x435; &#x441;&#x432;&#x43E;&#x439;&#x441;&#x442;&#x432;&#x430; text-shadow &#x43D;&#x435;&#x441;&#x43A;&#x43E;&#x43B;&#x44C;&#x43A;&#x43E; &#x440;&#x430;&#x437;.\n
#11: &#x42D;&#x444;&#x444;&#x435;&#x43A;&#x442; blur &#x441; &#x43F;&#x43E;&#x43C;&#x43E;&#x449;&#x44C;&#x44E; transform &#x441;&#x43E; &#x441;&#x432;&#x43E;&#x439;&#x441;&#x442;&#x432;&#x43E;&#x43C; scale &#x43F;&#x440;&#x43E;&#x441;&#x442;&#x43E;&#x433;&#x43E; &#x442;&#x435;&#x43A;&#x441;&#x442;&#x43E;&#x432;&#x43E;&#x433;&#x43E; &#x431;&#x43B;&#x43E;&#x43A;&#x430;\n
#12: &#x411;&#x43E;&#x43B;&#x435;&#x435; &#x441;&#x43B;&#x43E;&#x436;&#x43D;&#x44B;&#x439; &#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;\n&#x417;&#x434;&#x435;&#x441;&#x44C; &#x441;&#x440;&#x430;&#x437;&#x443; &#x43C;&#x43D;&#x43E;&#x433;&#x43E; &#x432;&#x441;&#x435;&#x433;&#x43E;. &#x42D;&#x442;&#x43E; &#x43A;&#x430;&#x440;&#x442;&#x438;&#x43D;&#x43A;&#x430; &#x435;&#x449;&#x435; &#x438; &#x434;&#x432;&#x438;&#x433;&#x430;&#x435;&#x442;&#x441;&#x44F;. &#x41F;&#x435;&#x440;&#x435;&#x43C;&#x435;&#x430;&#x449;&#x44F; &#x444;&#x43E;&#x43A;&#x443;&#x441; &#x441; &#x43E;&#x434;&#x43D;&#x43E;&#x433;&#x43E; &#x44D;&#x43B;&#x435;&#x43C;&#x435;&#x43D;&#x442;&#x430; &#x43D;&#x430; &#x434;&#x440;&#x443;&#x433;&#x43E;&#x439; &#x441; &#x43F;&#x43E;&#x43C;&#x43E;&#x449;&#x44C;&#x44E; transitions\n
#13: \n
#14: \n
#15: \n
#16: \n
#17: \n
#18: \n
#19: \n
#20: \n
#21: \n
#22: \n
#23: \n
#24: \n
#25: \n
#26: \n
#27: \n
#28: \n
#29: \n
#30: \n
#31: \n
#32: \n

Css3 в руках дизайнера

More Related Content

Featured (20)

Css3 в руках дизайнера

Editor's Notes