Zastąpienie tekstu grafiką na stronie

Dzisiaj pokażę wam jak zastąpić zwykły tekst (napisany HTML) na stronie internetowej dowolną grafiką bez konieczności bezpośrednio ingerowania w kod HTML.

Tak jak już wspomniałam nie będziemy nic zmieniać w HTML, PHP czy JS, ale z pomocą samego CSS. Teraz z pewnością spytacie „po co nam właściwie ta umiejętność”. Zapewne w przypadku kiedy możemy ingerować bezpośrednio w kod HTLM nie zawsze będzie nam ona potrzebna. Jednak zdążają się sytuacje kiedy w zależności od sytuacji (wielkości urządzenia) chcemy mieć np. tekst lub grafikę lub tekst nam się „nie podoba” a nie możemy bezpośrednio ingerować w kod witryny.

Dobrym przykładem będzie w tym miejscu też np. modyfikacja wtyczki do jakiegoś sytemu CMS. Teoretycznie możemy coś w niej zmienić, jednak każda jej późniejsza aktualizacja spowoduje utratę wprowadzonej zmiany.

Zastępowanie tekstu na stronie obrazkiem

Takim dobrym przykładem gdzie jakiś czas temu zdarzyło mnie się podmienić tekst obrazkiem jest poniższy przycisk:

Prawdę mówiąc w tym wypadku teoretycznie mogłam spróbować wstawić normalnie obrazek. Jednak ta metoda ingerowała by w strukturę kodu przycisku (oraz całego obiektu, w którym się on znajdował). Dlatego też z pomocą CSS było łatwiejszym i bezpieczniejszym rozwiązaniem.

Teraz zatem jak dojść do tego by ukryć tekst a w jego miejscu umieścić grafikę. Na nasze potrzeby przygotowałam własne „przyciski”:

Przykładowo kod 1 elementu wygląda następująco:

   <div class="row">
       <div class="col"> 
         <h4>span</h4>
        </div>
       <div class="col"><a href="#"><span>Tekst</span></a></div>
   </div>

Jak widać mamy tutaj sam tekst i kod bez żadnej grafiki. Teraz miejscem gdzie będziemy wstawiać obraz będzie ten fragment:

<a href="#"><span>Tekst</span></a>

Jak widać tak naprawdę jest to link (anchor) prowadzący w pewne miejsce. Tak więc jak usunąć z niego tekst tak by zaczął się prezentować jak na grafice?

Ukrywanie tekstu umieszczonego pomiędzy znacznikami <span>

Dużym ułatwieniem jest umiejscowienie napisu pomiędzy znacznikami <span>. W tym bowiem wypadku możemy użyć kodu:

a{
    background-image: url(../image/arrow.png);
    background-repeat: no-repeat;
    width: 45px;
    height: 43px;
    display: block;
    float:right;
    background-position: center;
}
span{
    display: none; /* ukrywamy tekst pomiędzy znacznikami <span> */}

W ten o to sposób ukryliśmy tekst i zostało nam jedynie tło o wymiarach 40px na 43px. I to właśnie wyświetla się na obrazku!

Przesunięcie tekstu z text-indent

Tym razem spróbujemy ukryć nasz tekst z właściwością text-indent oraz overflow (to będzie drugi „przycisk”). Z ich pomocą wysuniemy tekst z pola widzenia użytkownika witryny.

a {
    background:url(mojobraz.jpg) 0 0 no-repeat;
    display:block;
    width:200px;
    height:200px;
    text-indent:-99999em;  /* przesunięcie testu poza widoczne pole */    overflow:hidden; /* wszystko co nie mieści się w kontenerze jest niewidoczne */}

A tak to wygląda w praktyce (oczywiście po drobnych zmianach graficznych):

Te dwa przykłady stanowią punkt wejściowy do wielu innych ciekawych rozwiązań w CSS.