El teu blog de Linux en català

Enllaços macos amb CSS3

L’altre dia, el nostre company Aljullu ens demanava com havíem fet per fer l’efecte que veieu amb els enllaços a GNULinux.cat. He d’avisar-vos que aquest efecte és molt més bonic si el mireu amb el Google Chrome o amb la beta del Firefox4 (amb la 3.X només veureu part de l’efecte).

Això és un enllaç exemple

L’efecte només requereix CSS3, res de javascript o qualsevol altra cosa. És molt senzill: el que es fa és jugar amb els paràmetres que permeten girar el text i temporitzar l’efecte, de forma que s’aconsegueix un resultat molt maco (per descomptat això és a gust personal de cadascú). Només heu de jugar amb els paràmetres a i a:hover tot afegint l’opció transition, que és la vos permetrà jugar fàcilment amb això. A més, afegim un fons i arrodonim les vores, res de l’altre món. Ací teniu el codi exemple amb el qual heu de jugar, és el que fem servir a GNULinux.cat tal qual:

a    {
 display: inline-block;
 padding: 2px;
 outline: 0;
 color: #3a599d;
 -webkit-transition-duration: 0.25s;
 -moz-transition-duration: 0.25s;
 -o-transition-duration: 0.25s;
 transition-duration: 0.25s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 -webkit-transform: scale(1) rotate(0);
 -moz-transform: scale(1) rotate(0);
 -o-transform: scale(1) rotate(0);
 transform: scale(1) rotate(0);
}
a:hover {
 background: #F58324;
 text-decoration: none;
 color: #fff;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -o-border-radius: 4px;
 border-radius: 4px;
 -webkit-transform: scale(1.05) rotate(-1deg);
 -moz-transform: scale(1.05) rotate(-1deg);
 -o-transform: scale(1.05) rotate(-1deg);
 transform: scale(1.05) rotate(-1deg);
}

Tingueu en compte que els paràmetres -moz/-webkit/-o són paràmetres específics per als diferents navegadors que encara no han implementat la característica «transform» a nivell global (això és perquè alguns navegadors ho implementaren abans i altres més tard). Ara mateix hem de posar-ho per fer que la compatibilitat siga màxima (tot i que realment només es veurà bé amb els navegadors més moderns).

Això ho vam vore al bloc de David Walsh.

2 comments

    • Aljullu on 8 d'agost de 2010 at 11:58

    Reply

    Jejeje. Moltes gràcies per l’article! Ho tindré en compte en futurs webs que faci.

    • Pauet on 8 d'agost de 2010 at 19:00

    Reply

    A mi m’agrada fer servir l’Epiphany de tant en tant per variar del Firefox, i ja m’ho semblava que veia alguna cosa diferent, ara ho entenc.
    Que vol dir això doncs, que encara hi ha alguna mancança en el compliment dels estàndards al Firefox 3.X que no deixa veure be aquest efecte?

Deixa un comentari

Your email address will not be published.