Garamond

Заглавная буква на фоне текста

Рекомендованные сообщения

навскидку два варианта: либо установить в качестве бекграунда, либо абсолютно позиционированный блок.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
5 минут назад, AlexZaw сказал:

либо установить в качестве бекграунда

Реализовать вариант на php - что бы буква автоматически(!) ставилась и под текст подкладывалась

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Возможно вам больше подойдет свойство counter-increment если блоки связаны друг с другом.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

На js примерно так:

<div class="text">
  <div class="bg"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, harum!</p>
</div>
.text{
  position: relative;
}
.bg{
  position: absolute;
  top: -75px;
  left: 0;
  color: #0ff;
  font-size: 150px;
  z-index: -1;  
}
var txt = document.querySelector('.text');
var bg = document.querySelector('.bg');
var first = txt.querySelector('p').innerHTML.charAt(0);
bg.innerHTML = first;

На пхп, думаю, прицип такой-же, единственно проблема может возникнуть при получении первого символа если используется кирилица, но решение легко гуглится

 

зы. сейчас работает только для первого блока на странице, но можно переделать и под все подобные блоки

Изменено пользователем AlexZaw

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас