1. CSS3 в руках дизайнера
Вадим Пацев
Легкий и быстрый
Я.Субботник, Киев, 28 мая 2011 года
3. А как же кнопки,
подложки и градиенты?
3
9. CSS3 для работы
с графикой:
— multiple Backgrounds;
— gradients;
— drop shadows;
— rounded Corners;
— RGBA.
8
11. Как в CSS:
— Несколько раз text-shadow
http://desandro.com
13. Как в CSS:
— text-shadow
— transition
— transform
http://shakenandstirredweb.com/playground/blur/
15. Как в CSS:
— text-shadow
— transform
— box-shadow
— transitions
— border-radius
http://shakenandstirredweb.com/playground/depth-of- eld-2/
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
30. еще
Ад авай их ч ерез
одкр асим
п
стр очку
21
32. А мо
жет
отст сдел
уп м аем
пись ежд
мам у
и
22
40. CSS3 для
прототипирования:
— pseudo classes;
— media Queries;
— transitions;
— animation.
26
44. Печеньки:
— можно кликать;
— текст как в браузере;
— в одном прототипе все варианты и экраны;
— в одном прототипе интерфейсы под разные
устройства;
— легко редактировать;
— анимация, переходы, эффекты;
— над прототипом можно работать совместно;
— можно использовать в производстве.
29
Editor's Notes #2: Привет. \nМеня зовут Вадим.\nКостя рассказал про дизайн. Кто такой дизайнер. Как мы это делаем.\nПо хоже его презентации был такой слайд ->\n\n#3: И у дизайнеров наверное возник вопрос. У меня по крайней мере возник. ->\n#4: Действительно. Ведь css это не графический редактор, там ведь причти ничего нет для оформления. \n#5: Как там делать вкусные и клевые штуки для интерфейса?\nНапример вот такие иконки.\nЗапомните эту картинку, я еще вернусь к ней.\n#6: Итак для начала небольшая задачка.\nВот две кнопки, одна нарисована в графическом редакторе, вторая сделана с помощью css3\nГде какая?\nВаши варианты.\nНа самом деле я не помню где какая, но кажется верхняя.\n#7: Вот примерно так мы бы нарисовали эту кнопку в редакторе.\nНаложили на слой вот такие эффекты.\n#8: А так бы мы ее сделали в css.\nВсе примерно то же самое.\n#9: Таперь знакомая вам картинка. \nЭто те самые эффекты слоя которые у нас есть в известном графическом редакторе.\nА вот свойства для работы с графикой в css3\nТе же самые бэкграунды, градиенты, тени, скругленные уголки, альфа каналы, прозрачность\nВсе эти эффекты можно с разными трудозатратами можно повторить в css, но как правило нужна всего пара\nНесколько небольших примеров.\n#10: Я буду говорить всякие слова. в презентации есть ссылки на примеры где можно посмотреть конкретный код\n\nРабота с текстом.\nПросто применение свойства text-shadow несколько раз.\n#11: Эффект blur с помощью transform со свойством scale простого текстового блока\n#12: Более сложный пример\nЗдесь сразу много всего. Это картинка еще и двигается. Перемеащя фокус с одного элемента на другой с помощью 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
