Zastąpienie tekstu HTML obrazkiem z pomocą CSS

Kategoria wpisu Kurs CSS, Tło Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Dzisiaj pokażę wam jak zamienić zwykły tekst napisany w HTML na obrazek. Tak naprawdę to nie zmienimy tekstu w grafikę, ale z pomocą CSS zastąpimy go dowolnym obrazkiem. 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 jest ona zbędna. Jednak bardzo często, zdarza się że nie możemy lub nie chcemy ingerować bezpośrednio w ten kod.

Dobrym przykładem jest tutaj 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ępujemy dowolny tekst, wybranym przez nas obrazkiem

Takim dobrym przykładem gdzie ostatnio 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 umieszczenie go z pomocą CSS było w tej konkretnej sytuacji łatwiejszym i szybszym rozwiązaniem.

kod html tego obiektu:

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:

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 sprubujemy ukryć nasz tekst z właściwością text-indent oraz overflow. Z ich pomocą wysuniemy text z pola widzenia użytkownika witryny.

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

See the Pen Replace Text with IMG by Aura (@Julka85) on CodePen.0

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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *