Как сделать такую же линию?

Question

IninsaY @IninsaY

HTML

Как сделать такую же линию?

Вопрос задан более трёх лет назад
87 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

Решения вопроса 1

9 комментариев

IninsaY @IninsaY Автор вопроса

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

Написано более трёх лет назад
origami1024 @origami1024

IninsaY, усовершенствовал решение

Написано более трёх лет назад
IninsaY @IninsaY Автор вопроса

origami1024, большое спасибо, но когда я меняю "width" на 70%, вместо 100 и линия оказывается не в центре

Написано более трёх лет назад
origami1024 @origami1024
IninsaY, чтобы подобрать позиции начала/конца линий нужно изменять background-size и background-position
background-size: calc(18%); background-position: 30% 0, 70% 0;
Написано более трёх лет назад

IninsaY @IninsaY Автор вопроса

Что-то не понимаю, посмотри

<!DOCTYPE html>
 <html>

 	<head>
		<meta charset="UTF-8">	
		<title>Studio Banx</title>
		<link rel="stylesheet" href="style.css">
	</head>
 	
	<body>
 		<div class="b2">
 			<p class="t2"><i>b</i>anx</p>
 		</div>
 		<div class="b1">
 		<p class="t1"><span>DESIGN</span><span>WEB DESIGN</span> <span>GRAPHIC DESIGN</span> <span>PRINT DESIGN</span> <span>VIDEO DESIGN</span></p>
 		</div>
 		<div class="l1">
 			<div class="l2">
 				<p class="t3"><i><span>WE ARE</span></i></p>
 			</div>
 		</div>
 		<div>
 			<p class="t4">STUDIO BANX</p>
 		</div>
 		<div>
 			<p class="t5">A CREATIVE WEB & PRINT DIGITAL AGENCY BUILT ON METHOD AND CREATIVE JUICES</p>
 			<hr class="hr">
 		</div>
 		<div>
 			<form action="input1.php" name="test" method="post" class="b5">
 				<input class="b3" type="submit" value="See our work">
 				<input class="b4" type="submit" value="Meet the team">
 			</form>
 		</div>
 
 
 
 
 	</body>

 </html>

body {
	background: url(img/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100% 100%;
}
.t1 {
	color: #4D4E67;
	font-family: Rounds;
	font-size: 14px;
	font-weight: 800;
	margin-bottom: 130px;
}
.t2 {
	color: #4D4E67;
	font-family: Rounds;
	font-size: 30px;
	font-weight: 800;	
}
.b1 {
	margin-left: 850px;
	margin-right: 10px;
	margin-top: -45px;
}
.b2 {
	margin-left: 80px;
}
.b3 {
	height: 50px;
	width: 250px;
	color: white;
	font-style: italic;
	background: linear-gradient(to top, #514E68, #747288);
	border: 3px;
	font-family: Rounds;
	font-size: 20px;
	margin-right: 15px;
	border-radius: 50px;
	margin-left: 500px;
}
.b4 {
	height: 50px;
	width: 250px;
	color: white;
	font-style: italic;
	background: linear-gradient(to top, #907E8C, #C8B6C2);
	border: 3px;
	font-family: Rounds;
	font-size: 20px;
	border-radius: 50px;
}
.t3 {
	text-align: center;
	color: #4D4E67;
	font-family: Rounds;
	font-size: 23px;
	font-weight: 800;
}
.t4 {
	text-align: center;
	color: #4D4E67;
	font-family: Rounds;
	font-size: 150px;
	font-weight: 800;
	margin: 10px;
}
.t5 {
	text-align: center;
	color: #4D4E67;
	font-family: Rounds;
	font-size: 18px;
	font-weight: 800;
}
.b5 {
	align-content: center;
}
hr {
	color-profile: white;
	width: 70%;
}
.hr {
	margin-bottom: 60px;
	background-image: 
	linear-gradient(transparent calc(49%), white calc(50% - 2px), white calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(transparent calc(49%), white calc(50% - 2px), white calc(50% + 2px), transparent calc(50% + 2px));
    background-size: calc(50% - 110px);
  	background-repeat: no-repeat;
  	background-position: 0 0, 100% 0;
}
span {
	margin-right: 15px;
}
.l1 {
	width: 70%;
 	text-align: center;
  background-image: 
    linear-gradient(transparent calc(49%), white calc(50% - 2px), white calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(transparent calc(49%), white calc(50% - 2px), white calc(50% + 2px), transparent calc(50% + 2px));
  background-size: calc(70%);
  background-repeat: no-repeat;
  background-position: 30% 0, 70% 0;
}

Написано более трёх лет назад

origami1024 @origami1024

https://jsfiddle.net/x7h4bL2c/

Написано более трёх лет назад
IninsaY @IninsaY Автор вопроса

origami1024, спасибо, но мне интересно, как вы подбираете цифры в этой строчке: "background-size: calc(45% - 50px);"?

Написано более трёх лет назад
origami1024 @origami1024

IninsaY, calc(45% - 50px) значит, что длина обоих linear-gradient будет 45% от всего элемента и еще -50px.
Чтобы упростить понимание можно просто ставить 40%.
-50px - для того, чтобы адаптивность была лучше, так как размеры текста внутри фиксированны и не зависят от растяжения окна.

Написано более трёх лет назад
IninsaY @IninsaY Автор вопроса

origami1024, так как решить это?

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

IninsaY @IninsaY Автор вопроса

Спасибо, но у меня что-то не получается интерпретировать под мой код.

<!DOCTYPE html>
 <html>

 	<head>
		<meta charset="UTF-8">	
		<title>Studio Banx</title>
		<link rel="stylesheet" href="style.css">
	</head>
 	
	<body>
 		<div class="b2">
 			<p class="t2"><i>b</i>anx</p>
 		</div>
 		<div class="b1">
 		<p class="t1">DESIGN WEB DESIGN GRAPHIC DESIGN PRINT DESIGN VIDEO DESIGN</p>
 		</div>
 		<div class="l1">
 			<div class="l2">
 				<p class="t3"><i><span>WE ARE</span></i></p>
 			</div>
 		</div>
 		<div>
 			<p class="t4">STUDIO BANX</p>
 		</div>
 		<div>
 			<p class="t5">A CREATIVE WEB & PRINT DIGITAL AGENCY BUILT ON METHOD AND CREATIVE JUICES</p>
 			<hr>
 		</div>
 		<div>
 			<form action="input1.php" name="test" method="post" class="b5">
 				<input class="b3" type="submit" value="See our work">
 				<input class="b4" type="submit" value="Meet the team">
 			</form>
 		</div>
 
 
 
 
 	</body>

 </html>

body {
	background: url(img/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100% 100%;
}
.t1 {
	color: #4D4E67;
	font-family: Rounds;
	font-size: 14px;
	font-weight: 800;
	margin-bottom: 130px;
}
.t2 {
	color: #4D4E67;
	font-family: Rounds;
	font-size: 30px;
	font-weight: 800;	
}
.b1 {
	margin-left: 920px;
	margin-right: 50px;
	margin-top: -45px;
}
.b2 {
	margin-left: 80px;
}
.b3 {
	height: 50px;
	width: 250px;
	color: white;
	font-style: italic;
	background: linear-gradient(to top, #514E68, #747288);
	border: 3px;
	font-family: Rounds;
	font-size: 20px;
	margin-right: 15px;
	border-radius: 50px;
	margin-left: 500px;
}
.b4 {
	height: 50px;
	width: 250px;
	color: white;
	font-style: italic;
	background: linear-gradient(to top, #907E8C, #C8B6C2);
	border: 3px;
	font-family: Rounds;
	font-size: 20px;
	border-radius: 50px;
}
.t3 {
	text-align: center;
	color: #4D4E67;
	font-family: Rounds;
	font-size: 23px;
	font-weight: 800;
}
.t4 {
	text-align: center;
	color: #4D4E67;
	font-family: Rounds;
	font-size: 150px;
	font-weight: 800;
	margin: 10px;
}
.t5 {
	text-align: center;
	color: #4D4E67;
	font-family: Rounds;
	font-size: 18px;
	font-weight: 800;
}
.b5 {
	align-content: center;
}
hr {
	border-color: white;
	color-profile: white;
}

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- вчера
- 118 просмотров
1

ответ
HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 28 окт.
- 82 просмотра
1

ответ
HTML

+1 ещё

Простой
Как в руководстве steam сделать обтекающий картинку текст?
- 1 подписчик
- 08 окт.
- 133 просмотра
1

ответ
HTML

+1 ещё

Средний
Скачал плагин image preview в вс коде, чтобы установить иконку сайта. Иконка появилась в браузере, но не появилась слева напротив строки. Почему так?
- 1 подписчик
- 30 сент.
- 153 просмотра
1

ответ
HTML

+1 ещё

Простой
От какой технической характеристики компьютера зависит скорость работы сайта, указанного ниже?
- 1 подписчик
- 24 сент.
- 464 просмотра
2

ответа
HTML

+1 ещё

Простой
Как убрать линии у бейджиков в Markdown?
- 1 подписчик
- 23 сент.
- 209 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как менять картинки у карточки в списке товаров?
- 4 подписчика
- 22 сент.
- 356 просмотров
1

ответ
HTML

+1 ещё

Средний
Как правильно сочетать теги article, section и заголовки h1-h6?
- 2 подписчика
- 21 сент.
- 244 просмотра
2

ответа
PHP

+1 ещё

Простой
Можно ли писать функции в текст?
- 1 подписчик
- 19 сент.
- 486 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как подключить библиотеку?
- 1 подписчик
- 13 сент.
- 628 просмотров
3

ответа
Показать ещё Загружается…

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Middle Frontend-разработчик

Польза

от 120 000 до 160 000 ₽

Answer 1 · 2019-10-30 17:00:37

Вариант без псевдоэлементов, фон через linear-gradient

.wrapper{
  text-align: center;
  background-image: 
  linear-gradient(transparent calc(49%), skyblue calc(49%), transparent calc(49% + 1px)),
  linear-gradient(transparent calc(49%), skyblue calc(49%), transparent calc(49% + 1px));
  background-size: calc(45% - 80px);
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0;
}

UPD: теперь корректно работает с картинкой на фоне

Answer 2 · 2019-10-30 16:58:42

Антон Усачев @rockfeeler

Фронтендер, дизайнер, верстальщик-перфекционист

Ответ написан более трёх лет назад

1 комментарий

Как сделать такую же линию?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт