Интересная задумка дизайнера. Как реализовать?

yaparoff · August 30, 2019

Дизайнер нарисовал макет вот с такими интересными линиями, которые идут по всей высоте сайта http://skrinshoter.ru/s/300819/pJvpKBvC
А я теперь вот ломаю голову как такое сверстать.
С одной стороны это можно сверстать колонками с рамкой, но ведь есть такие блоки, которые выходят за пределы этих колонок
Как тогда быть в таком случае?

Такие линии реально идут по всей высоте сайта.

Switch74 · August 30, 2019

как вариант
можно использовать background
можно так и делать как вы сказали, ничего не мешает выходить за пределы блоков некоторым элементам

npofopr · August 30, 2019

Можно ещё у дизайнера спросить, каким сайтом он вдохновился.

Когда-то давно мне попадался дизайнерский сайт, с точно такими же линиями. Возможно и он с него идею взял)

Aganancy · September 4, 2019

Быстро набросал, попробуйте:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="container">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
</body>
</html>

html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
}

.container {
    display: flex;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
}

.row {
    margin: 0 1%;
    width: 33.33333%;
    border-left: 1px solid red;
    height: 100%;
    border-right: 1px solid red;
}

Sign In

Интересная задумка дизайнера. Как реализовать?

Question

yaparoff

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

Aganancy

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information