HTML-nazzi , CSS-maniac, JS-freak

По умолчанию Internet Explorer отображает внутри <textarea> скроллбар:

Чтобы избавиться от скролла, нужно задать в стилях следующее правило:

textarea {      overflow: auto; }

В Internet Explorer, начиная с 10 версии, у текстовых полей типа <input> при фокусе отображается кнопка очистки поля в виде крестика:

Избавиться от этого крестика можно через CSS, обратившись к псевдо-элементу ms-clear:

input::-ms-clear {    display: none; }

Сегодня почти в каждом дизайне можно встретить нестандартные шрифты. Такие шрифты обычно интегрируются в верстку при помощи CSS-правила @font-face. Как мы знаем, для каждого начертания шрифта (полужирное, курсивное и т. д.) в верстке  используется отдельный файл. Причем для обеспечения кроссбраузерной поддержки @font-face даже несколько файлов для каждого начертания.

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

Однако в дизайне обычно используются далеко не все начертания, и обычно нет необходимости подключать их все. Чтобы облегчить вес страницы, мы можем избавиться от лишних начертаний. Для этого нужно выяснить, какие именно начертания используются в макете:

Откройте psd-файл в  Photoshop

В меню выберите File - Save As.. (Файл - Сохарнить как…)

Cохраните макет в формате pdf (Photoshop PDF). 

Согласитесь на все предупреждения и подтвердите диалоговые окна, настройки экспорта в данном случае нам не важны.

Откройте сохраненный pdf-файл при помощи программы Adobe Reader (если у вас ее нет, вы можете бесплатно скачать ее с сайта Adobe)

В меню Adobe Reader выберите File - Properties (Файл - Свойства)

Открыв вкладку Fonts (Шрифты) вы увидете список всех использованных в макете шрифтов.

От себя хочу добавить, что злоупотреблять количеством шрифтов  не стоит. Если в макете используется больше двух уникальных семейств шрифтов, настоятельно рекомендую вам рассмотреть возможность избавиться от них в верстке, сделав в выбор в пользу повышения производительности сайта. 

Смарт-объект - это слой, который содержит в себе изображение (векторное или растровое), доступное для обратимого редактирования. Чаще всего в смарт-объекты преобразуются векторные элементы, чтобы их было легко масштабировать.

Иногда возникает необходимость подправить векторный контур  в готовом дизайне. И если этот элемент сконвертирован в smart-object, то просто подправить контур в Photoshop не получится.

Чтобы отредактировать smart-object, как векторный объект, необходимо воспользоваться редактором векторной графики:

Выделите слой со смарт-объектом.

Кликните по слою правой кнопкой мыши.

Выберите в контекстном меню пункт “Экспортировать содержимое” (“Export”).

Сохраните файл в расширении .eps.

Откройте файл в векторном редакторе и внесите необходимые изменения.

Если у вас установлен Adobe Illustrator, есть способ попроще:

Откройте Adobe Illustrator.

В Adobe Photoshop щелкните по слою со смарт-объектом правой кнопкой мыши.

В контекстном меню выберите пункт “Редактировать содержимое”(“Edit”).

Объект автоматически экспортируется в Adobe Illusrtator.

В сети можно найти огромное количество шаблонов модульных сеток, но также вы можете создавать их и сами. Это нужно не только дзайнерам, но и  верстальщикам на этапе тестирования соответствия верстки модульной сетке дизайна. Так как не всегда удобно накладывать сам макет на дизайн, особенно когда таких макетов много или вы занимаетесь оптимизацией верстки.

Для таких целей я пользуюсь сервисом Modular Grid Pattern 

Как видно из скриншота, в сервисе можно настроить ширину модуля, промежуток между ними, количество колонок. А также высоту базовой линии и количество блоков в вертикальной раскладке. Результат вы можете сохранить как png-файл или текстуру в фотошопе.