2014. február 15., szombat

Link effektek ezresével

A kódokat aranymeli oldaláról szedtem. Nem mellesleg neki most lett új designja a gportálon. :)


Árnyék

<style type="text/css">
a:link, a:visited{
    color: #03c;
    -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     -ms-transition: 0.5s;
     transition: 0.5s;
}

a:hover {
    color: #fff;
    text-shadow: -1px 1px 5px #03c, 1px -1px 5px #03c;
}
</style>


Jobbra fordul (kicsit)

<style type="text/css">
a:link, a:visited{
     display: inline-block;
    color: #AF1212;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
   color: #AFAF12;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}</style>


Betűk közti távolság megnő

<STYLE type=text/css>
 A:hover {
letter-spacing:2pt; CURSOR: hand; COLOR: black; TEXT-DECORATION: none }
--> </STYLE>


Elhalványul

<style type="text/css">
a:link, a:visited {
    color: #A83026; /* link színe */
    font-family: Georgia, "Times New Roman", Times, serif; /* link betűje */
    font-size: 12px; /* betű mérete */
    text-decoration: none; /* aláhúzás ne legyen */
    filter: alpha(opacity=60); /* link elhalványítása */
    opacity: 1; /* link elhalványítása */
    -webkit-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Chrome, Opera) */     
     -moz-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Mozilla Firefox) */    
    -o-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Internet Explorer) */
}
a:hover {
    color: #0E7C9C; /* link színe */
    font-size: 12px; /* betű mérete */
    text-decoration: none; /* aláhúzás ne legyen */
    font-family: Georgia, "Times New Roman", Times, serif; /* link betűje */
    cursor: default;
    filter: alpha(opacity=90); /* link elhalványítása */
    opacity: .5; /* link elhalványítása */
     -webkit-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Chrome, Opera) */     
     -moz-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Mozilla Firefox) */    
     -o-transition: opacity .5s ease-in; /* Mennyi ideig tartson az átmenet. (Internet Explorer) */
}
-->
</style>


Nyomtatott betűs

<style type="text/css">
a:link, a:active, a:visited {color: #000000; font-size: 8pt; text-decoration: none;}
a:hover {color: #000000; font-size: 8pt; text-decoration: none; text-transform: uppercase;}
</style>


Megvastagszik

<STYLE type=text/css>
<!-- a:hover
{font-weight: bolder;  } -->
</STYLE>


Elhomályosul

<style type="text/css">
a:link, a:visited{
    color: #03c;
    -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     -ms-transition: 0.5s;
     transition: 0.5s;
}
a:hover {
    color: transparent;
    text-shadow: 0 0 5px #03c;
}</style>

Nincsenek megjegyzések:

Megjegyzés küldése