ݺߣ

ݺߣShare a Scribd company logo
CSS3 в руках дизайнера
Вадим Пацев
Легкий и быстрый



Я.Субботник, Киев, 28 мая 2011 года
HTML-прототип
снимает наибольшую
часть вопросов
А как же кнопки,
    подложки и градиенты?
3
Css3 в руках дизайнера
Какая из кнопок нарисована
           в редакторе?

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

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

— gradients;

— drop shadows;

— rounded Corners;

— RGBA.



   8
http://desandro.com
Как в 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
Css3 в руках дизайнера
“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
18
Все хорошо, но...




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




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




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




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




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




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




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




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

     — media Queries;

     — transitions;

     — animation.




26
Зебра на CSS3




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




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

basvasilich@yandex-team.ru
@basvasilich

More Related Content

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

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