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


29 czerwca 2012 / Mr.Mr


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


9 odpowiedzi na “Linki w postaci grafiki – krótki tutorial dla początkujących”

  1. Mr.Mr pisze:

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

  2. engray pisze:

    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!

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

  4. zigg pisze:

    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…

  5. Mr.Mr pisze:

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

  6. Krystian pisze:

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

  7. Jednym z bezpieczniejszych rozwiązań jest dodanie qr-codu. Wtedy jest to możliwe, nawet w formacie jpg i png.

Skomentuj Michał Kortas Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.