Как сверстать несколько линий(вертикальных и горизонтальных в css)?
я про линии над картинками
и еще хотел момент один уточнить, не знаю как его оформить в виде полноценного вопроса, поэтому спрошу тут
в дизайне, визуально кажется что оранжевый блок, выходит за пределы синего и попадает на серый, скажите это просто так фон сделан через background: linear-gradient или это что-то другое, таких мест в макете может быть несколько, но при этом фон в макете чередуется в цветах постоянно, условно сначала серый фон, затем синий, потом снова серый и тд
Дополнительно:
скажите это просто так фон сделан через background: linear-gradient или это что-то другое
Угадать по картинке?
Как сверстать несколько линий(вертикальных и горизонтальных в css)?
Градиенты, псевдоэлементы (фон, бордер)
в дизайне, визуально кажется что оранжевый блок, выходит за пределы синего и попадает на серый, скажите это просто так фон сделан через background: linear-gradient или это что-то другое
Интересный вопрос :)
Как сделаете, так и будет.
Вариантов тут полно. Гриды, псевдо, градиенты, трансформы, отступы и т.д.
Это вы принимаете решение как это верстать. Макет может содержать какие-то подсказки, но вы вовсе не обязаны использовать именно те приемы, которые использовал дизайнер. Ведь ему-то нужно только нарисовать, а вам, чтобы все это функционировало.
Привет, вот приме ссыль
<div class='row'> <div class="line line__horizontal"></div> <div class="line line__vertical line__vertical_left"></div> <div class="line line__vertical line__vertical_center"></div> <div class="line line__vertical line__vertical_right"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> |
<div class='row'> <div class="line line__horizontal"></div> <div class="line line__vertical line__vertical_left"></div> <div class="line line__vertical line__vertical_center"></div> <div class="line line__vertical line__vertical_right"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
body { background: radial-gradient(#22394d 10%, #202a38); height: 100vh; } .row { display: flex; gap: 10px; position: relative; padding-top: 100px; } .line { border: solid 1px #304150; &__horizontal { position: absolute; top: 10%; left: 5%; right: 5%; } &__vertical { position: absolute; top: 10%; height: 20px; &_left { left: 5%; } &_center{ top: 5%; left: 50%; height: 40px; transform: translateX(-50%) } &_right{ right: 5%; } } } .box { display: block; width: 100%; height: 300px; background-color: #7092be; } |
body { background: radial-gradient(#22394d 10%, #202a38); height: 100vh; } .row { display: flex; gap: 10px; position: relative; padding-top: 100px; } .line { border: solid 1px #304150; &__horizontal { position: absolute; top: 10%; left: 5%; right: 5%; } &__vertical { position: absolute; top: 10%; height: 20px; &_left { left: 5%; } &_center{ top: 5%; left: 50%; height: 40px; transform: translateX(-50%) } &_right{ right: 5%; } } } .box { display: block; width: 100%; height: 300px; background-color: #7092be; }
и еще хотел момент один уточнить, не знаю как его оформить в виде полноценного вопроса, поэтому спрошу тут
в дизайне, визуально кажется что оранжевый блок, выходит за пределы синего и попадает на серый, скажите это просто так фон сделан через background: linear-gradient или это что-то другое, таких мест в макете может быть несколько, но при этом фон в макете чередуется в цветах постоянно, условно сначала серый фон, затем синий, потом снова серый и тд
Это position
А так лучше Вам пройти базу на каком нибудь htmlacademy
- Достаточно одного элемента для линий
Примерно:<div class="line"></div> .line { border: 1px solid red; border-bottom: none; width: ?; height: 30px; &::before { position: absolute left: center height: 30px; top: -15px; } }
<div class="line"></div> .line { border: 1px solid red; border-bottom: none; width: ?; height: 30px; &::before { position: absolute left: center height: 30px; top: -15px; } }
- Сергей delphinpro, так не будет работать нужно не забыть про content: ''
- Oscar Handsome, я только принцип показал.
- Сергей delphinpro, так я тоже выше написал "пример" :D
- Сергей delphinpro, я этот вариант тоже продумывал в начале, но т.к. вертикальных линий 3 шт, и и одна из них длинее по центру, все же придется доп. классы писать. И это еще надо ::before у класса менять. Что скажете?
- Oscar Handsome, если вам хочется сделать пустой элемент в разметке, да ещё и не один, с огромной вероятностью вы творите что-то не то. Исключения, конечно, есть, но тут с виду достаточно псевдоэлементов.
- Ankhena, а тут задачи не было, без изменений html сверстать как "в дизайне"
- Oscar Handsome, я имел ввиду вот такую простую вещь - https://codepen.io/delphinpro/pen/XWQKLOo
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания вертикальной и горизонтальной линий в CSS можно использовать различные подходы. Один из способов - это использовать псевдоэлементы `::before` и `::after` для создания линий.
Пример создания вертикальной линии:
```html
.vertical-line {
position: relative;
width: 1px;
height: 100px; /* Высота линии */
background-color: black; /* Цвет линии */
}
.vertical-line::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100px; /* Высота линии */
background-color: black; /* Цвет линии */
}
```
Пример создания горизонтальной линии:
```html
.horizontal-line {
width: 100px; /* Ширина линии */
height: 1px;
background-color: black; /* Цвет линии */
}
```
Также можно использовать свойство `border` для создания линий:
```html
.vertical-line-border {
border-left: 1px solid black; /* Цвет и толщина линии */
height: 100px; /* Высота линии */
}
.horizontal-line-border {
border-top: 1px solid black; /* Цвет и толщина линии */
width: 100px; /* Ширина линии */
}
```
Это лишь некоторые из способов создания линий в CSS. В зависимости от конкретных требований и дизайна страницы, можно выбрать наиболее подходящий способ для создания нужного вам визуального эффекта.