Zastąpienie tekstu HTML obrazkiem z pomocą CSS
Dzisiaj pokażę wam jak zastąpić zwykły tekst napisany w HTML (np. na przycisku) obrazkiem bez wprowadzania zmian bezpośrednio w kodzie strony.
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 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.
Co znajdziesz w tym wpisie
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:
<a href="index.php" target="_self"><span>sprawdź</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(../images/image.jpg);
background-repeat: no-repeat;
width: 40px;
height: 43px;
display: block;
}
span{
display: none;
}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. Z ich pomocą wysuniemy text z pola widzenia użytkownika witryny.
a {
background:url(mojobraz.jpg) 0 0 no-repeat;
display:block;
width:200px;
height:200px;
text-indent:-99999em;
overflow:hidden;
}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.