• 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 email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *