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.

Amb aquest article iniciem un nou tipus de contingut a GNULinux.cat: apunts relacionats amb programació PHP, HTML(5), CSS(3) i Javascript. La qüestió és que totes aquestes eines també són lliures i són un camp que en general no hem tingut en compte.

A l’hora de dissenyar mitjançant CSS2 l’estil d’una taula, ens ha estat impossible fins ara definir un estil «automàtic» que controlara el color de les files d’una taula segons siguen parells o senars. O bé havíem de definir a cada fila l’estil que volíem aplicar o bé havíem de fer servir javascript. Amb CSS3 res d’això ja no és necessari: es poden definir els estils de les files parells i senars de la taula simplement fent servir un codi com el següent:

[sourcecode language=”css”]
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
[/sourcecode]

Amb aquest css i una taula com la següent:

[sourcecode language=”html”]
<table>
<th><strong>Empresa</strong></th>
<th><strong>Enviaments</strong></th>
<tr>
<td>Voluntaris</td>
<td>101823</td>
</tr>
<tr>
<td>Desconegut</td>
<td>73558</td>
</tr>
</tr>
<tr>
<td>Red Hat</td>
<td>70790</td>
</tr>
<tr>
<td>Novell</td>
<td>45349</td>
</tr>
</table>
[/sourcecode]

Obtenim això (tingueu en compte que la taula té altres estils propis, simplement vos heu de fixar en el fet que el color de les files és diferent sense haver aplicat cap estil a dins de la taula):

Per cert, hem activat l’extensió per al WordPress SyntaxHighlighter Evolved per posar el codi com ho veieu. Si vos interessa, un altre dia mostrarem com instal·lar-la i fer-la servir.

• Vist a davidwalsh