Pixel perfect верстка

Добрый день, друзья. На днях со мной связался Дима Шулешов и предложил мне тему для интересной статьи (Дима, привет!). Ну для меня - интересной и актуальной, надеюсь и вам тоже, кому-нибудь пригодиться. Это несколько строчек кода, которые помогут вам верстать landing page в точности с макетом.

Кроме, того, вы значительно сократите время на замеры расстояний и переключения между фотошопом, окном браузера и текстовым редактором.

Готовый результат сводится к тому, что у вас в проекте есть кнопка, закрепленная в левом верхнем углу (любом месте), при нажатии на которую, на вашу верстку накладывается макет (картинка) с определенной прозрачностью, и вы можете оценить, насколько точно ваши отступы, размеры, позиционирование соответствует дизайну. Чтобы понять, - нужно попробовать. Рекомендую скачать исходник и посмотреть, как это работает или воспроизведите это короткое видео:

Итак, если у вас возникали проблемы с дотошными заказчиками, которые проверяют каждый пиксель, то теперь такой проблемы больше не должно возникнуть. Давайте же наконец реализуем этот эффект.

Первым делом, как это часто бывает, подключаем библиотеку jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Так как в большинстве проектов она уже подключена, обязательно убедитесь, чтобы вы не сделали этого повторно. Это может вызвать конфликт, и вы долго будете разбираться, почему же именно он возникает.

Теперь, давайте пропишем несколько тегов внутри нашего проекта. У меня это выглядит так:

<div id="p">Pixel Perfect</div>
<div class="" id="pp" style="opacity: 0;"></div>

Где первый div - это блок, отвечающий за кнопку, а второй, за наложение нашего макета. Для того, чтобы он накладывался корректно, нужно сделать несколько простых настроек:

.p {
    background: url(../images/maket.jpg) no-repeat; /* Ваш макет */
            width: 1255px;/* ширина макета */
            height: 750px;/* высота макета*/
            left: calc(50% - 627.5px);/* второе значение - половина, от ширины макета*/
            position: absolute;
            top: 0;
            opacity: 0.4 !important;
            transition: .3s;
            z-index: 97;
}

Вот 4 параметра, которые сопровождаются комментарием и нужно заменить на свои. Все - просто!

Теперь, давайте зададим стили для кнопки. Если вам принципиален внешний вид, то редактируйте, а так, можно оставить как есть.

#p {
        position: fixed;
        left: 0;
        top: 0;
        width: 200px;
        height: 75px;
        background: #c36c2c;
        z-index: 99;
        cursor: pointer;
        text-align: center;
        font-size: 25px;
        line-height: 0px;
        color: #c36c2c;
        left: -150px;
        vertical-align: middle;
        font-weight: 700;
        transition: .3s
    }

    #p:hover {
        left: 0;
        line-height: 80px;
        background: #88d3c2;
    }

Ну и осталось добавить реакцию на клик по кнопке. Будем просто добавлять/удалять класс и менять прозрачность блока с макетом на фоне:

$(document).ready(function () {
	$('#p').click(function () {
	$('#pp').toggleClass('p')
});});