Перевод небольшой статьи с замечательного сайта для веб-дизайнеров CSS-Tricks.

Статья посвящена одному интересному моменту - как правильно точно отцентрировать один объект с фиксированными размерами внутри другого. В принципе ничего сложного (и большого секрета) в этом нет, но статья мне понравилась, поэтому решил перевести и разместить у себя. Особенно хороши картинки - глядя на них, можно и текст не писать - все наглядно понятно. Далее - вольный перевод статьи Криса Койера:

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

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
 }

Примечание переводчика:

Свойство fixed здесь задается по двум причинам. Первая - необходимо, чтобы изображение имело фиксированное положение на странице и не изменяло его при прокрутке в окне браузера. Второе - изображение должно располагаться точно по центру окна. Одновременно соответствовать обоим критериям может только одно свойство - fixed. Оно очень похоже на более известное absolute, но с одним отличием - объект с этим свойством не меняет своего положения при прокрутке страницы.

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

Изображение, размещенное не по центру блока

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

Оба смещения нужно сделать с помощью свойства margin-left и margin-top с отрицательными значениями. Код в итоге будет следующим:

.centered {
position: fixed;
top: 50%;
left: 50%;
margin: -50px 0 0 -100px;
}

В результате изображение разместиться точно по центру экрана:

Изображение, размещенное точно по центру блока

На этом все.


При верстке макета сайта, кстати, совсем несложного, возник вопрос.

Заключается он в том, имеется информационная часть, разбитая на две колонки. Каждая из колонок также разделена на отдельные секции - посты. Для колонок и постов на макете задуманы дизайнером декоративные линии-разделители.

Проблемы с созданием таких линий, в принципе, нет никакой. Их можно легко создать с помощью стилевого правила border-bottom и border-right. Или же с помощью правил border-right и элемента hr.

Но вопрос заключается в том, что декоративные линии на макете короче, чем высота колонки или ширина поста. То есть, получается, что border должен быть короче, чем бокс:

Декоративные линии короче, чем контент

Как же поступить в данном случае? Скажем так, обычными способами CSS решить такой вопрос невозможно. Но решение было найдено с помощью форума htmlbook.

В данном случае можно выйти из положения с помощью псевдокласса :after. Для наглядности представим такой пример.

Создаем слой с контентом:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

И пропишем для него стилевые правила:

div {
 width: 300px;
 position: relative;
}

Как видим, их не так уж и много. Задаем ширину блока и устанавливаем для него относительное позиционирование. Затем для созданного нами бокса создаем псевдокласс :after и прописываем для него свойства:

div:after {
 content: "";
 position: absolute;
 top: 30px;
 right: -10px;
 bottom: 30px;
 border-left: 1px solid #000;
}

Немного распишем, что да как в этом коде.

Внутри простого блока после его содержимого создается псевдоблок с абсолютным позиционированием, для которого устанавливаются координаты top и bottom (благодаря двум последним он растягивается, так как создаются верхняя и нижняя координата для границы) и для этого блока создается только левая граница border-left со свойствами: 1px сплошного черного цвета.

На этом все.


Столкнулся с интересным примером или задачей - не знаю, как сказать.

Состоит в том, чтобы сделать для картинки тень, причем внутреннюю тень. Казалось бы, задачу просто решить - с помощью box-shadow или text-shadow.

Но не все так просто. В Интернете есть хорошие статьи на эту тему, в частности, на Хабре имеет очень детальный обзор данного способа.

Но пример так мне понравился, что решил его описать у себя - повторение мать учения, как говорится.

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

Первый способ - это “обернуть” ее в дополнительный блок, которому прописать внутреннюю тень. Главное тут - не забыть “опустить” изображение внутри блока, чтобы тень “легла” на нее.

Код такого способа представлен ниже:

 class="block1">
  src="images/charlize_theron_1.jpg" width="480" height="300">
.block1{
 box-shadow: inset 0 0 6px 4px rgba(0,0,0,.7);
 width: 480px;
 height: 300px;
}
 .block1 img{
  position: relative;
  z-index: -2;
 }

И результат работы этого кода:

Картинка, обернутая в блок

Все хорошо - просто и работает. Единственный минус - нарушение семантики HTML-кода. Ведь, чтобы добавить для картинки всего лишь тень, потребовалось создать лишний HTML-элемент, тем самым засоряя документ.

Второй способ - более правильный с точки зрения семантики. Чтобы “набросить” тень на изображение, нужно поместить его в блок в качестве фонового изображения.

В остальном все остается точно таким же, как и в первом примере. Также создается внутренняя тень для блока, но при этом нет необходимости “опускать” картинку с помощью z-index.

Код второго способа показан ниже:

 class="block2">
.block2{
 box-shadow: inset 0 0 12px 8px rgba(0,0,0,.6);
 width: 481px;
 height: 361px;
 background: url(images/charlize_theron_2.jpg) 0 0 no-repeat;
}

Картинка - результат работы этого кода:

Картинка, вложенная в блок в качестве фонового изображения

Код более краткий. Единственный минус - изображение должно быть только в качестве фона для блока.

На этом все.


В этом обзоре мною собраны описания “горячих” клавиш в Photoshop.

Если быть более точным - здесь описаны “горячие” клавиши, которые необходимы для повседневной работы верстальщика в этой программе. О преимуществах использования hotkeys мне кажется, не стоит даже упоминать.

Они значительно ускоряют и упрощают работу в Photoshop. Конечно, перед этим необходимо их заучить - это единственная трудность. Но как только сочетания клавиш будут запомнены, результаты на практике будут сразу видны. Это можно ощутить на собственном опыте.

Описания приемов работы с “горячими” клавишами собраны мною постепенно, по частям. Те “секреты”, которые я узнавал в своей работе с программой Photoshop, я постепенно объединял в данном небольшом руководстве, которое можно скорее назвать памяткой верстальщика в Photoshop.

Горячие клавиши панели инструментов Photoshop

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

Если нужно вырезать часть изображения - пользуемся инструментом “Рамка”, выделить нужный слой или группу слоев - инструмент “Перемещение”, определить цвет определенного слоя - инструмент “Пипетка”.

Этот список я продолжать не буду. Описание всех инструментов Photoshop в Интернете хоть отбавляй и созданы они куда более красочно и подробно.

Я остановлюсь на другом моменте. Для каждого инструмента на этой панели имеется “привязанная” к нему “горячая клавиша”. С помощью этих hotkeys выбирать или переключаться между инструментами панели можно очень быстро.

Не говоря уже об удобстве. Ниже приведу список таких “горячих клавиш” панели инструментов, применительно к работе верстальщика:

  • “Перемещение” - V
  • “Прямоугольная область” - M
  • “Рамка” - C
  • “Пипетка” - I
  • “Горизонтальный текст” - T
  • “Рука” - H
  • “Масштаб” - Z

Стоит только упомянуть, что выбор инструментов на панели с помощью “горячих клавиш” возможно производить при английской раскладке клавиатуры. Другими словами, “горячие клавиши” должны быть латинскими.

Запомнить эти немногочисленные сочетания очень просто. Они являются сокращениями от английского названия соответствующих инструментов:

  • V - MoVe
  • M - Marquee
  • C - Crop
  • I - Invert
  • T - Transform
  • H - Hand
  • Z - Zoom

Особенность работы с инструментом “Текст”

При верстке шаблона сайта из PSD-макета одним из моментов является работа со шрифтами. То есть, когда дело доходит до передачи и оформления шрифтов через правила CSS.

Для точного соответствия шаблона сайта PSD-макету необходимо однозначно знать все свойства шрифтов, использованных дизайнером при создании макета. Это семейство шрифтов, насыщенность шрифта, его размер и цвет.

Естественно, для этого нужно воспользоваться инструментом “Текст”. Но имеется один момент. Например, стоит задача определить свойства шрифтов, расположенных в разных блоках макета, подряд.

То есть, сперва один шрифт, затем другой, потом третий и так далее. При выборе одного шрифта и определения его свойств инструмент “Текст” как бы “зависает” (говорю своими словами, как понимаю и как вижу). Если вы выделили этот шрифт, то затем не сможете определить другой. Для этого необходимо “сбросить” запомненное инструментом “Текст” состояние.

Выполняется это просто. Для этого нажимаем клавишу Esc. Инструмент “Текст” выходит из “запомненного” состояния, но остается активированным. Теперь можно выделять следующий шрифт и определять его параметры. Используя клавишу Esc, можно легко и быстро узнать свойства всех шрифтов макета за один шаг.

Горячие клавиши при работе со слоями

Несколько моментов, связанных с работой со слоями. А именно, при объединении и выделении слоев.

Имеется объект макета, состоящий из нескольких слоев. Давайте покажем, из каких именно он состоит:

[Несколько слоев изображения в Photoshop][1]
Несколько слоев изображения в Photoshop

Первоначально необходимо удостовериться, что именно эти слои отвечают за прорисовку данного изображения. Для этого в Photoshop имеется очень удобное сочетание горячей клавиши Alt и левой кнопки мыши (ЛКМ). Нажимаем и держим зажатой клавишу Alt.

А затем щелкаем ЛКМ на значке “глаза” напротив слоя “Layer 5”. При этом все остальные слои макета отключаются и мы видим только то изображение (точнее - слои), которое “рисует” данный слой:

[Отключенные слои Photoshop][2]
Отключенные слои Photoshop

Это чрезвычайно удобный способ отключения ненужных слоев. Чтобы вернуть назад в “как было”, поступаем точно также. Опять нажимаем и держим зажатой клавишу Alt и кликаем по “глазику” напротив слоя “Layer 5”. Все остальные слои автоматически возвращаются в исходное состояние, при этом слой “Layer 5” также остается активным.

Вернемся к предыдущему шагу, когда “лишние” слои у нас были отключены. У нас имеются только два слоя, оставшихся после действий Alt + ЛКМ. Нам нужно объединить (свести) все оставшиеся слои в один, чтобы потом можно было сохранить изображение одним файлом.

Выделяем два оставшихся слоя. Для этого зажимаем клавишу Ctrl и левой кнопкой мыши (ЛКМ) последовательно выделяем каждый из слоев, кликая одинарным щелчком мыши на этих слоях.

Объединяем выделенные слои. Тут еще проще - для этого служит сочетание “горячих” клавиш Ctrl + E. Нажимаем их и видим результат:

[Сведенный в один слой][3]
Сведенный в один слой

Теперь можно сохранять полученное изображение как обычно, через “Файл - Сохранить для Web и устройств” с помощью длинного сочетания клавиш Alt + Shift + Ctrl + S. Также стоит упомянуть, что при работе со слоями всегда можно вернуться назад, нажав стандартную комбинацию клавиш Ctrl + Z.

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

На этом все.


Одним из самых необходимых инструментов в программе Photoshop для верстальщика является линейка (Ruler). Назначение ее просто и полностью отвечает своему названию. С помощью нее можно измерять расстояния между объектами макета.

Необходима линейка потому, что задача верстальщика состоит в верстке макета сайта с максимальной точностью. Точнее, чтобы сайт был максимально приближен к своему первоначальному виду - макету, который нарисовал дизайнер. Поэтому при нарезке макета верстальщик постоянно измеряет расстояния между объектами макета.

Чтобы вызвать инструмент “Линейка” (Ruler), нужно щелкнуть правой кнопкой мыши на значке “Пипетка” в панели инструментов. Появится небольшое констекстное меню, в котором присутствует “Линейка” (Ruler Tool):

Контекстное меню Photoshop

Курсор мыши изменится - рядом с ним будет стилистическое изображение линейки. Теперь давайте попрактикуемся и измерим расстояние между двумя объектами на макете.

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

Проведенная линия линейки

Перекрестия на концах линии обозначают начальную и конечную точку отсчета. Осталось узнать, а какое же расстояние между этими двумя направляющими. Переводим взгляд в правый верхний угол окна, на панель “Инфо”:

Панель Инфо Photoshop

Обведенная область как раз и показывает расстояние, вычисленное Photoshop. Это линейные размеры. W - ширина (горизонталь), а H - высота (вертикаль). Мы измеряли горизонтальный размер (расстояние) при зажатой клавише Shift, поэтому по вертикали стоит 0 пикселей.

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

Аналогично измерим высоту этого баннера:

Вертикальная измерительная линия

И посмотрим, сколько она составляет в пикселах:

Вертикальный размер баннера

Высота равна 339 пиксела. Теперь у нас есть оба размера - высота и ширина, которые можно использовать при последующей верстке макета. Точно также производится измерение расстояния или размеров для любых объектов макета.

На этом все.