Umiemy stworzyć link, który po najechaniu na niego myszką zmienia kolor itp. – zostało to opisane w pierwszym z trików. Jednak zwykły odnośnik można jeszcze bardziej urozmaicić! Jego podkreślenie może być w innym kolorze niż cały odnośnik, dodatkowo może ono być przerywana linią.
Podkreślenie w innym kolorze (1)
Za chwilę wykonamy link, którego podkreślenie będzie w innym kolorze (niebieski) niż link (czerwony). Po najechaniu na link podkreślenie zniknie. Zanim jednak zabierzemy się do roboty, musimy wyobrazić sobie (tak tak, pomyśleć;) jak takie coś wykonać, jak to działa. Technika jest bardzo prosta: tworzymy zwykły link w kolorze niebieskim, z podkreśleniem (oczywiście musimy utworzyć wszystkie jego „stany” – czyli pseudoklasy). Przy pseudoklasie hover deklarujemy text-decoration:none, czyli brak podkreślenia.
| a:link {color:royalblue; text-decoration:underline} a:visited {color:royalblue; text-decoration:underline} a:hover {color:royalblue; text-decoration:none} a:active {color:royalblue; text-decoration:none} |
Tak zbudowany link będzie działał, podkreślenie będzie niebieskie, będzie znikało przy najecnaniu myszką. Pytanie jednak co zrobić, żeby cały link (oprócz podkreślenia) był w kolorze czerwonym …? Otóż pomiędzy znacznikami <a> i </a> musimy wstawić styl w znaczniku <span> deklarując w nim kolor odnośnika (w tym przypadku czerwony, czyli red), ale nie ustalając podkreślenia (UWAGA! Ponieważ obejmujemy stylem <span> tekst odnośnika, nie możemy użyć w znaczniku span text-decoration:none, ponieważ wtedy nawet po najechaniu podkreślenie nie pojawi się!). W ten sposób podkreślenie, które zostało zdefiniowane w deklaracji linków będzie niejako „wystawać” spod spodu i będzie w odpowiednich momentach (najechanie myszką) widoczne!
Uff… wreszcie koniec teorii! Niestety była ona niezbędna do zrozumienia tego czym się teraz zajmujemy. Obiecuję, że od tego momentu ograniczę teorię do minimum 🙂
| a:link {color:royalblue; text-decoration:underline} a:visited {color:royalblue; text-decoration:underline} a:hover {color:royalblue; text-decoration:none} a:active {color:royalblue; text-decoration:none} |
… i bezpośrednio w dokumencie, tam gdzie jest odnośnik …
| <a href=”jakasstrona.html”><span style=”color:red”>tekst odnośnika</span></a> |
Zobacz przykład: www.webinside.pl/materialy/rozne/link_podkreslenie1.html
Podkreślenie w innym kolorze (2)
Przedstawiony przed chwilą sposób jest dobry, pomysłowy, ale dosyć trudny do wykonania. Niedość, że z początku może troszkę trudno to zrozumieć, to jeszcze w każdym odnośniku trzeba wstawiać styl znacznikiem span. Dla kilku odnośników (np. w menu nawigacyjnym na stronie) nie jest to problemem, ale gdybyśmy chcieli aby wszystkie linki na stronie były takie, mielibyśmy naprawdę duuużo roboty. Jest jednak drugi, o wiele lepszy wg mnie sposób. Jest on lepszy o tyle, że nie trzeba wstawiać za każdym razem znacznika span, a poza tym po najecnaiu myszką kolor podkreślenia może się zmieniać NIEZALEŻNIE od koloru linka!
Możemy więc zrobić coś takiego (co poprzednim sposobem byłoby niewykonalne): czarny odnośnik z niebieskim podkreśleniem, po najechaniu myszką odnośnik robi się niebieski, a podkreślenie czarne.
Zabieramy się więc do pracy!
Już na początku wyjaśnię całą „tajemnicę”. Owe podkreślenie, które może być w różnych kolorach niezależnie od koloru linku to… tak, tak – po prostu dolne obramowanie! Jak już się pewnie niektórzy domyślają, musimy zwyczajnie zadeklarować kolory linków za pomocą pseudoklas, tylko że zamiast text-decoration:underline musimy napisać border-bottom:solid 1px royalblue.
| a:link {color:black; text-decoration:none; border-bottom:solid 1px royalblue} a:visited {color:black; text-decoration:none; border-bottom:solid 1px royalblue} a:hover {color:royalblue; text-decoration:none; border-bottom:solid 1px black} a:active {color:royalblue; text-decoration:none; border-bottom:solid 1px black} |
Już! Nasz piękny link jest gotowy!
Zobacz przykład: www.webinside.pl/materialy/rozne/link_podkreslenie2.html
Podkreślenie przerywaną linią
Skoro wiemy już, że „podkreślenie” hiperłącza można imitować ustalając dla niego dolne obramowanie, nic nie stoi na przeszkodzie abyśmy utworzyli podkreślenie przerywana linią. Wystarczy postąpić tak samo jak w poprzednim przykładzie, zmieniając jednak styl obramowania z solid na dashed. Kod jest bardzo prosty i czytelny, dlatego bez zbędnego pisania zaprezentuję go:
| a:link {color:black; text-decoration:none; border-bottom:dashed 1px royalblue} a:visited {color:black; text-decoration:none; border-bottom:dashed 1px royalblue} a:hover {color:royalblue; text-decoration:none; border-bottom:dashed 1px black} a:active {color:royalblue; text-decoration:none; border-bottom:dashed 1px black} |
Zobacz przykład: www.webinside.pl/materialy/rozne/link_podkreslenie3.html Jakie to jest proste, prawda? Oczywiście aby nasz link był jeszcze ładniejszy, można pozmieniać kolory itp. Dla wzbudzenia ciekawości powiem jeszcze, że dokładnie w TEN SAM sposób robi się nadkreślenie zamiast podkreślenia albo nawet całe obramowanie dookoła. Może ono być także kropkowane itp. Trzeba po prostu próbować…
