Inne

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.

<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”.

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

komentarzy 8

  • Awatar
    Dawid Boho

    30 czerwca 2012 10:21

    Nic specjalnego.

    Odpowiedz
  • Awatar
    Mr.Mr

    30 czerwca 2012 10:41

    to raczej taka ciekawoskta dla mnie mniej doświadczonych niz „odkrywanie ameryki”

    Odpowiedz
  • Awatar
    engray

    30 czerwca 2012 14:24

    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!

    Odpowiedz
  • Awatar
    Michał Kortas

    30 czerwca 2012 15:05

    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.

    Odpowiedz
  • Awatar
    zigg

    30 czerwca 2012 16:29

    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…

    Odpowiedz
  • Awatar
    Mr.Mr

    30 czerwca 2012 18:19

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

    Odpowiedz
  • Awatar
    Krystian

    25 lipca 2012 10:04

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

    Odpowiedz

Zostaw odpowiedź