Interlinia tekstu
Zdarza się czytać dużą ilość tekstu i nasze oczy szybko się męczą. Oprócz zwiększenia rozmiaru czcionki, wybawieniem może być zwiększenie odstępu między wierszami tekstu. Jest to tak zwana interlinia (wysokość wiersza).
Aby zwiększyć interlinie należy użyć właściwości line-height. Podawana jest ona w procentach bądź w pikselach.
Poniżej podaje przykład strony, w której dodałem właściwość interlinii. Sprawdź!
practical-shirley-zgbv0
practical-shirley-zgbv0 by danielminschinski
Bez łamania!💪
Tekst na stronach internetowych jest potocznie mówiąc “łamany” tzn. zawijany do kolejnych linii. Z góry łamanie się tekstu narzucone jest przez szerokość kontenera. Tak tekst zachowuję się domyślnie i jest to naturalne.
Jednak jak się domyślasz chcielibyśmy zrobić na odwrót🙂 Tzn. zróbmy tak aby dany fragment tekstu nie był dzielony na dwa lub więcej wierszy. Aby uzyskać taki efekt używamy właściwości white-space (inaczej “spację”) z wartością nowrap (z ang. nie zawijać).
Skopiowałem powyższy przykład i dodałem w regule z klasą medium-line nową właściwość. Zobacz poniżej.
intelligent-payne-vzh01
intelligent-payne-vzh01 by danielminschinski
Tekst za długi❓ Trzy kropki i po sprawie…
W powyższym przykładzie zauważyłeś, że jeśli wyłączysz dla danych tekstów ich zawijanie (łamanie), a będą one szersze niż kontener, w którym się znajdują, to będą wystawać poza ten kontener.
Ciekawym sposobem na skrócenie tekstu jest użycie właściwości overflow: hidden; Wszystkie wystające teksty zostaną ucięte. Dodatkowym upiększeniem takiego rozwiązania jest dodanie kolejnej właściwość text-overflow: ellipsis; W miejscu przecięcia tekstu zostanie dodany znak “…” – tzw. wielokropek.
Tak jak zrobiłem ostatnio, bazuję się na powyższym przykładzie. Dodałem do klasy medium-line kolejne właściwości – popatrz na poniższy przykład
wandering-bash-psrr0
wandering-bash-psrr0 by danielminschinski
Zróbmy trochę l u z u między znakami 🅰 🅱 🆎
A może by tak dodać więcej luzu między znakami, słowami?
Przestrzenią możemy manipulować za pomocą właściwości letter-spacing oraz word-spacing. Ich wartości podajemy w pikselach.
Na bazie znanego nam przykładu zmodyfikujmy nasze przestrzenie😉
kind-cori-f2lj1
kind-cori-f2lj1 by danielminschinski
DUŻE czy małe litery❓ – transformacje tekstu
Dzięki właściwości text-transform z wartością uppercase możemy zdecydować, że dany tekst w sekcji bądź w elemencie ma być pokazywany za pomocą dużych liter (pomimo że w HTML są z małych).
Wartości dla text-transform to:
- uppercase – duże litery,
- lowercase – małe litery,
- capitalize – każda pierwsza litera wyrazu zostanie powiększona
Poniżej dodaję wam ostatni przykład w tym poście – zapraszam do zapoznania się z kodem:
trusting-dubinsky-7rvws
trusting-dubinsky-7rvws by danielminschinski
Ok, to by było na tyle😉
Nie dodałem osobnego ćwiczenia, ponieważ materiał który dzisiaj przedstawiłem jest dość łatwy i opierał się tylko na kolejnych właściwościach CSS.
W kolejnym poście postaram się Wam przedstawić materiał o grafice w tle – myślę że zagadnienie dość proste i przyjemne😃 Postaram się czasowo przyspieszyć dodawanie postów⏳
Polecam zapisywać się do Newslettera 
oraz śledzenia Fb
Miłego dnia wolnego! 😃👌
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA