Czy w CSS są jakieś sposoby nadawania konturów tekstowi w różnych kolorach? Chcę wyróżnić niektóre fragmenty tekstu, aby uczynić go bardziej intuicyjnym - na przykład nazwy, linki itp. Zmiana kolorów linków itp. Jest obecnie powszechna, więc chcę coś nowego.
329
Odpowiedzi:
W
text-stroke
CSS3 jest eksperymentalna właściwość webkit. Próbowałem ją uruchomić od jakiegoś czasu, ale jak dotąd nie udało mi się.Zamiast tego wykorzystałem już obsługiwaną
text-shadow
właściwość ( sądzę, że jest obsługiwana w Chrome, Firefox, Opera i IE 9).Użyj czterech cieni do symulacji obrysowanego tekstu:
Zrobiłem dla ciebie tutaj wersję demo
I ukryty przykład jest dostępny tutaj
Jak wspomniał Jason C w komentarzach,
text-shadow
właściwość CSS jest teraz obsługiwana przez wszystkie główne przeglądarki, z wyjątkiem Opery Mini. Tam, gdzie to rozwiązanie będzie działać na rzecz kompatybilności wstecznej (nie jest to tak naprawdę problem dotyczący przeglądarek z automatyczną aktualizacją), uważam, żetext-stroke
należy użyć CSS.źródło
text-shadow
do IE10. Co dziwne, IE9 obsługuje,box-shadow
ale nie obsługujetext-shadow
.text-shadow
. Wygląda na to, że obecnie (3 lata po opublikowaniu tej odpowiedzi) jest obsługiwana przez wszystkie główne przeglądarki, z wyjątkiem Opery Mini, która pokazuje „częściowe wsparcie” (ignorujeblur-radius
).text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
text-shadow
wsparcie, a nie na wsparcietext-stroke
. Który jest obecnie obsługiwany tylko przez webkit.Edycja:
text-stroke
jest teraz dość dojrzały i zaimplementowany w większości przeglądarek . To jest łatwiejsze, ostrzejsze i bardziej precyzyjne. Jeśli odbiorcy przeglądarki mogą to obsługiwać, powinieneś teraz użyćtext-stroke
najpierw zamiasttext-shadow
.Możesz i powinieneś to zrobić za pomocą
text-shadow
efektem bez żadnych przesunięć:Dlaczego? Kiedy zrównoważysz wiele efektów cienia, zaczniesz zauważać nierówne, poszarpane rogi:
Posiadanie efektów cienia tekstu w jednej pozycji eliminuje przesunięcia, co oznacza, że jeśli uważasz, że jest to zbyt cienki i wolałby ciemniejszy kontur, nie ma problemu - może kilkakrotnie powtórzyć ten sam efekt (zachowując tę samą pozycję i rozmycie). Tak jak:
Oto próbka tylko jednego efektu (u góry) i ten sam efekt powtórzony 14 razy (u dołu):
Uwaga: ponieważ linie stają się tak cienkie, bardzo dobrym pomysłem jest wyłączenie renderowania subpikseli za pomocą
-webkit-font-smoothing: antialiased
.źródło
font-smoothing
opcję, znacznie poprawiła wydajność w chrome!text-stroke
to nie to samo, co kontur przeztext-shadow
.text-stroke
nie ma opcji, aby kontur pojawił się poza tekstem, co oznacza, że kontur wlewa się do tekstu, przez co często wygląda naprawdę okropnie. Innymi słowy,text-stroke
nie zastępujetext-shadow
konturówŁatwy! SVG na ratunek.
To jest uproszczona metoda:
Oto bardziej złożone demo .
źródło
Możesz spróbować układać w stos wiele zacienionych cieni, dopóki cienie nie będą wyglądały jak obrys:
Oto skrzypce: http://jsfiddle.net/GGUYY/
Wspominam o tym na wypadek, gdyby ktoś był zainteresowany, chociaż nie nazwałbym tego rozwiązaniem, ponieważ zawodzi na różne sposoby:
źródło
Szukałem rozwiązania obrysu tekstowego w różnych przeglądarkach, które działałoby po nałożeniu na obrazy tła. myślę, że mam na to rozwiązanie, które nie wymaga dodatkowego narzutu, js i działa w IE7-9 (nie testowałem 6) i nie powoduje problemów z aliasingiem.
Jest to kombinacja użycia cienia tekstowego CSS3, który ma dobre wsparcie oprócz IE ( http://caniuse.com/#search=text-shadow ), a następnie kombinacji filtrów dla IE. Obsługa obrysu tekstu w CSS3 jest obecnie słaba.
Filtry IE
Filtr blasku ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) wygląda okropnie, więc go nie użyłem.
Odpowiedź Davida Hewitta polegała na dodaniu filtrów cienia w kombinacji kierunków. ClearType jest następnie niestety usuwany, więc otrzymujemy źle aliasowany tekst.
Następnie połączyłem niektóre elementy sugerowane w useragentman z filtrami dropshadow.
Składając to razem
Ten przykład to czarny tekst z białym obrysem. Korzystam z warunkowych klas HTML w celu dotarcia do IE ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ).
źródło
filter: glow(color=white,strength=1);
Po prostu dodając tę odpowiedź. „Głaskanie” tekstu to nie to samo, co „konspekty”
Konturowanie wygląda świetnie. Głaskanie wygląda okropnie.
Rozwiązanie SVG wymienione w innym miejscu ma ten sam problem. Czy chcesz zarys , musisz dwukrotnie umieścić tekst. Raz pogłaskał i jeszcze raz nie pogłaskał.
Gładzenie NIE JEST konspektem
PS: Chciałbym wiedzieć, jak ustawić SVG, aby miał odpowiedni rozmiar dowolnego dowolnego tekstu. Mam wrażenie, że dość skomplikowane jest wygenerowanie pliku svg, sprawdzenie go za pomocą javascript, aby uzyskać zakres, a następnie zastosowanie wyników. Jeśli istnieje łatwiejszy sposób niż js, chciałbym wiedzieć.
źródło
Mam lepsze wyniki z 6 różnymi cieniami:
źródło
źródło
Ta mieszanka dla SASS da płynne wyniki, przy użyciu 8-osiowej:
I normalny CSS:
źródło
Praca z grubszymi pociągnięciami staje się nieco niechlujna, jeśli masz przyjemność sassa wypróbować tę mieszankę, nie idealną i w zależności od masy pociągnięcia generuje sporo css.
źródło
Wiele cieni tekstu.
Coś takiego:
Demo: http://jsfiddle.net/punosound/gv6zs58m/
źródło
Text Shadow Generator
Jest tu wiele świetnych odpowiedzi. Wygląda na to, że cień tekstu jest prawdopodobnie najbardziej niezawodnym sposobem na zrobienie tego. Nie będę szczegółowo omawiał, jak to zrobić za pomocą cienia tekstu, ponieważ inni już to zrobili, ale podstawową ideą jest tworzenie wielu cieni tekstu wokół elementu tekstowego. Im większy kontur tekstu, tym więcej cieni potrzebujesz.
Wszystkie przesłane odpowiedzi (od tego postu) dostarczają statycznych rozwiązań dla cienia tekstu. Przyjąłem inne podejście i napisałem ten JSFiddle, który przyjmuje wartości konturu, rozmycia i szerokości jako dane wejściowe i generuje odpowiednią właściwość text-shadow dla twojego elementu. Wystarczy wypełnić puste pola, sprawdzić podgląd i kliknąć, aby skopiować plik css i wkleić go do arkusza stylów.
Niepotrzebny dodatek
Najwyraźniej odpowiedzi zawierające link do JSFiddle nie mogą zostać opublikowane, chyba że zawierają również kod. Możesz całkowicie zignorować ten dodatek, jeśli chcesz. To jest JavaScript z mojego skrzypca, który generuje właściwość text-shadow. Pamiętaj, że nie musisz implementować tego kodu we własnych pracach:
źródło
Miałem również ten problem i
text-shadow
nie było takiej opcji, ponieważ rogi wyglądałyby źle (chyba że miałbym wiele cieni) i nie chciałem żadnego rozmycia, dlatego moją jedyną opcją było wykonanie następujących czynności: 2 div, a dla div tła, umieść-webkit-text-stroke
na nim, co następnie pozwala na uzyskanie tak dużego konturu, jak chcesz.Korzystanie z tego, że udało się osiągnąć wyjście linii, ponieważ
stroke-width
metoda ta nie była opcja, jeśli chcesz, aby Twój tekst pozostać czytelne z bardzo dużym obrysie (bo zstroke-width
zarysem rozpocznie wewnątrz napis, który sprawia, że nie czytelne, gdy szerokość staje się większy niż litery.Uwaga: powodem, dla którego potrzebowałem tak grubego konturu, było emulowanie etykiet ulicznych na „mapach Google” i chciałem grubego białego aureoli wokół tekstu. To rozwiązanie działało dla mnie idealnie.
Oto skrzypce pokazujące to rozwiązanie
źródło
Oto plik CSS, mam nadzieję, że dostaniesz to, czego chcesz
źródło