Как реализовать такое начало абзаца?

Пользователь

megabandapt

от megabandapt , в категории: HTML/CSS , 6 месяцев назад

Знаю, вопрос примитивный. Тем не менее хочу узнать наиболее удобный способ для реализации такого? Можно Orange и отдельно букву O выделить дивами и задать стили? Или есть еще вариант?

1 | 0

#HTML #CSS

2 ответа

Пользователь

dmitrypro77

от dmitrypro77 , 6 месяцев назад

@megabandapt Попробуйте использовать initial-letter CSS свойство как самый простой вариант, что то вроде такого:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      p {
        width: 300px;
      }

      p::first-letter {
        font-size: 1.5em;
        color: orange;
        padding-right: 0.2em;
        initial-letter: 2;
      }
    </style>
  </head>
  <body>

    <div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>

  </body>
</html>

Единственное проверьте работает ли в Firefox браузер, не уверен, вроде были проблемы в нем с этим свойством.

3 | 0

Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.

Пользователь

megabandapt

от megabandapt , 6 месяцев назад

@dmitrypro77

Спасибо

1 | 0

Как реализовать такое начало абзаца?

2 ответа

Похожие обсуждения: