Linki w postaci grafiki – krótki tutorial dla początkujących

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.

Tak, to aż tak proste :) Przejdźmy więc do naszego arkusza stylów gdzie przeprowadzimy kilka operacji związanych z klasą „mail_link”.

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 :)