W dzisiejszym wpisie chcę Ci pokazać, jak w 2 linijkach kodu możesz dodać efekty do czcionek. Jeżeli nie jesteś zaznajomiony z Google Fonts to zapraszam do przeczytania artykułu Imperium czcionek.
Dla przykładu, z praktycznie zerowym wysiłkiem można uzyskać poniższy efekt:
See the Pen google fonts effects by Tomasz Wikło (@studioleopard) on CodePen.19725
Aby takie coś uzyskać, wystarczy do twojego zapytania Google Fonts API dopisać effect= wraz z listą efektów oddzielonych pionową kreską, jakie chcesz uzyskać.
See the Pen google fonts head by Tomasz Wikło (@studioleopard) on CodePen.19725
Teraz wystarczy dodać odpowiednią nazwę klasy do elementu HTML. Odpowiednia nazwa klasy składa się z przedrostka font-effect- po którym następuje nazwa efektu, który chcemy uzyskać. Dla przykładu, jeżeli nazwa efektu to shadow-multiple, to odpowiednią nazwą klasy będzie font-effect-shadow-multiple. Po kompletną listę dostępnych efektów wraz z nazwami klas odsyłam do dokumentacji Goolge Fonts Effects.
Wszystkie efekty działają jedynie z Google Chrome i Safari, obsługa większości efektów w innych przeglądarkach na chwilę obecną jest bardzo uboga. Czasami może się również zdarzyć, ze czcionki z efektami przy małych rozmiarach nie będą wyglądać poprawnie, szczególnie tyczy to się efektów 3d.
Pomimo tych mankamentów warto zwrócić uwagę co możemy uzyskać dzięki Google Fonts Effects. Zastosowanie w odpowiednim kontekście takich efektów jak Brick Sign, Ice czy Shadow Multiple może wprowadzić na Twoją witrynę niepowtarzalnego uroku.
A Tobie jakie efekty najbardziej przypadły do gustu?
Opublikowano 28 grudnia 2015 w kategorii blog, css.
