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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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 браузер, не уверен, вроде были проблемы в нем с этим свойством.

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

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

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

@dmitrypro77 

Спасибо