Блог

Я пытаюсь создать визуальный эффект, лучше всего иллюстрируемый этим изображением:

Я добиваюсь этого эффекта с помощью большого количества текстовых теней, все они смещены по кругу. Это работает. Но я хочу сделать тот же эффект с div, чтобы я мог наложить эффект на изображения.

Я попробовал это:

 <div style="position:relative;top:0;left:0;">in a new adventure!
   <div style="position:relative;top:5;left:5;">in a new adventure!
   </div>
</div>
  

Так что не обращайте внимания на раскраску или еще что-то… я ожидал, что текст будет нарисован непосредственно поверх другого текста, чтобы он выглядел немного толще. Т.Е. это:

Но вместо этого я получаю второй div ПОД первым div со смещением, вот так:

Есть ли какой-либо способ разместить div с содержимым непосредственно на 100% над другим div с содержимым? Я намереваюсь сместить нижний div z-порядка, чтобы сделать обводку снизу, как на верхнем изображении.

[TBN!] Запустите фрагмент в полноэкранном режиме, чтобы увидеть эффект (он не реагирует: p)

• вам нужно три элемента, чтобы добавить эффект, один за текстом и один под текстом, чтобы добавить размер, и я использовал -webkit-text-stroke для добавления отступов, и с помощью интервалов между словами и буквами я управляю текстом

 #outer {
    font-size: 70px;
    color: #3993cc;
    letter-spacing: -1px;
    position: relative;
    font-weight: 900;
    word-spacing: -17px;
    font-family: arial;
    -webkit-text-stroke-width: 14px;
    -webkit-text-stroke-color: #3993cc;
}

#outer2 {
    font-size: 70px;
    color: #3993cc;
    letter-spacing: -1px;
    position: absolute;
    font-weight: 900;
    word-spacing: -17px;
    top : 10px;
    left : 0px;
    font-family: arial;
    -webkit-text-stroke-width: 11px;
    -webkit-text-stroke-color: #3993cc;
}

#inner {
     color: white;
    font-size: 70px;
    font-weight: 600;
    letter-spacing: 4.4px;
    position: absolute;
    top: 14px;
    left: 3px;
    -webkit-text-stroke-width: 0px;

}

body {
  background: #a3efff;
}  

 <div id="outer">
in a new adventure!
  <div id="outer2">
in a new adventure!

</div>
  <span id="inner">
  in a new adventure!
  </span>

</div>  

Используйте абсолютное позиционирование

 <div style="position:relative;top:0;left:0;">in a new adventure!
   <div style="position:absolute;top:1px;left:1px;">in a new adventure!
   </div>
</div>
  

Кстати, не забудьте добавить единицу измерения после вашего значения.

Или вы можете использовать отрицательные поля:

 <div style="position:relative;top:0;left:0;">in a new adventure!
   <div style="position:relative;margin-top: -20px;">in a new adventure!
   </div>
</div>