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?
