Upiększanie czcionek poprzez CSS

Zauważyłem ostatnio w sieci ciekawy trend zamieniania zwykłych tekstowych nagłówków, na nagłówki 'Flashowe'. Wygląda to zazwyczaj tak. Dzięki temu możemy cieszyć się na stronie (między innymi) czcionkami które trudno jest użyć 'standardowymi' metodami.

Oczywiście oprócz plusów, są też i minusy takiego rozwiązania (związane z użytecznością i dostępnością strony). Zobacz: "Flash to zło". Jednak wady tego rozwiązanie można z łatwością wyeliminować - wystarczy CSS.

Efekt jaki możemy uzyskać może wyglądać przykładowo tak:

"To jest przykładowy tekst"

Jak widać wykorzystałem tutaj standardowy tekst i nałożyłem na niego przeźroczystą grafikę. Ogranicza nas tutaj tylko nasza wyobraźnia - zobacz więcej przykładów.

Jak uzyskać taki efekt?

Nie jest to trudne... :)

<h3>To jest przykładowy tekst<span></span></h3>

Pusty element <span> jest tutaj najważniejszy. To jego umieścimy bezpośrednio nad tekstem i nadamy mu tło.

Całość kodu CSS odpowiedzialna za ten efekt wygląda tak:

h3 {  position:  relative;  color: #0096E4;  font-size: 30px;  font-family: 'Lucida Grande',Verdana,Helvetica,sans-serif;  letter-spacing: -3px;}h3 span {  display: block;  width: 100%;  height: 100%;  position: absolute;   left: 0;  top: 0;  background: url(tlo.png);}

W przypadku elementu nadrzędnego (tutaj <h3>), ważna jest pogrubiona część - dzięki temu będziemy mogli pozycjonować <span> względem niego.
Dalsza część dotyczy jedynie wyglądu tekstu.

W przypadku elementu podrzędnego <span> każda linia kodu jest niezbędna: najpierw ustalamy że <span> jest elementem blokowym, nadajemy mu określone rozmiary (tutaj dopasowane do elementu nadrzędnego), a następnie pozycjonujemy go w taki sposób, aby zakrywał nasz tekst.

Ten prosty sposób można wykorzystywać według własnych potrzeb w różnych sytuacjach. Należy tylko pamiętać o tym, że w przypadku IE6 zabawa z plikami .png będzie nieco utrudniona, ale możliwa. Drugim minusem tego rozwiązania jest nieco utrudniona możliwość kopiowania tekstu.

Jeśli umiejętnie wykorzystamy tą małą sztuczkę z CSS'em, to możemy uzyskać ciekawe efekty - wystarczy tylko, że dopasujemy nagłówki graficznie do reszty strony. Moim zdaniem to łatwiejszy sposób niż zabawa z Flashem ;)

Komentarze 148:

  • » Jan Koprowski: 02.09.2008 o 17:11

    Temat jest dość szczegółowo opisany na webhosting-u:
    http://webhosting.pl/Pokonac.przeklenstwo.Ariala.czyli.wlasne.czcionki.na.stronach.WWW

    W związku z tym iż tak jak piszesz nie można kopiować treści do schowka ulepszyłbym ciut sposób używając swfobject: http://code.google.com/p/swfobject/

    Można spróbować podmienić zawartość danego elementu danym obiektem flash, a jeżeli flash nie działa to wtedy nadać mu klasę "obrazka". Można też pomyśleć nad wykorzystaniem znacznika <noscript>

  • » Dominik Porada: 02.09.2008 o 17:14

    Pusty element <span> jest tutaj najważniejszy. To jego umieścimy bezpośrednio nad tekstem i nadamy mu tło.

    IMHO takie puste znaczniki są właśnie niedopuszczalne, pojęcie „semantyka” traci sens przy takim kodzie… Takie „bajery” już lepiej dodać w JavaScripcie — dodać <span /> podczas np. DOMContentLoaded.

    Bardzo ładny nowy design. :-)

  • » Riddle: 02.09.2008 o 17:15

    To dobry i używany b. często sposób. Ostatnio jednak warto inwestować czas i chęci w implementację Web Fonts. Safari już je ma, Opera chyba też, Firefox 3.1 i IE8 będą miały także.

    Dlatego zacząłem uważać, że sIFR to cute-hack, nie nadający się do projektów idących na produkcję.

  • » Dreamer: 02.09.2008 o 17:25

    No, ale Ty nadajesz tylko tło na napis i tyle. A chodzi o to, żeby używać czcionek dowolnych. Dlatego zaprzęga się flasha. Niestety w CSS jeszcze nie jest to możliwe. (Ale w CSS3 chyba tak, trzeba by sprawdzić).

    Po drugie do tego są specjalne skrypt, dzięki czemu jest to rzecz łatwa i szybka do zrobienia. No i zrobione są tak, że jeśli ktoś nie ma flasha tekst i tak będzie wyświetlony, ale standardowy.

    sIFR3 - coś takiego flashowego, korzystałem tylko z wersji 2, nie wiem jak tam 3 się sprawuje. (http://nettuts.com/javascript-ajax/how-to-implement-sifr3-into-your-website/
    FLIR - toto używa PHP, JS a nie flasha. Chociaż tekst trochę gorzej wygląda no i wolniejsze chyba.
    (http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/)

  • » Adriano: 02.09.2008 o 20:37

    Tak ogólnie to jest wpis o tym, jak delikatnie upiększyć tekst jedną z tych łatwiejszych metod równocześnie nie zaprzęgając do pomocy innych technologii - nie napisałem tego, ale to miałem na myśli :)

    Dziękuje za uzupełnienie tematu w komentarzach :)

  • » procek: 02.09.2008 o 23:03

    Należy przy tym pamiętać, że zbyt dziwaczny tekst staje się nieczytelny i wcale nie uważam, by Arial był przeklęty... Czy ktoś z was czytając książki chciałby co chwilę mieć jakieś inne dziwne czcionki? Top z takim napisem można od razu w PS czy Gimpie złożyć na 2 warstwach więc nie warto aż tak kombinować. Sztuczka z CSS ciekawa, ale to konkretne zastosowanie - wątpliwego sensu...
    http://kde.org.pl oto przykład jak czcionka nie powinna wyglądać...

  • » RoB: 02.09.2008 o 23:41

    Procek, na stronie kde.org.pl wszystko jest czytelne jak dla mnie i nie widzę problemu :)
    To już Twoja strona jest mniej cyztelna :)

  • » procek: 03.09.2008 o 00:21

    O czcionce pisałem. Chcesz screena? ;) Użyto tam tej samej czcionki, którą można spotkać w Linuksach w pewnych miejscach - jest ona nieczytelna, a wszystko przez to że wygląda jak cieniowana.

  • » RoB: 03.09.2008 o 11:28

    Aha, ja chyba nie mam tej czcionki w systemie i dlatego nie zauważyłem niczego konkretnego.

    ps. Adriano, coś z kanałem rss komentarzy jest nie tak. itemy nie powinny być odwornie? ;)

  • » Dominik Porada: 04.09.2008 o 15:52

    Adriano, popraw feeda. Już po raz trzeci dostałem ten wpis…

  • » Adriano: 04.09.2008 o 16:45

    @Dominik Porada: jeśli chcesz to zamień kanał RSS na ten z Feedburnera http://feeds.feedburner.com/adriano-blog. Może Twój czytnik nie radzi sobie z przekierowaniem kanału.

  • » Hadret: 20.09.2008 o 23:14

    A ja i tak nie lubię flasha :(

  • » Chris Trynkiewicz: 27.09.2008 o 02:25

    Fajny efekt, ale... Czym sie w praktyce rozni od png przedstawiajacej to samo?
    To, ze tekst w tle jest w htmlu, jest istotne tylko dla wyszukiwarek, a te w przypadku png moga sobie go wyciagnac z alt i title.

  • » Adriano: 28.09.2008 o 01:01

    Chodzi o jedno: nie ma potrzeby generowania jakiegokolwiek pliku.

  • » Chris Trynkiewicz: 05.10.2008 o 01:32

    Racja. Chociaz moze nie do konca, bowiem i tak musimy generowac tlo dla kazdego tekstu (odpowiedniej szerokosci). Uzycie repeat-x nie wyjdzie chyba zbyt pieknie - bedzie widac schematycznosc w "upiekszeniu" napisu. Niemniej, ciekawe podejscie.

  • » Adriano: 31.10.2008 o 12:03

    W temacie czcionek: http://typeface.neocracy.org/

  • » Sylwia: 17.02.2009 o 02:29

    Przyznam, że niesamowita jest twoja znajomość css i pomysłowość. Nawet mi do głowy nie przyszło, że można takie cuda za pomocą css i grafiki zrobić.

  • » Szymon: 08.04.2010 o 08:56

    Kolejna metoda - która na pewno się przyda.

  • » zdzichu: 06.11.2011 o 12:13

    Trochę nie rozumiem tej podmiany z grafiką, po co się tak trudzić. Czy nie łatwiej zaprzątnąć JavaScript do roboty? http://cufon.shoqolate.com/generate/ Test tutaj generator, który przerabia większość czcionek na pojedyncze znaki graficzne, następnie za pomocą kodu JS można podmienić każdy znak na taki z tablicy znaków i wszystko z automatu.

Dodaj komentarz:

Dostępne tagi: [link]http://adres-www[/link] [quote]cytat[/quote] [code]kod[/code] [pre]tekst preformowany[/pre] [b]bold[/b]