Zmiana wyglądu pierwszej litery

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.

Drop Caps

 

dodatkowe tagi:
zmiana koloru pierwszej litery słowa, reszta bez zmian
Styl dla pierwszej litery inicjał
pseudoelement pierwszej litery, Selektory
Kod CSS na inną pierwszą literę tytułu wpisu i gadżetu
pseudoklasa na pierwszą literkę
przemiana wyglądu pojedynczej litery
ozdobna litera rozpoczynająca rozdział książki
ozdobna litera na początku tekstu
css first letter
Liternictwo jak z starej książki.
zmiana wyglądu pierwszej litery słowa, tekstu CSS HTML
litera rozpoczynająca rozdział