Задать вопрос
Finesse

Finesse

Ответы пользователя по тегу Вёрстка

  • Как верстать вылезая за границы блока?

    Finesse
    @Finesse
    Способ 1: абсолютное позиционирование

    <div class="block">
    <img class="image">
</div>

    .block {
    position: relative;
    overflow: visible;
}
.block .image {
    position: absolute;
    top: -100px;
    right: 200px;
}


    Способ 2: отрицательные отступы

    <div class="block">
    <img class="image">
</div>

    .block {
    overflow: visible;
}
.block .image {
    display: inline-block;
    margin-top: -100px;
    margin-bottom: -100px;
}


    В обоих способах адаптивность можно сделать с помощью @media-правил. Например:

    .block .image {
    position: absolute;
    width: 300px;
    top: -100px;
    right: 200px;
}
@media (max-width: 800px) {
    .block .image {
        width: 200px;
        top: -50px;
        right: 50px;
    }
}
    Ответ написан
    5 комментариев
    5 комментариев

  • Как лучше сверстать фон?

    Finesse
    @Finesse
    Фон страницы: серый цвет + картинка с белым треугольником. Примерно так:
    body {
  background-color: #ccc;
  background-image: url('../images/triangle.png');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

    А ширики и прочие узоры в виде картинок, заполняющих колонки рядом с текстом (всё, что слева/справа от блока текста — одна картинка). Так есть возможность скрыть шарики на мобильных экранах, чтобы не отнимать драгоценное место, останется только текст на серо-белом фоне.
    Ответ написан
    Комментировать
    Комментировать