Вадим Пацев "CSS3 в руках дизайнера"
-
Upload
yandex -
Category
Technology
-
view
964 -
download
3
description
Transcript of Вадим Пацев "CSS3 в руках дизайнера"
![Page 1: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/1.jpg)
Я.Субботник, Киев, 28 мая 2011 года
Легкий и быстрыйВадим Пацев
CSS3 в руках дизайнера
понедельник, 30 мая 2011 г.
![Page 2: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/2.jpg)
HTML-прототип снимает наибольшую часть вопросов
понедельник, 30 мая 2011 г.
![Page 3: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/3.jpg)
3
А как же кнопки,подложки и градиенты?
понедельник, 30 мая 2011 г.
![Page 4: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/4.jpg)
понедельник, 30 мая 2011 г.
![Page 5: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/5.jpg)
5
Какая из кнопок нарисована в редакторе?
понедельник, 30 мая 2011 г.
![Page 6: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/6.jpg)
6
понедельник, 30 мая 2011 г.
![Page 7: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/7.jpg)
7
http://www.webstuffshare.com/2010/04/photoshop-effect-vs-css3-properties/
понедельник, 30 мая 2011 г.
![Page 8: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/8.jpg)
8
понедельник, 30 мая 2011 г.
![Page 9: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/9.jpg)
8
CSS3 для работы с графикой:— multiple Backgrounds;
— gradients;
— drop shadows;
— rounded Corners;
— RGBA.
понедельник, 30 мая 2011 г.
![Page 11: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/11.jpg)
http://desandro.com
Как в CSS:
— Несколько раз text-shadow
понедельник, 30 мая 2011 г.
![Page 12: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/12.jpg)
http://shakenandstirredweb.com/playground/blur/
понедельник, 30 мая 2011 г.
![Page 13: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/13.jpg)
Как в CSS:
— text-shadow
— transition
— transform
http://shakenandstirredweb.com/playground/blur/
понедельник, 30 мая 2011 г.
![Page 14: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/14.jpg)
http://shakenandstirredweb.com/playground/depth-of-=eld-2/
понедельник, 30 мая 2011 г.
![Page 15: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/15.jpg)
Как в CSS:
— text-shadow
— transform
— box-shadow
— transitions
— border-radius
http://shakenandstirredweb.com/playground/depth-of-=eld-2/
понедельник, 30 мая 2011 г.
![Page 16: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/16.jpg)
12
http://dl.dropbox.com/u/921159/Keyboard/page.html
понедельник, 30 мая 2011 г.
![Page 17: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/17.jpg)
13
http://lab.jeffbatterton.com/iphone-css3/
понедельник, 30 мая 2011 г.
![Page 18: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/18.jpg)
http://graphicpeel.com/cssiosicons
понедельник, 30 мая 2011 г.
![Page 19: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/19.jpg)
понедельник, 30 мая 2011 г.
![Page 20: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/20.jpg)
“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 г.
![Page 21: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/21.jpg)
Сейчас с использованием CSS можно создавать в том числе и достаточно сложные графические объекты, не используя растровую графику.
John Nack, Principal Product Manager at Adobe
понедельник, 30 мая 2011 г.
![Page 22: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/22.jpg)
17
Но у меня уже есть инструмент.Зачем мне еще один?
понедельник, 30 мая 2011 г.
![Page 23: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/23.jpg)
18
понедельник, 30 мая 2011 г.
![Page 24: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/24.jpg)
18
Все хорошо, но...
понедельник, 30 мая 2011 г.
![Page 25: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/25.jpg)
19
понедельник, 30 мая 2011 г.
![Page 26: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/26.jpg)
19
А давай попробуем перекрасить все ссылки в черный
понедельник, 30 мая 2011 г.
![Page 27: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/27.jpg)
20
понедельник, 30 мая 2011 г.
![Page 28: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/28.jpg)
20
А как выглядит если будет 100 писем?
понедельник, 30 мая 2011 г.
![Page 29: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/29.jpg)
21
понедельник, 30 мая 2011 г.
![Page 30: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/30.jpg)
21
А давай еще
подкрасим их через
строчку
понедельник, 30 мая 2011 г.
![Page 31: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/31.jpg)
22
понедельник, 30 мая 2011 г.
![Page 32: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/32.jpg)
22
А может сделаем отступ между письмами
понедельник, 30 мая 2011 г.
![Page 33: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/33.jpg)
23
понедельник, 30 мая 2011 г.
![Page 34: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/34.jpg)
23
А как выдвигается
вот эта панелька?
понедельник, 30 мая 2011 г.
![Page 35: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/35.jpg)
24
понедельник, 30 мая 2011 г.
![Page 36: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/36.jpg)
24
А в телефоне как оно будет ?
понедельник, 30 мая 2011 г.
![Page 37: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/37.jpg)
25
понедельник, 30 мая 2011 г.
![Page 38: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/38.jpg)
25
А теперь давай во всех вариантах поменяем иконки
понедельник, 30 мая 2011 г.
![Page 39: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/39.jpg)
26
понедельник, 30 мая 2011 г.
![Page 40: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/40.jpg)
CSS3 для прототипирования:— pseudo classes;
— media Queries;
— transitions;
— animation.
26
понедельник, 30 мая 2011 г.
![Page 41: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/41.jpg)
27
Зебра на CSS3
понедельник, 30 мая 2011 г.
![Page 42: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/42.jpg)
28
Какой следующий шаг?
понедельник, 30 мая 2011 г.
![Page 43: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/43.jpg)
29
понедельник, 30 мая 2011 г.
![Page 44: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/44.jpg)
Печеньки:— можно кликать;
— текст как в браузере;
— в одном прототипе все варианты и экраны;
— в одном прототипе интерфейсы под разные устройства;
— легко редактировать;
— анимация, переходы, эффекты;
— над прототипом можно работать совместно;
— можно использовать в производстве.
29
понедельник, 30 мая 2011 г.
![Page 45: Вадим Пацев "CSS3 в руках дизайнера"](https://reader034.fdocument.pub/reader034/viewer/2022042614/558fcab11a28ab08398b45dd/html5/thumbnails/45.jpg)
30
Спасибо
понедельник, 30 мая 2011 г.