Pixel perfect верстка — это точное повторение дизайн макета при создании html структуры. Дословно — каждый пиксель макета должен соответствовать пикселю на Веб-странице. В реальности это получается осуществить не на все 100%, часто возникают расхождения в отображении текста браузером и графическим редактором. Но не смотря на это верстать «пиксель в пиксель» следует уметь.
Для комфортного подгона верстки следует наложить макет поверх страницы с помощью простого тега <img>.
После разместите тег <img> внутри body и с помощью абсолютного позиционирования расположите изображение по центру. Также не забудьте задать z-index и opacity, для отображения изображения выше других и прозрачности.
HTML
1 2 3 4 5 6 7 8 |
<html> <body> <img src="path_to_img" class="model"> <container> <p>Контент страницы</p> </container> </body> </html> |
CSS
1 2 3 4 5 6 7 8 9 10 11 |
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.
Значения свойств текста можно найти в окне «символ» — Окно > Символ.