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

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

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

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

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

HTML

 

CSS

 

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

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

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

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