20. Estils variables

 

Índex

Variacions d'estil mitjançant pseudoelements

En parlar dels enllaços, hem vist que els navegadors els assignaven un color segon que el cursor fos damunt l'enllaç o que el document ja hagués estat visitat, i com aquest comportament podia ésser modificat amb el recurs als pseudoelements. El CSS 3 ha ampliat molt l'abast d'aquests pseudoelements, que poden aplicar-se a d'altres elements, i els navegadors moderns són capaços d'interpretar adequadament les especificacions variables.

Així, per exemple, podem modificar el color d'un text amb el pseudoelement :hover:

Exemple

I, d'una manera semblant, podem modificar les especificacions - per exemple l'opacitat - d'una imatge

Exemple

I la visibilitat d'un element:

Exemple

 

Animacions

Una animació és un efecte que permet que un element canviï gradualment d'un estil a un altre en interval determinat de temps. L'estructura bàsica és la següent:

Cal notar que

Podem aplicar aquest recurs als colors, a les mides, a les posicions i a la transparència i, en general, a qualsevol estil o combinacions d'estils que per la seva naturalesa sigui susceptible de gradualitat:

Exemple

Exemple

Exemple

 

Reiteració dels canvis

Podem establir que els canvis siguin reiterats afegint l'especificació

on n indica el nombre de cicles i infinite el canvi sense fi.

Exemple

 

Transicions

Les transicions són semblants a les animacions, de les quals es diferencien pel fet que van associades a un pseudoelement, que no admeten el control dels estats intermedis i que no es poden fer repetitives:

 

Estils variables en capes

Podem disposar dues o més capes en un document, superposades totalment o parcialment, i assignar a cada una un estil variable, bé de la propia capa, bé qualsevol objecte que s'hi contingui; aquestes assignacions són independents i les variacions que en resulten es presenten simultàniament.

Exemple