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

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

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

понедельник, 30 мая 2011 г.

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

понедельник, 30 мая 2011 г.

3

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

понедельник, 30 мая 2011 г.

понедельник, 30 мая 2011 г.

5

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

понедельник, 30 мая 2011 г.

6

понедельник, 30 мая 2011 г.

7

http://www.webstuffshare.com/2010/04/photoshop-effect-vs-css3-properties/

понедельник, 30 мая 2011 г.

8

понедельник, 30 мая 2011 г.

8

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

— gradients;

— drop shadows;

— rounded Corners;

— RGBA.

понедельник, 30 мая 2011 г.

http://desandro.com

понедельник, 30 мая 2011 г.

http://desandro.com

Как в CSS:

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

понедельник, 30 мая 2011 г.

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

понедельник, 30 мая 2011 г.

Как в CSS:

— text-shadow

— transition

— transform

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

понедельник, 30 мая 2011 г.

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

понедельник, 30 мая 2011 г.

Как в CSS:

— text-shadow

— transform

— box-shadow

— transitions

— border-radius

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

понедельник, 30 мая 2011 г.

12

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

понедельник, 30 мая 2011 г.

13

http://lab.jeffbatterton.com/iphone-css3/

понедельник, 30 мая 2011 г.

http://graphicpeel.com/cssiosicons

понедельник, 30 мая 2011 г.

понедельник, 30 мая 2011 г.

“Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics.”  

John Nack, Principal Product Manager at Adobe

понедельник, 30 мая 2011 г.

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

John Nack, Principal Product Manager at Adobe

понедельник, 30 мая 2011 г.

17

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

понедельник, 30 мая 2011 г.

18

понедельник, 30 мая 2011 г.

18

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

понедельник, 30 мая 2011 г.

19

понедельник, 30 мая 2011 г.

19

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

понедельник, 30 мая 2011 г.

20

понедельник, 30 мая 2011 г.

20

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

понедельник, 30 мая 2011 г.

21

понедельник, 30 мая 2011 г.

21

А давай еще

подкрасим их через

строчку

понедельник, 30 мая 2011 г.

22

понедельник, 30 мая 2011 г.

22

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

понедельник, 30 мая 2011 г.

23

понедельник, 30 мая 2011 г.

23

А как выдвигается

вот эта панелька?

понедельник, 30 мая 2011 г.

24

понедельник, 30 мая 2011 г.

24

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

понедельник, 30 мая 2011 г.

25

понедельник, 30 мая 2011 г.

25

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

понедельник, 30 мая 2011 г.

26

понедельник, 30 мая 2011 г.

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

— media Queries;

— transitions;

— animation.

26

понедельник, 30 мая 2011 г.

27

Зебра на CSS3

понедельник, 30 мая 2011 г.

28

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

понедельник, 30 мая 2011 г.

29

понедельник, 30 мая 2011 г.

Печеньки:— можно кликать;

— текст как в браузере;

— в одном прототипе все варианты и экраны;

— в одном прототипе интерфейсы под разные устройства;

— легко редактировать;

— анимация, переходы, эффекты;

— над прототипом можно работать совместно;

— можно использовать в производстве.

29

понедельник, 30 мая 2011 г.

30

Спасибо

понедельник, 30 мая 2011 г.

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

basvasilich@yandex-team.ru@basvasilich

понедельник, 30 мая 2011 г.