Подскажите как реализовать такой текст c css?

Question

Всем привет! Никак не выходит реализовать данную вещь. Перепробовал все, что знал. Как можно начальные буквы Л Л. Именно с помощью текста

body {
  background: rgb(0,0,0);
}
.text_container {
    position: relative;
}
.main_text {
  padding-left: 30px;
}

.text {
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 7px;
    color: #f8ff13;
}
.text_border {
    z-index: -1;
    position: absolute;
    left: 28px;
    top: 0;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
}

<div class="text_container">
  <span class="text main_text">Лайки</span>
  <span class="text text_border">Лайки</span>
</div>

Answer 1

body {
  background-color: #292a25;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.text_container {
  position: relative;
}

span {
  color: #f8ff13;
  font-family: Arial;
  font-style: italic;
  font-size: 100px;
  font-weight: 800;
  text-shadow: -1px 0 0 currentColor, 0 -1px 0 currentColor, 1px 0 0 currentColor, 0 1px 0 currentColor;
}

span:nth-child(2) {
  position: absolute;
  right: 10px;
  top: 0;
  color: #20201e;
  z-index: -1;
  text-shadow: -1px 0 0 white, 0 -1px 0 white, 1px 0 0 white, 0 1px 0 white;
  white-space: nowrap;
}

<div class="text_container">
    <span class="text">ЛАЙКИ</span>
    <span class="text">//ЛАЙКИ</span>
</div>

Answer 2

Тень можно сделать так:

body {
  background: black;
}

div {
  text-transform: uppercase;
  font-family: arial;
  letter-spacing: 6px;
  font-style: italic;
  font-size: 4em;
  font-weight: bold;
  padding-left: 16px;
  color: yellow;
  text-shadow: -1px -1px 0 yellow, 1px 1px yellow, -1px 1px 0 yellow, 1px -1px yellow, 
               -8px 0 0 black,
               -9px 1px 0 white, -9px -1px 0 white, -7px 1px 0 white, -7px -1px 0 white;
}

<div>Лайки</div>

Answer 3

Если такое будет использовать пару раз на странице и будет очень редко редактироваться - используйте картинку.
Для индексации можете использовать трюк, который использует у себя Instagram:

body {
  background: #444;
}

h1 {
  font-size: 0;
}

h1 > img {
  width: 400px;
}

<h1>
  <img src="//i.imgur.com/R7WZfH4.png">
  Лайки
</h1>

Если же это будет редактироваться, то смотрите в сторону SVG

БЛОГ НА HUSL

Подскажите как реализовать такой текст c css?

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