Czy przy wszystkich nowych funkcjach obramowania CSS3 ( -webkit
, ...) można teraz dodać obramowanie do czcionki? (Jak jednolita biała ramka wokół niebieskiego logo na Twitterze). Jeśli nie, czy są jakieś niezbyt brzydkie hacki, które dokonają tego w CSS / XHTML, czy nadal muszę uruchamiać Photoshopa?
491
DRAWING LETTERS AS OUTLINES
częścią)AKTUALIZACJA
Oto mieszanka SCSS do generowania obrysu: http://codepen.io/pixelass/pen/gbGZYL
TAK stare pytanie .. z zaakceptowanymi (i dobrymi) odpowiedziami ..
ALE ... Na wypadek, gdyby ktoś kiedykolwiek tego potrzebował i nie znosił pisania kodu ...
TO jest czarna ramka 2px z obsługą CrossBrowser (nie IE) Potrzebowałem tego dla czcionek @fontface, więc musiałem być czystszy niż poprzednie odpowiedzi ... Biorę piksel z każdej strony, aby upewnić się, że nie ma (prawie) żadnych przerw dla „ fuzzy "(handrawn lub podobne) czcionki. Można dodawać subpiksele (0,5 piksela), ale nie potrzebuję tego.
Długi kod dla samej granicy? ...TAK!!!
źródło
Być może możesz naśladować obrys tekstu, używając css
text-shadow
(lub-webkit-text-shadow
/-moz-text-shadow
) i bardzo niskiego rozmycia:Ale chociaż jest to szerzej dostępne niż
-webkit-text-stroke
własność, wątpię, aby było dostępne dla większości twoich użytkowników, ale może to nie stanowić problemu (pełna wdzięku degradacja i tak dalej).źródło
Aby rozwinąć więcej na temat niektórych odpowiedzi, które wspominały o -webkit-text-stroke, oto kod umożliwiający jego działanie:
Artykuł pogłębione o użyciu tekstu udaru jest tutaj oraz listę przeglądarek tekst wsparcie skok jest tutaj .
źródło
Wydaje się, że istnieje właściwość „obrysu tekstu”, ale (przynajmniej dla mnie) działa ona tylko w Safari.
http://webkit.org/blog/85/introducing-text-stroke/
źródło
Oto, czego używam:
źródło
Obrysuj czcionkę czcionką Less mixin
Oto MNIEJ mieszanka do wygenerowania obrysu: http://codepen.io/anon/pen/BNYGBy?editors=110
(jest oparty na odpowiedzi pixelass, która zamiast tego używa SCSS)
źródło
źródło
Stworzyłem porównanie wszystkich wymienionych tutaj rozwiązań, aby uzyskać szybki przegląd:
https://codepen.io/Grienauer/pen/GRRdRJr
źródło
Kiedyś próbowałem robić te okrągłe rogi i rzucać cienie za pomocą css3. Później okazało się, że jest nadal słabo obsługiwany (oczywiście Internet Explorer (y)!)
Ostatecznie próbowałem to zrobić w JS (HTML Canvas z IE Canvas), ale ma to duży wpływ na wydajność (nawet na moim komputerze C2D). Krótko mówiąc, jeśli naprawdę potrzebujesz efektu, zastanów się nad bibliotekami JS (większość z nich powinna być w stanie działać na IE6), ale nie przesadzaj z powodu problemów z wydajnością; jeśli nadal potrzebujesz alternatywy ... możesz użyć SFiR, a następnie PS it i SFiR it. CSS3 nie jest dziś gotowy.
źródło
Przepraszam za spóźnienie, ale mówiąc o cieniu tekstu, pomyślałem, że spodoba ci się również ten przykład (używam go dość często, gdy potrzebuję dobrych cieni do tekstu):
źródło