2014. március 22.

Link effektek + hogyan kell

A linkeket kedvünk szerint variálhatjuk. A bejegyzés végén vannak kész kódok is, de ti is összeállíthattok egyedi nektek tetsző linkeket! c: Nyissatok meg egy html/javascriptet és kezdetben ezt illesszétek be. Későbbikekben a pontok közé írjátok a többi kódot.
<script type="text/css"> .... </script>

Itt van néhány lehetőség, hogy miképp lehet megváltoztatni a szöveg kinézetét:

text-shadow: 1px 1px 10px #666; --> árnyék kerül a szöveg mögé.
letter-spacing: 1px;--> A betűk közti távolság mérete. 4px-él ne állítsd nagyobbra, mert csúnya lesz. 
text-transform:uppercase;---> folytonos nagybetű
text-transform:lowercase; ----> folytonos kisbetű
border-bottom:#666 dotted 2px; --> pontozott vonal lesz a szöveg alatt.  
border-bottom:#666 dashed 2px; --> szaggatott vonal lesz a szöveg alatt. 
border-bottom:#666 double--> kettős vonal lesz a szöveg alatt.
font-family:verdana;--> A szöveg betűtípusa.
font-size: 10px; --> A szöveg mérete. 
background-color:#666;--> Háttér szín, itt a szöveg hátterénél lehet majd használni.

Így néz ki a link: 

A:link, A:visited, A:active{...}--> Ez az alap, ezen ne változtass. A pontozott rész helyére írd majd amit szeretnél átalakítani

Ha ráviszed az egeret:
A:hover { ...}---> A pontozott rész helyére írd amit akkor szeretnél, ha ráviszed az egeret.

Tehát valahogy így kell kinéznie a végeredménynek:

<script type="text/css"> 
 A:link, A:visited, A:active {text-shadow: 1px 1px 4px #666;} 
A:hover { text-shadow: 1px 1px 10px #666;}
</script>

Árnyék lesz a link mögött:
 

Nagybetűs az összes link:
 

Kisbetűs linkből nagybetűs lesz ha ráviszed az egeret:
 

Nagybetűs linkből kisbetűs lesz, ha ráviszed az egeret:
 

Pontozott vonal lesz a link alatt:
 

Pontoz ott vonal lesz a link alatt, ha ráviszed az egeret:
 

Megnő a link betűtípusa, ha ráviszed az egeret:
 

6 megjegyzés: