Início / coding / Perguntas / 79556386
Accepted
Warby
Asked: 2025-04-05 07:42:41 +0800 CST

Como faço para sobrepor letras com a letra da esquerda em cima e a da direita em baixo?

  • 772

Estou tentando sobrepor letras em um <p>elemento com a letra da esquerda em cima, tentei colocar cada letra em um intervalo e definir o z-index, no entanto, isso parece não funcionar, CodePen . Quero a letra da esquerda em cima da letra da direita.

Como posso sobrepor as letras da esquerda em cima à direita em baixo?

Código:

@font-face {
  font-family: 'CloudySunday';
  src: url('https://fritzfromtechsupport.com/fonts/CloudySunday.ttf') format('truetype');
}
<div>
  <p style="letter-spacing: -0.8rem;font-family: 'CloudySunday';">
    <span style="z-index: 1000;color: green;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
  h
</span>
    <span style="z-index: 100;color: red;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
  i
</span>
  </p>
</div>

html

2 respostas

  1. Best Answer

    Você pode definir display: grid;o <p>elemento e exibir ambos <span>os elementos grid-area: 1 / 1;(primeira linha e primeira coluna).

    Demonstração (troquei o "i" por um "a" para que ficasse visível abaixo do "h"):

    @font-face {
  font-family: 'CloudySunday';
  src: url('https://fritzfromtechsupport.com/fonts/CloudySunday.ttf') format('truetype');
}

p {
  display: grid;
}

span {
  grid-area: 1 / 1;
}
    <div>
  <p style="letter-spacing: -0.8rem;font-family: 'CloudySunday';">
    <span style="z-index: 1;color: green;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
      h
    </span>
    <span style="color: red;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
      a
    </span>
  </p>
</div>

    • 2

  2. usar o sistema de grade é uma ótima ideia ( Ori Drori ++)
    Eu apenas adiciono a centralização de cada letra horizontalmente:

    @font-face {
  font-family: 'CloudySunday';
  src: url('https://fritzfromtechsupport.com/fonts/CloudySunday.ttf')
       format('truetype');
}
p {
  display        : grid;
  letter-spacing : -0.8rem;
  font-family    : 'CloudySunday';
  width          : fit-content;
}
span {
  grid-area  : 1 / 1;
  display    : block;
  text-align : center;  /* do all proportional letter centered */
  font-size  : 70px;
  filter     : drop-shadow( 0px 2px black) 
               drop-shadow( 0  -2px black) 
               drop-shadow( 2px 0   black) 
               drop-shadow(-2px 0   black);
}
    <div>
  <p>
    <span style="z-index: 1; color: green;" > h </span>
    <span style="            color: red;"   > i </span>
  </p>
</div>

    • 0

relate perguntas