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

Question

IninsaY @IninsaY

HTML

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

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

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

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

Решения вопроса 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;
}

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

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

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

Войти через центр авторизации

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

JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 4 минуты назад
- 6 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- час назад
- 20 просмотров
1

ответ
HTML

+1 ещё

Простой
Как Выделить слово приходящая из базы определенным цветом?
- 1 подписчик
- час назад
- 65 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 5 часов назад
- 89 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 21 час назад
- 53 просмотра
2

ответа
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- вчера
- 85 просмотров
2

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 23 апр.
- 708 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- 22 апр.
- 212 просмотров
4

ответа
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 2 подписчика
- 22 апр.
- 185 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- 22 апр.
- 617 просмотров
1

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Интегрировать в flutter проект storekit external link (ios)

25 апр. 2024, в 13:21

5000 руб./за проект

Реализовать часть интерфейса для образовательных курсов на React

25 апр. 2024, в 13:13

5000 руб./за проект

Доработка плагина для outlook

25 апр. 2024, в 12:57

1000 руб./в час

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 комментарий

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

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

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

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