Прозрачность блока под блоком

@Romantik_FM · Регистрация: 03.03.2010

Author24 — интернет-сервис помощи студентам

Доброго времени суток. Подскажите как правильно сверстать блок с текстом WE ARE который абсолютно позиционирован, а под ним бордер блока H1 который как бы должен пропасть под ним. Спасибо. Фото шаблона прилагаю

@gogolik · 31.01.2020, 18:48

Фото решения приложить или свой сверхсекретный код покажете?

@Romantik_FM · 31.01.2020, 20:44 **[ТС]**

HTML5

1
2
3

            <h1>our worx
                <p class="we_are">Check out</p>
            </h1>

CSS

.we_are{
    font-size: 24px;
    text-transform: uppercase;
    position: absolute;
    top:-16px;
    width: 150px;
    font-weight: 500;
    text-align: center;
    z-index: 2;
       
    font-style: italic;
}
h1{
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 125px;
    color: #4f4d6a;
    text-transform: uppercase;
    text-align: center;
    margin-top: 55px;
    margin-bottom: 10px;
    height: auto;
    border-top: 1px solid #fff;
    position: relative;
    padding-top: 40px;
    z-index: 1;
}

Добавлено через 15 минут
если смотреть ниже по шаблону то там проблем нет, там фон один цвет и мы просто заливаем блок we_are так же как и фон ниже, а вот в первом случае нужно как бы затереть бордер но не затирать бэк главного блока

HTML5

1	<h1>Studio banx<p class="we_are">we are</p></h1>

@novichek_1905 · 31.01.2020, 23:59

HTML5

1	<div>we are</div>

CSS

div {
  align-items: center;
  justify-content: center;
  display: flex;
}
div:after, div:before {
  content: ' ';
  display: block;
  height: 1px;
  background-color: #000;
  flex-grow: 1;
}
div:after {
  margin-left: 100px;
}
div:before {
  margin-right: 100px;
}

@Romantik_FM 324 / 316 / 84 Регистрация: 03.03.2010 Сообщений: 1,364
		1
	Прозрачность блока под блоком 31.01.2020, 17:51. Показов 832. Ответов 3 Метки нет (Все метки) Доброго времени суток. Подскажите как правильно сверстать блок с текстом WE ARE который абсолютно позиционирован, а под ним бордер блока H1 который как бы должен пропасть под ним. Спасибо. Фото шаблона прилагаю Миниатюры 0

@gogolik Модератор 2820 / 1869 / 804 Регистрация: 13.03.2010 Сообщений: 6,099
	31.01.2020, 18:48	2
	Фото решения приложить или свой сверхсекретный код покажете? 0

	31.01.2020, 23:59