Zmiana wyglądu pierwszej litery – :first-letter (inicjał)

Czas czytania: 2 minut

Z pewnością ładnie jest rozpocząć tekst jak w starych księgach z wyróżnioną pierwszą literą (inicjałem).

Z pozoru może się to wydawać trudne jednak w cale takie nie jest, znając odpowiednie metody można taki efekt uzyskać prosto i szybko. Od razu podkreślam, że nie potrzebujemy do tej transformacji JavaScript a jedynie CSS. Oczywiście w tym pierwszym języku również możemy uzyskać teki efekt, ale będzie to dużo bardziej skomplikowane.

Sposób z zastosowaniem dodatkowej klasy

W tym przypadku pierwsza litera będzie znajdowała się pomiędzy znacznikami <span>. Dzięki czemu będzie mogła mieć inne właściwości niż pozostała część tekstu. Wadą tej metody jest to, że znaczniki trzeba dodać samodzielnie.

Przykład:

L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.

W celu uzyskania takiego efektu w HTML:

<p class="first">
<span  class="firstcharacter" >L</span> orem ipsum dolor sit amet, consectetur 
adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus 
eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel 
malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim.
 Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a 
sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

Następnie w CSS:

.firstcharacter {
  color: #ff9700;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

Z użyciem :first-letter

Tym razem użyjemy pseudo elementu. Z jego pomocą przeglądarka sama bez naszej ingerencji jedyne na podstawie kodu CSS zmodyfikuję 1 literę tekstu w akapicie.

Przykład:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.

Jest to metoda z zastosowaniem pseudoklasy z odwołującej się do pierwszego elementu tekstu:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam 
vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. 
Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. 
</p>

W CSS

p:first-letter {
  color: #ff9700;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

Jak widać obie metody są dość proste. Pierwsza co prawda wymaga modyfikacji tekstu, jednak już drugą można nałożyć na zwykły tekst.

See the Pen first-letter by Aura (@Julka85) on CodePen.

Dowiedz się więcej:

dodatkowe tagi:
zmiana koloru pierwszej litery, głoski w słowie podczas gdy reszta pozostaje bez widocznych zmian
Inny styl dla pierwszej litery czyli ozdobny inicjał na stronie internetowej
pseudoelement pierwszej litery, Selektory stosowane w CSS i HTML
Kod CSS na inną pierwszą literę tytułu wpisu i gadżetu, ozdobna litera rozpoczynająca rozdział jak w starej książce
Liternictwo jak z starej książce na stronie internetowej, litera rozpoczynająca rozdział