Подход «Pixel Perfect»
Pixel Perfect — Подход в вёрстке, когда итоговый результат максимально точно, пиксель в пиксель, совпадает с дизайнерским макетом.
Есть несколько способов, как можно найти визуальные отличия:
👉 Сравнение скриншота и макета. Можно сделать скриншот сайта и загрузить в графический редактор, после чего сравнить скриншот и исходный макет в режиме наложения.
👉 Добавление картинки макета на страницу. Можно сохранить макет картинкой, добавить её в документ с помощью
👉 Браузерные расширения. У предыдущих способов есть важный недостаток — нужно совершать множество "лишних действий". Браузерные расширения, такие как PerfectPixel, берут эту рутину на себя. PerfectPixel доступен для установки в Chrome, Opera, Edge, Firefox.
Статья: https://doka.guide/css/pixel-perfect/
#css #дока
👉 @frontend_formula
Pixel Perfect — Подход в вёрстке, когда итоговый результат максимально точно, пиксель в пиксель, совпадает с дизайнерским макетом.
Есть несколько способов, как можно найти визуальные отличия:
👉 Сравнение скриншота и макета. Можно сделать скриншот сайта и загрузить в графический редактор, после чего сравнить скриншот и исходный макет в режиме наложения.
👉 Добавление картинки макета на страницу. Можно сохранить макет картинкой, добавить её в документ с помощью
<img> и разместить в центре страницы. После чего можно изменить прозрачность картинки с помощью opacity, и отличия сразу будут видны.👉 Браузерные расширения. У предыдущих способов есть важный недостаток — нужно совершать множество "лишних действий". Браузерные расширения, такие как PerfectPixel, берут эту рутину на себя. PerfectPixel доступен для установки в Chrome, Opera, Edge, Firefox.
Статья: https://doka.guide/css/pixel-perfect/
#css #дока
👉 @frontend_formula