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

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;
}

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

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

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

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

HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 23 часа назад
- 30 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 23 часа назад
- 112 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- вчера
- 50 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 71 просмотр
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 42 просмотра
0

ответов
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 103 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 113 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать метку/ярлык?
- 1 подписчик
- 18 нояб.
- 43 просмотра
0

ответов
PHP

+2 ещё

Простой
Как можно отредактировать микроразметку сайта написанного на Bootstrap?
- 1 подписчик
- 17 нояб.
- 226 просмотров
3

ответа
HTML

+1 ещё

Простой
Как сделать так, чтобы при нажатии не исчезало?
- 1 подписчик
- 16 нояб.
- 135 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Рефакторинг vue.js/nest.js интерфейса у админки

22 нояб. 2024, в 15:50

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

Разработать индикатор для торговой платформы Metatreder5

22 нояб. 2024, в 15:00

2500 руб./в час

Разработка базы данных на SQL

22 нояб. 2024, в 14:51

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

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

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

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

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

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