Zmiana wyglądu pierwszej litery – :first-letter

Zmiana wyglądu pierwszej litery

Kategoria wpisu Kurs CSS, Kursy, Pseudo elementy Tagi: , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 2 minutes

Z pewnością ładnie jest rozpocząć tekst jak w starych księgach z wyróżnioną pierwszą literą. 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

 

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:

Następnie w CSS:

Z użyciem :first-letter

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

W CSS

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.

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ł

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *