Efekty linków (style):

<-- wstecz

Efekty linków są to takie style, dzięki, którym po najechaniu na napis (link) mamy taki ładny efekt np. napis zmienia kolor, pogrubia się itd.

Co, gdzie, jak?
Wybierz sobie któryś z efektów, skopiuj kod z ramki pod nim. Następnie otwórz Edytor HTML --> Strona główna w panelu administracyjnym Twego bloga. Kod wklej gdzieś pomiędzy tagami <HEAD> a </HEAD>. I gotowe!
Możecie eksperymentować z kolorami:)

1. Kolorowy [zobacz]

<style TYPE="text/css">  <br><br> </style><script src="http://republika.pl/listeczek/dodatki/tecza.js"></script> <br>

2. Przekreślenie [zobacz]

<STYLE type=text/css> A:link{color:black ;text-decoration:none} A:visited{color:black ;text-decoration:none} A:active{color:black ;text-decoration:none} A:hover{text-decoration:line-through;} TD, P, A, DIV {font-family: verdana; color: #000000;line-height: 13px; font-size: 10px;} }--> </style> <br>

3. Zmiana koloru [zobacz]

<style> A:link { text-decoration:none; color:"#000000" } A:visited { text-decoration:none; color:"#000000" } A:hover { text-decoration:none; color:"#ffccff"; } </STYLE>

4. Cień od dołu [zobacz]

<style> A:link { COLOR: #000000; TEXT-DECORATION: none; } A:visited { COLOR: #000000; TEXT-DECORATION: none; } A:active { COLOR: #000000; TEXT-DECORATION: none } A:hover{color:#000000; text-decoration:none; height:0; filter:DropShadow(Color=#ffccff, OffX=2, OffY=2, Positive=1); } </STYLE>

5. Zamglenie z dwóch stron [zobacz]

<style type="text/css"> body, p, td {font-family: verdana, arial, tahoma; font-size: 10px; line-height:15px ; color: #white;cursor:default} A:link {COLOR: #000000; HEIGHT: 1px; TEXT-DECORATION: none; } A:visited {COLOR:#000000; HEIGHT: 1px; text-decoration: none;} A:active { COLOR:#000000; HEIGHT: 1px; TEXT-DECORATION: none; } A:hover { FILTER: alpha(Opacity=100, FinishOpacity=3, Style=3); CURSOR: hand; COLOR: #000000; TEXT-DECORATION: none} </STYLE>

6. Zamglenie z prawej [zobacz]

<STYLE type=text/css> BODY {FONT-SIZE: 10px; COLOR: #000000; LINE-HEIGHT: 10px; FONT-FAMILY: verdana;} P {FONT-SIZE: 10px; COLOR: #000000; LINE-HEIGHT: 10px; FONT-FAMILY: verdana;} TD {FONT-SIZE: 10px; COLOR: #000000; LINE-HEIGHT: 10px; FONT-FAMILY: verdana;} A:link {COLOR: #000000; HEIGHT: 1px; TEXT-DECORATION: none; } A:visited {COLOR: #000000; HEIGHT: 1px; text-decoration: none;} A:active { COLOR: #000000; HEIGHT: 1px; TEXT-DECORATION: none; } A:hover { FILTER: alpha(Opacity=100, FinishOpacity=3, Style=1); CURSOR: help; COLOR: #000000; TEXT-DECORATION: none} </STYLE>

7. Od tyłu [zobacz]

<style> A:link{color:#000000;text-decoration:none} A:visited{color:#000000;text-decoration:none} A:active{color:#000000;text-decoration:none} A:hover{color:#000000; height:4; filter: flipH; cursor:e-resize} </style>

8. Blur czarny [zobacz]

<STYLE type=text/css> H1 {FONT-SIZE: 12px; COLOR: #C0C0C0} A {FILTER: glow(color=#666666, strength=1); COLOR: black; HEIGHT: 12px; FONT-WEIGHT: normal; TEXT-DECORATION: none} A:hover {text-decoration:none; height:0; filter:blur; color: black;} TD {FONT-SIZE: 11px; COLOR: black; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif} </STYLE>

9. Blur biały [zobacz]

<STYLE type=text/css> H1 {FONT-SIZE: 12px; COLOR: #C0C0C0} A {FILTER: glow(color=#000000, strength=2); COLOR: #FFFFFF; HEIGHT: 12px; FONT-WEIGHT: normal; TEXT-DECORATION: none} A:hover {text-decoration:none; height:0; filter:blur; color: #ffffff;} TD {FONT-SIZE: 11px; COLOR: #66FFFF; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif} </STYLE>

10. Promienie [zobacz]

<style>  </STYLE>

11. Promienie2 [zobacz]

<style TYPE="text/css"> A:link { color: black; text-decoration: none;} A:visited { color: orange; text-decoration: none;} A:hover {FILTER: glow(color=orange, strength=6); CURSOR: se-resize; COLOR: black; HEIGHT: 0px; TEXT-DECORATION: bold} TD, P, A, B, DIV, body {font-family: verdana; color: black; font-size: 11px} </style>

12. Inny cień od dołu [zobacz]

<STYLE type=text/css> A {COLOR: #ffffff; TEXT-DECORATION: none; FONT-WEIGHT: bold} A:hover {COLOR: #ffffff; TEXT-DECORATION: none; FONT-WEIGHT: bold; filter:shadow(color=#898989,offX=2,offY=2); height:2; } TD {FONT-SIZE: 11px; COLOR: #d0d0d0; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif} </STYLE>

13. Ramka [zobacz]

<style> A:link {text-decoration:none; height:0; font-weight:normal; color:#000000} A:visited {text-decoration:none; height:0; font-weight:normal; color:#000000} A:hover { color: #000000; border: 1px solid #000000; background-color: #C9966C } </style> <style type="text/css"> body, p, td {font-family: Verdana, Tahoma, Lucida Sans Unicode, ; font-size: 11px; line-height:11px ; color: #000000 ;cursor:crosshair} A:link {COLOR: #C9966C; HEIGHT: 1px; TEXT-DECORATION: none;} A:visited {COLOR: #C9966C; HEIGHT: 1px; text-decoration: none;} A:active { COLOR: #000000; HEIGHT: 1px; TEXT-DECORATION: none;} A:hover {color: #FFFFFF; filter:none(color='000000', strength=05); height:0;text-decoration: none; cursor:crosshair;}  </style>

14. Ramka przerywana [zobacz]

<style> A:link {text-decoration:none; height:0; font-weight:normal; color:#000000} A:visited {text-decoration:none; height:0; font-weight:normal; color:#000000} A:hover { color: #000000; border: 1px solid #000000; background-color: #C9966C } </style> <style type="text/css"> body, p, td {font-family: Verdana, Tahoma, Lucida Sans Unicode, ; font-size: 11px; line-height:11px ; color: #000000 ;cursor:crosshair} A:link {COLOR: #C9966C; HEIGHT: 1px; TEXT-DECORATION: none;} A:visited {COLOR: #C9966C; HEIGHT: 1px; text-decoration: none;} A:active { COLOR: #000000; HEIGHT: 1px; TEXT-DECORATION: none;} A:hover {color: #FFFFFF; filter:none(color='000000', strength=05); height:0;text-decoration: none; cursor:crosshair;}  </style>

15. Podkreślenie [zobacz]

<style type="text/css"> A:link{color: #ff6600;text-decoration:none} A:visited{color: #ff6600;text-decoration:none} A:active{color: #000000;text-decoration:none} A:hover{color: #ff6600;text-decoration:underline;} </style>

16. Nadkreślenie [zobacz]

<style type="text/css"> A:link{color: #ff6600;text-decoration:none} A:visited{color: #ff6600;text-decoration:none} A:active{color: #000000;text-decoration:none} A:hover{color: #ff6600;text-decoration:overline;} </style>

17. Pogrubienie [zobacz]

<style type="text/css"> A:link{color: #ff6600;text-decoration:none} A:visited{color: #ff6600;text-decoration:none} A:active{color: #000000;text-decoration:none} A:hover{color: #ff6600;text-decoration:none; font-weight: bold} </style>

18. Czarno-biały (obrazek-link jest czarno-biały, a po najechaniu na niego myszką "dostaje" właściwych kolorów. Efekt ten jest dobry na stronkach, na których większość linków jest w postaci grafiki.) [zobacz]

<STYLE type="text/css"> A:link {COLOR: #FFFFFF; HEIGHT: 1px; TEXT-DECORATION: none; font-weight: none; filter: gray} A:visited {COLOR: #FFFFFF; HEIGHT: 1px; TEXT-DECORATION: none; font-weight: none; filter: gray} A:active {COLOR: #FFFFFF; HEIGHT: 1px; TEXT-DECORATION: none; font weight: none; filter: gray} A:hover {cursor: crosshair; filter: none; color: #000000; } </style>

19. Do góry nogami [zobacz]

<STYLE> A:link{color:#000000;text-decoration: none; height:0;} A:visited{color:#000000;text-decoration: none; height:0;font-weight:none} A:hover{color:#000000;text-decoration: none; filter:flipv; height:0; dropshadow(color=#ffffff,offX=1,offY=0);background-color:none;font-weight:none;} </style>

20. Powiekszające się litery [zobacz]

<style fprolloverstyle>A:hover {color: black; text-transform: uppercase; font-weight: 75} </style> <STYLE type=text/css> A:link { color: black; TEXT-DECORATION: none } A:visited { color: black; TEXT-DECORATION: none } A:hover { color: black; TEXT-DECORATION: none cursor: hand </style>

21. Podkreślenie i nadkreślenie jednocześnie [zobacz]

<STYLE type=text/css> A:link { color: black; TEXT-DECORATION: none } A:visited { color: black; TEXT-DECORATION: none } A:hover { color: black; TEXT-DECORATION: underline overline; cursor: crosshair </style>

22. Zmniejszający się tekst [zobacz]

<style type=text/css> body {scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #ABCDE6; scrollbar-shadow-color: #4F4F4F; scrollbar-arrow-color: #4F4F4F; scrollbar-track-color: #ABCDE6} body {background-color: #FFFFFF} a {color: #000000; text-decoration: none; font-weight: bold} a:hover {color: #4F4F4F; font-size: 11px; font-weight: bold; text-decoration: border; border: 2; position: relative; top: 2px; left: 2px; cursor: hand} td, div, p {font-size: 11px; color: #3F5666; font-family: Verdana, Tahoma, Arial, sans-serif} input, select, textarea {background-color: #ABCDE6; color: #4F4F4F; font-size: 11px; font-family: Verdana, Tahoma, Arial, sans-serif; border: 1px solid #4F4F4F} hr {color: #FFFFFF; height: 3px} </style>

^
Do góry