Примеры оформления первой буквы абзаца

Опубликовано: 4 апреля 2015 Обновлено: 30 апреля 2019 3 комментария

first-letter-first-line

CSS даёт возможность форматирование абзаца с использованием псевдоэлементов :first-letter и :first-line. Можно выделить первый символ каждого абзаца, имитируя буквицу или придать особое форматирование первому предложению абзаца.

/*первый абзац*/
p:first-letter {
  font-size: 2em;
  margin-right: 2px; 
  color: #EE9966;
  font-weight: bold;
  text-shadow: -1px -1px 1px white, 1px 1px 1px #9E9D99;
}
p:first-line {color: #EE9966;}
/*второй абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 5px 10px;
  margin-right: 5px; 
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  border-radius: 50% 0;
  font-weight: bold;
}
/*третий абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 5px 10px;
  margin-right: 5px; 
  margin-bottom: 2px;
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  font-weight: bold;
}
/*четвертый абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 3px 10px;
  margin-right: 5px; 
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  font-weight: bold;
  border-radius: 50%;
}
/*пятый абзац*/
p:first-letter{
  font-size: 1.5em;
  padding: 2px 10px;
  margin-right: 5px; 
  background: #FAF4F4;
  border: 6px double;
  color: #EE9966;
  float: left;
  font-weight: bold;
}
/*шестой абзац*/
p:first-letter{
  font-size: 1.5em;
  padding: 2px 10px;
  margin-right: 5px; 
  background: url(https://html5book.ru/wp-content/uploads/2015/01/border-orange.png);
  border: 2px solid #EE9966;
  color: #544E3E;
  float: left;
  font-weight: bold;
  box-shadow: 1px 1px 1px #9E9D99;
}

Поделиться: