Standardowy wygląd linków jest raczej mało atrakcyjny. Co więcej różne proste zabiegi w postaci zmian koloru i text-decoration też stały się tak standardowe, że aż nudne. Co więc zrobić aby nasza witryna była bardiej atrakcyjna i przykuwała uwagę? Czas pobawić się grafiką. Na potrzeby naszego tutorialu przyjmiemy, że chcemy stworzyć wyróżniający się link do formularza kontaktowego. Od czego zaczynamy? Możemy np. udać się pod ten adres: findicons.com i wybrać jakąś ciekawą grafikę, która na zasadzie piktogramu będzie kojarzyć się z miejscem, do którego prowadzi nas link.
Kiedy mamy to już z głowy możemy podejść do spisania html’a.
1 | <a href="contact.html" class="mail_link"> |
Tak, to aż tak proste :) Przejdźmy więc do naszego arkusza stylów gdzie przeprowadzimy kilka operacji związanych z klasą „mail_link”.
1 2 3 4 5 6 | a.mail_link { display:block; width:128px; height:128px; background-image:url('folder/plik.png'); } |
Mając w ten sposób określoną klasę css możemy swobodnie przypisać ją do wybranego linku.
Krótkie wytłumaczenie kodu css.
Żeby w ogóle myśleć o takim sytlowaniu linków w naszym arkuszu stylów musimy przede wszystkim pamiętać o właściwości display. Dopiero przypisanie linkowi „display:block” sprawi, że będzie możliwe ustawianie jego wysokości i szerokości a to z kolei jest nieodzowne przy jego stylowaniu.
Powyższy kod css to tak na prawdę najprostsza z możliwych wersji kodu. Możemy tam jeszcze dodać dodatkowe style upiększające nasz link i oczywiście pseudoklasę :hover aby wyraźnie zasugerować odwiedzającym, że mają do czynienia z linkiem.
Zalety stylowania linków w css przy użyciu grafiki:
- CSS daje nam o wiele większe możliwości niż po prostu wrzucenie grafiki w tagi linku
- duże, wygodne linki w postaci grafiki dobrze sprawdzają się na urządzeniach mobilnych i jeśli projektujemy stronę z myślą o takich urządzeniach ciężko się obyć bez linków podobnych do tego z przykładu
- zawsze to coś innego niż zwykły link :)
Nic specjalnego.
to raczej taka ciekawoskta dla mnie mniej doświadczonych niz „odkrywanie ameryki”
Hej, ciekawy artykuł dla początkujących.
Tylko mam prośbę, dodaj „http://” przed findicons.com, bo teraz po kliknięciu na link prowadzi na stronę https://webroad.pl/findicons.com
Pozdrawiam!
Z tego względu, że używamy grafiki zamiast zwykłego tekstu powinniśmy dodać do odnośnika atrybut ALT, dzięki czemu stanie się zrozumiały dla botów wyszukiwarek, niepełnosprawnych, oraz osób, które korzystają z przeglądarek tekstowych.
Wchodząc pod link Stylowanie linków – koniec z nudnym tekstem miałem nadzieję na prawdę zobaczyć coś fajnego… i CSS3 i HTML5 przed nazwą artykułu, padłem… No sorry…
Dobra :) napiszę to wyraźnie
—-jeśli masz dużo doświadczenia to nie czytaj tego artykułu——–
nie każdy wie o takich prostych zabiegach, nie każdy ma doświadczenie, niektórzy ludzie dopiero rozpoczynają swoja zabawę z webmasterką
Pozdrawiam :)
z css’em mam do czynienia już kilka ładnych lat ale pierwszy raz widzę background-imgage :D jeżeli komuś to działa to szacun :)
Internetowy Chochlik :-) Już poprawiam. Dzięki za informację.
Jednym z bezpieczniejszych rozwiązań jest dodanie qr-codu. Wtedy jest to możliwe, nawet w formacie jpg i png.