БЛОГ НА HUSL


Как сделать вертикальный и горизонтальный текст рядом

Автор вопроса: Starina

Как сделать, как на картинке ниже. Пробовал сделать, но адаптивность машет ручкой (делал разные отступы для мобилок, но их слишком много)

#vertical_text {
    font: 47px Verdana;
    color: #D7D7D7;
    transform-origin: left bottom;
    margin-left: 40px;
    padding-left: 6px;
    transform: rotate(-90deg);
}

#year70 {
    font: 900 110px Verdana;
    color: #F9AD6A;
    margin-left: -23%;
}

#horiz_text {
    font: 47px Verdana;
    color: #D7D7D7;
}

введите сюда описание изображения

может можно как-то по другому сделать? ps: сильно не пинайте первая вёрстка :D


Источник

Ответы (3 шт):

Автор решения: Sevastopol'

Никакой магии. Простое решение на CSS, работающее во всех браузерах:

div {
  display: inline; position: relative; padding: 0 0 10vw 10vw;
  color: #f8ad6a; font-family: Verdana; font-weight: bold; font-size: 20vw;
  background: linear-gradient( 90deg, #f6f6f6, #f6f6f6 37vw, white 37vw, white 100%);
}

div>span {
  position: absolute;
  font-size: 8.8vw; color: #d5d5d5; font-weight: normal;
}

div>span:nth-child(1) {
  bottom: 10.5vw; left: -8vw;
  letter-spacing: -0.2vw; transform: rotate( -90deg);
}

div>span:nth-child(2) {
  bottom: 2vw; left: 11vw;
  letter-spacing: -0.05vw;
}
<div>70лет<span>более</span><span>исследований</span><i></i></div>

Добавим title и тень для текста:

div {
  display: inline; position: relative; padding: 0 0 10vw 10vw;
  color: #f8ad6a; font-family: Verdana; font-weight: bold; font-size: 20vw;
  background: linear-gradient( 90deg, #f6f6f6, #f6f6f6 38vw, white 38vw, white 100%);
  text-shadow: 4px 2px 3px rgba(150, 150, 150, 1);
}

div>span {
  position: absolute;
  font-size: 8.8vw; color: #d5d5d5; font-weight: normal;
}

div>span:nth-child(1) {
  bottom: 10.5vw; left: -8vw;
  letter-spacing: -0.2vw; transform: rotate( -90deg);
}

div>span:nth-child(2) {
  bottom: 2vw; left: 11vw;
  letter-spacing: -0.05vw;
}
<div title="Более 70 лет исследований">70лет<span>более</span><span>исследований</span><i></i></div>

Добавим немного лёгкой анимации закрашивания текста при наведении:

div {
  display: inline; position: relative; overflow: hidden; padding: 0 0 10vw 10vw;
  color: #f8ad6a; font-family: Verdana; font-weight: bold; font-size: 20vw;
  background: linear-gradient( 90deg, #f6f6f6, #f6f6f6 38vw, white 38vw, white 100%);
  text-shadow: 4px 2px 3px rgba(150, 150, 150, 1); cursor: default;
}
div::before, div::after {
  content: attr(data-hover);
  display: block; position: absolute; overflow: hidden;
  top: 0; left: 10vw; right: 0; width: 0px; color: chocolate;
  transition: all 1s;
}
div:hover:before {width: 100%;}

div>span {
  position: absolute;
  font-size: 8.8vw; color: #d5d5d5; font-weight: normal;
}

div>span:nth-child(1) {
  bottom: 10.5vw; left: -8vw;
  letter-spacing: -0.2vw; transform: rotate( -90deg);
}

div>span:nth-child(2) {
  bottom: 2vw; left: 11vw;
  letter-spacing: -0.05vw;
}
<div title="Более 70 лет исследований" data-hover="70лет">70лет<span>более</span><span>исследований</span><i></i></div>

→ Ссылка
Автор решения: GGO

Добавлю немного интересной магии от себя, огромный плюс это конечно то, что скринридер прочитает такое на одном дыхании)

.text {
  font-family: Arial, sans-serif;
  font-weight: 500;
  position: relative;
  padding-left: 20px;
  margin: 0;
  color: #d9d9d9;
  font-size: 16px;
  line-height: 1.1;
}
.text--main {
  color: #f4ae71;
  font-size: 32px;
  line-height: 1;
}
.text-vertical {
  position: absolute;
  left: 0;
  bottom: 2px; /* Косметически поправил отступ */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
<p class="text">
  <span class="text-vertical">более</span>
  <span class="text--main">70лет</span> 
  <br> 
  <span>исследований</span>
</p>

→ Ссылка
Автор решения: Alexandr_TT

Вариант SVG

Преимущества:

  1. Внутри SVG для всех элементов: фигур, текста, абсолютные координаты, что позволяет легко позиционировать их относительно друг друга
  2. Снаружи svg ведет себя, как обычный блок, участник вёрстки и если убрать width, height в шапке SVG, то блок становится адаптивным и вёрстка внутри блока не сломается при любом размере окна просмотра гаджета.
  3. Текст хорошо индексируется поисковиками и ещё лучше, если вы добавите для них какой-то текст между тегами <desc>...</desc> и <title> ... </title> к тому же этот текст будет работать в качестве тултипа при наведении.
    4. Приложение адаптивно и работает во всех современных браузерах

Попробуйте навести курсор на цифру 70

<style>
.container{
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 500 250" > 
            <!-- Серый прямоугольник -->
<rect x="7" y="45" width="225" height="185" fill="#F6F6F6"/>
<text transform="rotate(-90 55 212)" x="55" y="212" font-size="64px" fill="#D5D5D5"> более </text> 
  <text  x="80" y="210" font-size="56px" font-family="sans-serif" fill="#D5D5D5"> исследований </text> 
     <g>
     <title> 70 лет эффективной и неустанной научной работы </title>
     <text  x="70" y="150" font-size="130px" font-family="sans-serif" letter-spacing="-0.06em" font-weight="750" fill="#F8AD6A"> 70 лет </text>
    </g>
</svg>       
</div>

Вариант SVG с тенью CSS

.container{
width:75vw;
height:75vh;
}
#L70 { 
filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.5));
} 
.txt {
filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3));
}
<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 500 250" > 
            <!-- Серый прямоугольник -->
<rect x="7" y="45" width="225" height="185" fill="#F6F6F6"/>
<g id="L70">
<text class="txt" transform="rotate(-90 55 212)" x="55" y="212" font-size="64px" fill="#D5D5D5"> более </text> 
  <text class="txt"   x="80" y="210" font-size="56px" font-family="sans-serif" fill="#D5D5D5"> исследований </text> 
     <g>
     <title> 70 лет эффективной и неустанной научной работы </title>
     <text   x="70" y="150" font-size="130px" font-family="sans-serif" letter-spacing="-0.06em" font-weight="750" fill="#F8AD6A"> 70 лет </text>
    </g>
    </g>
</svg>       
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.