Как верстать pixel perfect без плагинов

Pixel perfect верстка — это точное повторение дизайн макета при создании html структуры. Дословно — каждый пиксель макета должен соответствовать пикселю на Веб-странице. В реальности это получается осуществить не на все 100%, часто возникают расхождения в отображении текста браузером и графическим редактором. Но не смотря на это верстать «пиксель в пиксель» следует уметь.

Для комфортного подгона верстки следует наложить макет поверх страницы с помощью простого тега <img>.

Сохраните макет в jpg/png
Узнайте его ширину в пикселях

После разместите тег <img> внутри body и с помощью абсолютного позиционирования расположите изображение по центру. Также не забудьте задать z-index и opacity, для отображения изображения выше других и прозрачности.

HTML

<html>
<body>
<img src="path_to_img" class="model">
  <container>
    <p>Контент страницы</p>
  </container>
</body>
</html>

<html>

<body>

<p>Контент страницы</p>

</container>

</body>

</html>

CSS

body {
  position: relative;
}

.model {
  position: absolute;
  z-index: 1000;
  left: 50%;
  margin-left: -900px; /* половина ширины макета */
  opacity: 0.3;
}

body {

position: relative;

}

.model {

position: absolute;

z-index: 1000;

left: 50%;

margin-left: -900px; /* половина ширины макета */

opacity: 0.3;

}

Также вы можете получить необходимые стили из самого графического редактора. Например, в фотошопе вы можете узнать значения border-radius, box-shadow, border-width, border-color и др., нажав ПКМ на слой > Копировать CSS.

Значения свойств текста можно найти в окне «символ» — Окно > Символ.

css текста фотошоп

Возможно, вам будет интересно:

Всплывающая подсказка при наведении на текст css

04.01.2018

Как правильно искать ответы в google веб разработчику

10.01.2018