Falista linia CSS. Style podkreślenie w Internecie

Od autora: Stylizacja podkreśleń linków jest dość skomplikowana zawód, a ja nieustannie zapominam, jaka metoda jest odpowiednia w jednej lub innej sytuacji. Na szczęście John Jameson pomoże nam szybko zrozumieć w swoim artykule.

Istnieje wiele sposobów na stylizowanie podkreśleń. Możesz pamiętać o artykule "Utwórz podkreślenie odniesienia do medium". Środek nie próbował zrobić czegoś z ram wychodzących, chcieli tylko stworzyć atrakcyjne podkreślenie w tekście.

Cienkie, czarne podkreślenia ze spacjami wokół liter z niższymi nutami - praca Vertery Marsina z artykułu Utwórz odwołanie do podkreślenia do medium.

Dobry standardowy podkreślenie, który jest również dobrym rozmiarem i pomija dolne zdalne części liter. Znacznie lepsze niż w większości domyślnych przeglądarek. Jak się okazało, średnia zderzyła się z wieloma problemami w drodze. A nawet dwa lata później nadal dobra stylizacja nacisku powoduje wiele problemów.

Cel

Dlaczego nie używać dekoracji tekstu: podkreślenie? Jeśli mówimy o idealnym scenariuszu, podkreślenia powinna:

pozycja poniżej linii bazowej;

pomiń dolne zdalne części liter;

zmień kolor, grubość i style;

idź do nowego ciągu;

pracować z dowolnymi tła.

Wierzę, że możemy dobrze wymagać tego od podkreślenia, jednak o ile wiem, nie ma intuicyjnego sposobu rozwiązania wszystkich tych zadań w CSS.

Podejścia

Jakie metody mamy do dyspozycji, aby podkreślić tekst? Pamiętałem:

dekoracja tekstowa;

zdjęcie w tle;

Filtry SVG;

Podkreślone.js (płótno);

tekst-Decoration- *

Przejdźmy na liście i rozważmy wszystkie zalety i minusy każdego podejścia.

Nieruchomość

Nieruchomość dekoracji tekstu jest najłatwiejszym sposobem na podkreślenia. Musisz zastosować tylko jedną własność. Na małym tekście taka linia będzie wyglądać normalnie, ale warto zwiększyć rozmiar czcionki i jest już niezdarny.

Największym problemem z właściwością dekoracyjną jest brak dostosowywania. Linia wykorzystuje kolor i rozmiar czcionki tekstu, do którego jest używany, a nie ma metody przeglądarki do przeglądarki. Nieco później porozmawiajmy bardziej szczegółowo na tej nieruchomości.

Plusy

po prostu użyj;

znajduje się poniżej linii bazowej;

pomiń dolne zdalne części domyślnych liter w Safari i IOS;

wskakuje na nowy ciąg;

działa z dowolnymi środowiskami.

Minuses.

nie przegapi rozszerzenia dolnych części liter w innych przeglądarkach;

nie można zmienić koloru, grubości i stylów.

Nieruchomość dolna graniczna

Właściwość Border-Bottom jest dobrą równowagą szybkości i dostosowywania. To podejście Używa sprawdzonego Ramki CSS.Więc możesz łatwo zmienić kolor, grubość i style. Wygląda to jak nieruchomość dolna graniczna na elementach inline:

Największym minus jest to, jak daleko znajduje się podkreśla z tekstu. Podnośnik znajduje się poniżej dolnych zdalnych części liter. Ten problem Jest rozwiązany, jeśli wykonasz element winiowy i zmniejszysz wysokość linii, ale potrafisz wskoczyć do nowych linii. Dobrze nadaje się do pojedynczych linii, ale nie więcej.

Ponadto, używając cienia tekstu, można ukryć części linii wokół dolnej dyszy. W takim przypadku będziesz musiał naśladować kolor tła, co oznacza, że \u200b\u200bmetoda działa tylko na jednorodnych środowiskach. Gradienty i obrazy nie pasują.

Na ten moment Do stylizacji podkreślenia jest 4 właściwości. Znacznie lepiej niż tylko dekoracja tekstowa.

Plusy

możesz użyć właściwości przejściowej i animować kolor i grubość;

domyślnie przeskakuje do nowych strun, jeśli element nie jest blokowy;

Minuses.

linia jest bardzo daleko i trudno go przenieść;

zbyt wiele niepotrzebnych właściwości musi być wykorzystane do podkreślenia dobrze wygląd;

słabe wybór tekstu podczas korzystania z cienia tekstowego.

Właściwość Box-Shadow

Nieruchomość cienia pudełka rysuje podkreśla dwa wewnętrzne cienie: tworzy prostokąt, a drugi ukrywa go. Oznacza to, że do prawidłowego działania metody potrzebne jest jednorodne tło.

Ta sama sztuczka z cieniem tekstu może być używana do symulacji przechodzenia wokół dolnego zakończenia liter. Jeśli kolor liniowy różni się od tekstu, albo jest dość cienkie, nie powinno być żadnych problemów, ile dzieje się z dekoracją tekstową.

Plusy

można umieścić pod linią bazową;

możesz pominąć calleje za pomocą tekstu-cienia;

można zmienić kolor i grubość;

wskakuje na nowe linie.

Minuses.

nie można zmienić stylów;

nie działa ze wszystkimi tłem.

Nieruchomość w tle

Nieruchomość background-Image jest najlepiej rozwiązać naszych zadań i ma bardzo niewiele minusów. Pomysł polega na tym, że utworzysz obraz za pomocą pozycji liniowej i położenia tła, co jest powtarzane wzdłuż osi poziomej wzdłuż ciągów tekstowych. Element musi być wyświetlany: inline;.

Poniższy demo nie używa gradientu liniowego. Aby utworzyć strome efekt, możesz użyć obrazu.

Plusy

może znajdować się poniżej linii bazowej;

możesz pominąć dolne objaśnienia za pomocą tekstu-cienia;

możliwe jest zmianę koloru, grubości (nawet na polpixel) i style;

współpracuje z obrazami użytkownika;

skacze nad nowymi liniami;

działa z dowolnym tłem, jeśli nie używa tekstu-cienia.

Minuses.

rozmiar obrazu może się różnić na różne sposoby na różne uprawnienia, przeglądarki i zwiększenie poziomów.

Filtry SVG.

Grałem z tą metodą. Możesz utworzyć element filtrujący w Inlaina SVG, który narysuje linię i rozszerzy tekst, aby ukryć te części linii, która musi być przezroczysta. Możesz przypisać identyfikator filtra i zapoznać się z nią w CSS za pomocą filtra: URL ("# SVG-LECTLE").

Co to jest plus - filtr dodaje przejrzystości bez polegania na cieniu tekstowym. To znaczy, możesz pominąć dolne kulki liter na dowolnym tle, w tym gradienty i obrazy! Poniższy przykład działa tylko z jednym ciągiem tekstu, więc bądź ostrożny.

I tak wygląda w Chrome i Firefoksie:

W IE, Edge and Safari z wsparciem, pojawiają się problemy. CSS jest trudny do przetestowania wsparcia filtrów SVG. Możesz użyć reguły @supports na filtrze, ale więc sprawdzasz tylko pracę samego odniesienia, a nie zużyty filtru, czy nie. Moja droga jest bardzo niegrzecznie pracuje z przeglądarkami, więc bądź podwójnie ostrożny.

Plusy

znajduje się poniżej linii bazowej;

pomija dolne objaśnienia;

można zmienić kolor, grubość i style;

działa na dowolnym tle.

Minuses.

nie przeskakuje nowych linii;

nie działa w IE, Edge i Safari, ale możesz określić dekorację tekstową jako folskę. Podnośnik w safari wyglądają świetnie.

Podkreślone.js (płótno)

Podnośnie.js to niesamowita biblioteka. Jestem imponującym, że poszedł Zhang, może zrobić z JS i dbałością o szczegóły. Jeśli nie widziałeś jeszcze demo technicznego podkreślenia.js, zatrzymaj się na minutę i zobacz. Sieć ma wspaniałą dziewięć minut na zasadach pracy, szybko go spędzę. Podkreślone są narysowane za pomocą płótna. Całkowicie nowe podejście, co zaskakująco działa dobrze.

Pomimo atrakcyjnej nazwy, to tylko demo techniczne. Oznacza to, że nie będziesz w stanie natychmiast umieścić biblioteki do projektu bez całej sterty zmian.

Ta biblioteka powinna być wymieniona tylko jako dowód koncepcji. Płótno ma potencjał do tworzenia pięknych, interaktywnych podkreśleń, ale dla właściwej pracy będziesz musiał napisać dodatkowy kod JS.

Tekst-Decoration- * Właściwości

Pamiętaj, że trochę później przeanalizujemy coś bardziej szczegółowo? Teraz to pójdzie. Nieruchomość tekstowa działa dobrze w sobie, ale możemy dodać kilka właściwości eksperymentalnych na więcej lepszy widok:

kolor dekoracji tekstu

tekst-Decoration-Skip

styl dekoracji tekstu

Nie radzę sobie z wyprzedzeniem, wiesz o wsparciu w przeglądarkach.

Nieruchomość kolorowa dekoracji tekstu

Właściwość kolorowa dekoracji tekstu umożliwia zmianę tekstu podkreślenia oddzielnie od koloru tekstu. Właściwości mają nawet dobre wsparcie w przeglądarkach. Działa w Firefoksie i z prefiksem w Safari. Jest twój minus - jeśli nie czyśnik linii wokół objazdów, w Safari leży na górze tekstu. Firefox:

Nieruchomość-dekoracja - pomiń

Nieruchomość informacyjna jest odpowiedzialna za pomijanie dolnych objazdów w podkreślonym tekście.

Nieruchomość jest niestandardowa iw tej chwili działa tylko w Safari. Aby pracować w innych przeglądarkach, musisz użyć prefiksu -Webkit-. W Safari, ta nieruchomość jest domyślnie włączona, dlatego podkreślenie pomijają niższe nowotwory nawet w miejscach, w których ta właściwość nie jest określona.

Jeśli używasz normalizacji, musisz to wiedzieć najnowsze wersje. Odłączyć właściwość do normalnej pracy we wszystkich przeglądarkach. Jeśli chcesz zwrócić te niemal magiczne podkreślenia, musisz włączyć tę nieruchomość.

Nieruchomość w stylu tekstowym

Nieruchomość w stylu tekstowym oferuje takie same podkreślanie jako nieruchomość w stylu granicy, ale dodaje nowy rodzaj - falisty. Możliwa wartość:

W tej chwili nieruchomość w stylu tekstowym działa tylko w Firefoksie, zrzut ekranu jest pokazany poniżej:

Wygląda na zestaw monochromatycznego nacisku?

Co jest nie tak?

Właściwości dekoracji tekstu- * są bardziej intuicyjne w porównaniu z innymi właściwościami do stylizacji podkreśla. Jednakże, jeśli inaczej spojrzenie na wymagania, które przedstawiliśmy wcześniej, można zauważyć, że przy pomocy tych właściwości niemożliwe jest zmianę grubości i pozycji. Po małym badaniu znalazłem te dwie nieruchomości:

szerokość podkreślenia tekstu

pozycja tekstowa

Wydaje się, że właściwości te zostały wyrzucone z wczesnej wersji CSS z powodu braku zainteresowania. Nie zastosowali. Hej, nie obwiniam za to.

wnioski

Więc jak najlepiej podkreślić tekst? Wszystko zależy od różnych czynników.

Dla małego tekstu zalecam użycie dekoracji tekstu i eksperymentalnej nieruchomości na dekoracji tekstowej, mając nadzieję, że będzie działać. W większości przeglądarkach wygląda tak - tak, ale zawsze było, że ludzie nie zwracali na to uwagi. Jeśli jesteś wystarczająco cierpliwy, istnieje szansa, że \u200b\u200bw krótkim czasie wszystkie twoje podkreślenia będą dobrze wyglądać, a nie będziesz musiał nic zmieniać.

Dla głównego tekstu użyj obrazu tła. Metoda działa, wygląda pięknie, a dla niego jest MIXINS SASS. Jeśli podkreśla jest subtelna, lub kolor różni się od tekstu, najprawdopodobniej możesz pominąć metodę tekstu-Shadow. W przypadku tekstu w jednym wierszu użyj dna granicznego i innych właściwości.

I pominąć litery liter na tle gradientu, spróbuj użyć filtra SVG. Lub po prostu nie mieszaj takich tła za pomocą podkreśleń. W przyszłości, gdy poprawia się wsparcie w przeglądarkach, możesz użyć właściwości tekstowych-* *.

Opis

Dodaje projekt tekstowy w postaci podkreślenia, przejazdu, linii nad tekstem i migającym. Jednocześnie możesz zastosować więcej niż jeden styl, licząc wartości przez przestrzeń.

Składnia

dekoracja tekstowa: [Blink || Linia || Overline ||. Podkreśl] | Brak |. dziedziczyć.

Wartości

Miga zestawy migające tekst. Ten tekst jest okresowo, od razu na sekundę znika, a następnie pojawia się w tym samym miejscu. Ta wartość nie jest obecnie obsługiwana przez przeglądarki i potępiona w CSS3, zaleca się stosowanie animacji w zamian. Linia tworzy skrzyżowany tekst (przykład). Linia overline przechodzi przez tekst (przykład). Podkreślenie ustawia podkreślony tekst (przykład). Żaden nie anuluje wszystkich efektów, w tym podkreślanie odniesienia, który jest domyślny. Wartość dziedzicza jest dziedziczona od rodzica.

HTML5 CSS2.1 tj. Cr Op Sa fx

Atak strategiczny

Model obiektu.

document.getElementByidByid ("ElementID") .Style.textdeCorage

document.GetElementByid ("ElementID") .Style.textdeCorageblink

document.getElementByid ("ElementID") .Style.textdeCorationlineLough

dokument.getElementByid ("ElementID") .Style.textdeCororationNone

document.getElementByid ("ElementID") .Style.textdeCorageorsence

document.getElementByid ("ElementID") .Style.textdeCorageundline

Przeglądarki

Internet Explorer przed wersją 7.0 nie obsługuje wartości dziedziczej. Linia uzyskana za pomocą wartości linii w IE7 znajduje się wyższa niż w innych przeglądarkach; W IE8 ten błąd jest naprawiony.

Umożliwia dokonanie innej podkreślenia w HTML niższym (podkreślenie), Top (Overline), przekreślony tekst (linia-przez) itp. Kompatybilny ten układ z poprzednią i będzie działał:

W drugiej linii pokazano, jak wszystko jest rejestrowane w jednym rzędzie z dekoracją tekstową.

styl dekoracji tekstu - podkreślenie tekstu

Opcja ustawia wygląd linii dekoracyjnej dla / odniesienia. W nowych zaleceniach CSS dodano faliste i podwójne wartości, teraz są tylko 5:

• stała - linia stała;
• podwójne - podwójne (z pierwszego przykładu powyżej);
• kropkowane - składa się z sekwencji punktów;
• przerywany - pozwala na wykonanie kropkowanego podkreślenia CSS;
• falista - spektakularna falista linia.

pozycja tekstowa - pozycjonowanie CSS podkreślenie

Za pomocą tej właściwości możesz kontrolować położenie linii w stosunku do czcionki glifu.
Dostępne są łączne 4 opcje:

• auto - znajduje się jak najbliżej tekstu tekstu;
• pod - pod najniższą granicą czcionki;
• w lewo i prawy - lewy / prawo do wpisów wyświetlanych pionowo.

Oto wizualna różnica między niższym tekstem podkreślenia za pomocą w obszarze A Auto:

Myślę, że różnica jest dość oczywista.

tekst-Decoration-Skip - Usuwamy podkreślenie dla przedmiotów

Korzystając z opcji, możesz anulować (pomiń) dekorowanie elementów Sznurek HTML.. Aby lepiej zrozumieć ważne wartości przestrzeni, obiektów, dekoracji pudełek, krawędzi, atramentu powierzymy obraz z ostatniej uwagi:

Oznacza to, na przykład za pomocą atramentu, możesz dokonać dolnej podkreślenia w CSS, które nie zostaną przekroczone ze znakami. Wartość obiektów pozwala na pominięcie elementów Inline (blok wbudowany) - wkładka, a linia stała zostanie przerwana w odpowiednim miejscu:

Parametry dekoracji pudełka, przestrzeni, krawędzi są znacznie gorsze wspierane przez przeglądarki, więc ich wynik jest czasami różny od oczekiwanego. Oto stan kompatybilności / wsparcia dekoracji tekstowej w momencie pisania artykułu:

Dodatkowe żetony do podkreślenia

Użytkownicy dla początkujących często zadają typowe pytania na ten temat, więc postanowiliśmy ich rozważyć. Ogólny przykład jest na samym dole po wyjaśnienia.

Jak usunąć uznane odwołanie

o: HOVER (dekoracja tekstowa: podkreśla;)

Oba przykłady poniżej pozwalają zrozumieć logikę pracy, gdy się unosiłeś: lub początkowo wskazujesz CSS podkreśla Linki, a następnie usuń go na HOVER lub odwrotnie.

Jeśli na ten temat pojawiają się inne pytania, pytaj ich w komentarze. Spróbujemy rozważyć później lub sugerujemy w odpowiedziach. Najważniejszą rzeczą w tej sprawie jest praktyka - spróbuj dodawać różne właściwości opcji Dekoracji tekstowej bezpośrednio w przykładach lub utwórz własny plik testowy. Mamy nadzieję na temat podkreślenia tekstu i linków w CSS / HTML stał się jasny.

Podkreślenie jest odpowiednio różnią się metodami jego stworzenia. Wymienione poniżej są kilka popularnych.

Za pomocą dekoracji tekstu.

Właściwość dekoracji tekstu z wartością podkreślenia dodaje nacisk na tekst; Ten rodzaj nacisku można zaobserwować do domyślnych odniesień. Linia utworzona w ten sposób jest równa szerokości tekstu i będzie taki sam kolor jak sama nagłówek. Możesz zmienić linię kolorów przez właściwość kolorów dekoracji tekstu. Przykład 1 pokazuje użycie dekoracji tekstu do elementu

.

Przykład 1. Za pomocą dekoracji tekstu

Wynik tego przykładu jest pokazany na FIG. jeden.

Figa. 1. Rodzaj linii utworzonej za pomocą dekoracji tekstu

IE i przeglądarki krawędzi nie obsługują właściwości kolorów dekoracji tekstu.

Przy użyciu dna granicznego

własność dno graniczne. Dodaje do elementu poniżej linii danej grubości, koloru i stylu. Taka linia ma całą dostępną szerokość, pomimo długości tekstu nagłówka (rys. 2).

Figa. 2. Widok linii utworzonej przez dno graniczne

Odległość od linii do tekstu można regulować za pomocą obiektu. padding-dno Jak pokazano w przykładzie 2.

Przykład 2. Korzystanie z dna granicznego

Działanie mowy kulturalnego w XXI wieku

Rzeczywiście, urządzenie tekstowe mit-FUPPING ilustruje dyskurs i daje mu jego dźwięk, jego własną postać.

Do linii znajdują się na szerokości tekstu, wystarczy włączyć nagłówek do elementu brunatnego, dodając nieruchomość do selektora H2 pokaz. z wartością wbudowanej bloku.

Zastosowanie :: Afterter i treści

Możesz także wykonać sztuczną linię przez połączenie właściwości. zawartość i pseudo-element :: po. . Wyprowadzą tylko pusty pseudo-element po tytule, a wygląd tego pseudo-elementu jest określony przez inne właściwości. Na rys. 3 przedstawia podobną linię.

Figa. 3. Linia stworzona przez :: po

Pozycja takiej linii w stosunku do tekstu jest ustawiona przez właściwość. dolny Z wartością ujemną, kolor liniowy przez własność tło. . W rzeczywistości okazuje się nie jest linią, ale prostokątny blok, więc używamy wypełnienia tła (przykład 3).

Przykład 3. Wykorzystanie :: po

Działanie mowy kulturalnego w XXI wieku

Rzeczywiście, urządzenie tekstowe mit-FUPPING ilustruje dyskurs i daje mu jego dźwięk, jego własną postać.

Jest grupa na różne sposoby podkreślać. Możesz zapamiętać artykuł Marsina Vicari "link Crafting podkreśla" na medium. Średnich deweloperów nie próbują zrobić czegoś szaleństwa, po prostu chcą stworzyć piękną linię pod tekstem.

Jest to najłatwiejsza podkreśla, ale ma odpowiedni rozmiar i nie pokrywa się do zdalnych elementów liter. I jest zdecydowanie lepszy niż domyślne podkreślenie w większości przeglądarek. Medium musiał stawić czoła trudnościom, aby osiągnąć swój styl w sieci. Dwa lata później nadal trudnomy zrobić piękne podkreślenie.

Cel

Co jest nie tak z zwykłą dekoracją tekstową: podkreślenie? Jeśli mówimy o doskonałym scenariuszu, podkreślenie powinno wykonać następujące czynności:

• umieszczony poniżej linii bazowej;
• pomiń zdalne elementy;
• zmień kolor, grubość i linię stylu;
• pracować z tekstem wielokresji;
• pracuj na dowolnym tle.

Wierzę, że są to wszystkie rozsądne wymagania, ale o ile wiem, nie ma intuicyjnego sposobu osiągnięcia tego za pomocą CSS.

Podejścia

Więc to jest różne metodyKtóre możemy wdrożyć podkreślenie w sieci?

Oto te, które uważam:

• dekoracja tekstowa;
• dno graniczne;
• pudełko-cień;
• zdjęcie w tle;
• filtry SVG;
• Podkreślone.js (płótno);
• tekst-Decoration- *.

Przeanalizujemy te metody po drugim i porozmawiamy o zawodach i wadach każdego z nich.

tekst dekoracji.

dekoracja tekstowa jest najbardziej oczywistym sposobem na podkreślenie. Stosujesz jedną właściwość i wystarczy. Na małych rozmiarach czcionek może wyglądać całkiem dobrze, ale zwiększyć rozmiar czcionki i taki podkreślenie zaczyna wyglądać niezręczne.

Największym problemem z dekoracją tekstową jest brak ustawień. Jesteś ograniczony do koloru i rozmiaru czcionki tekstu, a nie masz przejścia do przeglądarki, aby go zmienić. Nadal będziemy rozmawiać o tym bardziej szczegółowo.

• łatwy w użyciu;
• umieszczony poniżej linii bazowej;
• domyślnie niższe elementy usuwania w Safari i IOS;
• podkreśla tekst wielokresłowy;
• działa na dowolnym tle.

• nie przegapi niższych elementów zdalnych we wszystkich innych przeglądarkach;
• nie pozwala na zmianę linii kolorów, grubości lub stylu.

dno graniczne.

border-dno oferuje dobrą równowagę między prostotą a konfigurowalnością. Takie podejście wykorzystuje starej dobrej nieruchomości CSS dla granicy, oznacza to, że można łatwo zmienić kolor, grubość i styl.

Tak wygląda dno graniczne jak małe elementy.

Główną wadą jest odległość podkreślenia z tekstu, jest całkowicie niższa niż elementy usuwania. Można go naprawić, ustawiając elementy właściwości bloku inline i zmniejszając wysokość linii, ale potem stracisz zdolność do owinięcia tekstu. Dobre dla poszczególnych linii, ale więcej nie jest odpowiedni nigdzie.

Dodatkowo możemy użyć cienia tekstowego, aby pokrywać się częścią linii obok elementów substytucyjnych, naśladując go z tym samym kolorem co tła. Oznacza to, że ta technika działa tylko na prostym tle monochromatycznych, bez gradientów, wzorów lub obrazów.

W tej chwili wykorzystujemy już cztery właściwości do projektowania jednej linii. Jest o wiele więcej pracy niż po prostu dodaj dekorację tekstową.

• może pomijać zdalne elementy za pomocą cienia tekstowego;
• może zmienić kolor, wyrośność i linię stylów;
• umożliwia korzystanie z przejść i animacji kolorów i grubości;
• działa z tekstem wielokresji, jeśli wartość blokowania inline nie jest stosowana;
• działa na dowolnym tle, jeśli nie używasz cienia tekstowego.

• umieszczony zbyt niski i porusza się w złożonej metodzie;
• do prawidłowego działania używane jest wiele dodatkowych właściwości;
• podczas korzystania z cienia tekstu wybór tekstu wygląda brzydką.

box-cień

box-Shadow rysuje substytucję z powodu dwóch wewnętrznych cieni: jeden tworzy prostokąt, a drugi ukrywa go część. Oznacza to, że potrzebujesz monofoniczne tło Aby go pracować.

Możesz użyć tej samej sztuczki z tekstem-cieniem, aby wypełnić przepustki między elementami podkreślenia i zdalne. Ale jeśli kolor podkreśla różni się od koloru tekstu - lub jest po prostu dość cienkie, linia nie będzie miała zmierzyć się z elementami zdalnymi, jak przy użyciu dekoracji tekstu.

• umożliwia zmianę koloru i grubości linii;
• współpracuje z tekstem wielokresowym.

• nie pozwala na zmianę stylu podkreślenia;
• nie działa na żadnym tle.

zdjęcie w tle.

Metoda z wizerunkiem tła jest najbliższa naszym pragnieniu i ma minimalne braki. Ideą jest użycie linii liniowej i tła, aby utworzyć obraz, który powtarza się pod linią tekstową.

Aby pracować tym podejściem, konieczne jest, aby tekst był wyświetlany w trybie standardowym: Inline; .

Poniższa opcja jest wykonywana bez gradientu liniowego, dla efektów można dodać obraz tła.

• może być umieszczony poniżej linii bazowej;
• może pominąć zdalne elementy na koszt cienia tekstowego;
• działa z niestandardowymi obrazami;
• okłada kilka linii tekstu;
• działa na dowolnym tle, jeśli nie stosujesz tekstu-cienia.

• rozmiar obrazu może się różnić w zależności od rozdzielczości ekranu, przeglądarki i zoomu.

Filtry SVG.

Grałem dużo z tym sposobem. Możesz utworzyć małą literę SVG, która rysuje linię, a następnie rozszerza tekst, aby maskować część linii, którą chcemy przejrzeć. Następnie możesz ustawić filtr ID i zapoznać się z nią w CSS w przybliżeniu tak filtru: URL ('# SVG-LECTLINE').

Zaletą tego podejścia jest to, że przezroczystość jest osiągnięta bez stosowania tekstu-cienia, czyli, pomijamy zdalne elementy na dowolnym tle, w tym gradienty i obrazy tła! Działa tylko na oddzielnej linii tekstu, uważam go.

Tak wygląda w Chrome i Firefoksie:

Wsparcie w IE, Edge i Safari są problematyczne. Trudno jest przetestować wsparcie filtra SVG w CSS. Możesz użyć dyrektywy @Supports z filtrem, ale sprawdzi to tylko działanie łącza filtra, ale nie pracuje sam filtr. Moje próby zakończyły się wzajemną definicją możliwości przeglądarki, jest to namacalny brak metody.

• może być umieszczony poniżej linii bazowej;
• może przegapić zdalne elementy;
• umożliwia zmianę koloru, grubości i linii stylu;
• działa na dowolnym tle.

• nie działa z tekstem wielokresji;
• nie działa w IE, Edge i Safari, ale można użyć dekoracji tekstowej jako opcji kopii zapasowej, w Safari wygląda na godność.

Podkreślone.js (płótno)

Podkreślenie Fascynuje. Uważam to za imponujące, co Wentyla Geng zrobiła z posiadania JavaScript i dbałości o szczegóły. Jeśli nie widziałeś demo technicznego podkreślenia.js, rzuć odczytać i zdobądź minutę czasu. Istnieje również jej dziewięciominutowy raport na temat tego, jak to działa, ale opiszę krótki: podkreśla za pomocą elementów . To nowe podejście, które działa zaskakująco dobrze.

Pomimo nazwy wyzwania, podkreśla .Js to tylko demo techniczne. Oznacza to, że nie możesz po prostu zrobić i podłączyć go do swojego projektu bez zmiany kodu.

Postanowiłem wspomnieć o tym na dowodzie koncepcji Ma potencjał, aby stworzyć doskonałe interaktywne podkreśla, ale to sprawia, że \u200b\u200bmusisz napisać JavaScript.

Nowe właściwości dekoracja tekstowa

Pamiętasz, że obiecałem porozmawiać o dekoracji tekstowej. Nadszedł czas.

Samo nieruchomość działa świetnie, ale możesz dodać wiele właściwości eksperymentalnych do dostosowania widok zewnętrzny podkreślać.

• kolor dekoracji tekstu
• tekst-Decoration-Skip
• styl dekoracji tekstu

Ale nie raduj się zbyt wiele ... Obsługa przeglądarek - jak zawsze. Tak to idzie.

kolor dekoracji tekstu

Właściwość kolorowa dekoracji tekstu umożliwia zmianę poziomu podkreślenia oddzielnie od koloru tekstu. Wsparcie dla tej nieruchomości jest lepsze niż można się spodziewać - działa w Firefoksie i prefiks w Safari. To właśnie zaczep: Jeśli masz zdalne elementy, Safari umieści podkreślenia nad tekstem.

tekst-Decoration-Skip

Nieruchomość dekoracji tekstu obejmuje przejście zdalnych elementów w podkreślonym tekście.

Ta nieruchomość jest niestandardowa i działa teraz tylko w Safari, z prefiksem -Webkit. Domyślnie Safari aktywuje tę właściwość, więc zdalne elementy są zawsze skrzyżowane.

Jeśli używasz normalizacji, pamiętaj, że ostatnie wersje wyłączają tę właściwość dla samego zachowania przeglądarek. A jeśli chcesz podkreślić, nie wpłynąć na zdalne elementy, musisz go ręcznie aktywować.

styl dekoracji tekstu

Nieruchomość w stylu tekstowym oferuje takie same możliwości projektowania jak nieruchomość w stylu granicy, dodając falisty styl z wyjątkiem.

Oto lista dostępnych wartości:

• przerywany.
• kropkowany.
• podwójnie.
• solidny

Teraz nieruchomość w stylu tekstowym działa tylko w Firefoksie, oto zrzut ekranu:

Czego brakuje

Seria właściwości dekoracji tekstu- * jest znacznie bardziej intuicyjna do użycia niż inne właściwości CSS dla podkreślenia. Ale jeśli wyglądasz uważnie, nie wystarczy spełnić nasze prośby o ustawienie grubości lub pozycji linii.

Po małym badaniu znalazłem kilka właściwości:

• szerokość podkreślenia tekstu
• pozycja tekstowa

Najwyraźniej odnoszą się do projektów wczesnych CSS, ale nigdy nie zostały wdrożone w przeglądarkach z powodu braku zainteresowania.

wnioski

Jaka jest metoda podkreślenia najlepiej?

Dla małego tekstu zalecam użycie dekoracji tekstowej z optymistycznym dodatkiem dekoracji tekstu-skip. Wygląda trochę bez smaku w większości przeglądarek, ale podkreślenie w przeglądarkach był tak zawsze, a ludzie po prostu nie zwracają uwagi. Plus Istnieje zawsze szansa, że \u200b\u200bjeśli masz cierpliwość, ten podkreślenia będzie wyglądać dobrze bez potrzeby, aby coś zmienić, jak będzie to zrobione w przeglądarkach.

W przypadku podstawowego tekstu ma sens na używanie obrazu tła. To podejście działa, wygląda świetnie i jest dla niego miksery SAS. Zasadniczo możesz pominąć cień tekst, jeśli podkreśla jest cienkie lub scharakteryzowane przez kolor z tekstu.

Dla oddzielny ciąg Tekst użyj dna granicznego wraz z dodatkowymi właściwościami.

A jeśli potrzebujesz pomijania zdalnych elementów na tle gradientu lub obrazu, spróbuj użyć filtrów SVG. Lub po prostu unikaj używania podkreślenia.

W przyszłości, gdy wsparcie w przeglądarkach jest lepsze, jedyną odpowiedzią będzie zestaw właściwości tekstowej - *.

Polecam również zwracanie uwagi na artykuł Benjamin Woodroff CSS podkreśla, w którym są rozpatrywane te same pytania.