• Home
  • CSS
  • Dekoracja tekstu – nowe style css 2019

Dekoracja tekstu – nowe style css 2019



Nowe style, znaczniki, funkcjonalności – to jest to, co tygryski lubią najbardziej 🙂 W tym wpisie pokażę, jak stylować tekst za pomocą znacznika text-decoration oraz jakie nowe style dla linii (podkreśleń, przekreśleń) dostępne są od 2019 roku

text-decoration-line

Od dawna już możemy używać (dodawać lub usuwać) linii jako formy dekoracji tekstu. Za pomocą właściwości text-decoration-line uzyskamy taki efekt:

  • podkreślenie ( underline )

  • przekreślenie ( line-through )

  • linia nad tekstem ( overline )

  • style mieszane ( np. underline overline )



Aby usunąć podkreślenie linku, które domyślnie dodawane jest przez większość przeglądarek, wystarczy użyć właściwości text-decoration: none;



Kolor i styl podkreślenia / linii

Możemy też zmieniać kolor i kształt linii, za pomocą właściwości text-decoration-color oraz text-decoration-style uzyskując efekty jak poniżej:

  • niebieska stała linia ( underline solid blue )

  • zielona podwójna linia ( underline double green )

  • fioletowa linia kropkowana ( underline dotted purple )

  • pomarańczowa linia kreski ( underline dashed orange )

  • czerwona linia zygzak ( underline wavy red )



Nowe style CSS – 2019

Od niedawna jednak możemy również określić grubość linii – text-decoration-thickness, jej odległość od tekstu – text-underline-offset oraz sposób wyświetlania podkreśleń i linii nad tekstem w stosunku do znaków wystających w górę lub dół linii (pokażę to zaraz na przykładzie) – text-decoration-skip-ink.

Powyższe właściwości na dzień dzisiejszy (listopad 2019) odczytywane są niestety tylko w przeglądarce Firefox, ale miejmy nadzieję, że niedługo zostaną zaimplementowane również przez inne przeglądarki. Jeśli więc czytasz ten wpis używając innej przeglądarki, możesz nie zobaczyć efektu.



Grubość lini – text-decoration-thickness

Po co właściwie ustalać grubość linii? Przydaje się to bardzo podczas stylowania tekstu dla różnych rozdzielczości ekranu. O ile cienka linia wygląda dobrze na małym ekranie, o tyle na dużym może być słabo widoczna, przez co tekst traci swoje wartości wizualne. Na większym ekranie warto zastosować grubsze podkreślenie ( lub przekreślenie) tekstu.

mała czcionka ze standardowym podkreśleniem

większa czcionka ze standardowym podkreśleniem

większa czcionka z grubszym przekreśleniem

Ważne! Póki co, aby efekt był widoczny, najlepiej użyć zapisu skrótowego (ponieważ jest on w pełni wspierany przez przeglądarkę Firefox): text-decoration: underline solid blue 0.3rem



Odległość lini od tekstu – text-underline-offset

Za pomocą właściwości text-underline-offset możemy odsunąć / przesunąć podkreślenie tekstu w dowolne miejsce w górę lub dół ( style=”text-decoration-line: underline; text-underline-offset: 0.4em;” ) Efekt:

standardowy tekst z podkreśleniem

standardowy tekst z podkreśleniem



Rodzaj podkreślenia – text-decoration-skip-ink

Właściwość CSS text-decoration-skip-ink określa, w jaki sposób rysowane są podkreślenia i linie górne, gdy przechodzą nad / pod znakami wystającymi w górę lub w dół linii. Dostępne są dwie opcje: auto – podkreślenie jest przerywane jeśli nachodzi na nie litera, oraz none – podkreślenie jest jedną ciągłą linią.

parapsychologia – opcja auto

parapsychologia – opcja none



Więcej informacji na temat nowych styli znajdziecie tu: mozilla developer youtube

Jak oceniacie nowe style? Będziecie ich używać, kiedy już staną się bardziej dostępne?

Joanna

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *