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

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


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

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

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

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

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

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

Войти

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

Войти сейчас

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы