Верстка пиксель в пиксель

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

С плагинами у меня как-то сразу не пошло — зависали, рушились, в общем работали не так. Утилит бесплатных я не нашел, а платные для меня слишком платные.

Решил сделать свой велосипед.
В любом месте хтмл файла (обычно прям перед закрывающим тегом body) добавляю пустой див. Либо сразу в верстку

Либо позже через консоль.

jQuery('body').append('
');

В стилях указываю абсолютное позиционирование, прозрачность, положительный z-index и картинку макета в качестве фонового изображения. background-position использую, если картинка не весь макет, а только часть.

#temp{
    background-image:url("../../images/temp.png");
    background-position:60px 182px;
    background-repeat:no-repeat;
    left:0;
    height:100%;
    opacity:0.8;
    position:absolute;
    width:100%;
    top:0;
    z-index:1000
}

Как вариант, картинку можно загнать под верстку:

#temp{
    ....
    opacity:1;
    z-index:-100
}
body{
    ...
    opacity:0.8;
}

Собсно на этом все. Можно верстать прям на картинке. Если еще настроить плагин для сохранения изменений css с фаербага в ваш файл, то верстка выходит чудо как быстро. Подходит для финальной подгонки, верстать с нуля удобнее все же в ide с всякими автодополнениями.

Автор: dimas

Добавить комментарий

Ваш e-mail не будет опубликован.