08. Regole CSS speciali

Regole at-rule

Le regole at-rule, riconoscibili perché iniziano con @, sono regole speciali che possono essere utilizzate per modificare il comportamento del CSS o per definire funzionalità aggiuntive.

Esistono alcune regole at-rule predefinite, che sono supportate da tutti i principali browser. Queste regole includono:

@import: importa un foglio di stile CSS esterno.
@charset: specifica il set di caratteri utilizzato dal foglio di stile CSS.
@media: specifica le condizioni in cui una serie di regole CSS deve essere applicata.
@font-face: crea un nuovo font personalizzato.
@keyframes: crea un'animazione CSS.

Ogni regola "at-rule" ha la sua sintassi e scopo specifici.

Esempio:

<!DOCTYPE html>

<head>

<title>Esempio semplice con keyframe</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

position: absolute;

animation: mymove 5s ease-in-out infinite alternate;

}

@keyframes mymove {

from {left: 0px;}

to {left: 500px;}

}

</style>

</head>

<body>

<h1>Animazione in HTML</h1>

</body>

</html>

In questo esempio la regola CSS associata al selettore di classe .box, richiama la regola at-rule di tipo @keyframe denominata mymove creando l'animazione.

La classe .box tramite l'attributo animation specifica alcune proprietà dell'animazione. Le principali proprietà gestite da questo attributo sono:

animation-name: il nome del @keyframe (mymove nel nostro esempio)
animation-duration: un valore espresso in secondi (5s nel nostro esempio)
animation-timing-function: il tipo di accelerazione dell'animazione; possibili valori sono: ease-in-out (esponenziale in entrata e in uscita), linear (accelerazione lineare), ease (accelerazione esponenziale)
animation-delay: il ritardo di inizio dell'animazione in secondi (ad esempio 1s)
animation-iteration-count: il numero di volte in cui l'animazione deve essere ripetuta; è possibile specificare infinite per infinite volte
animation-direction: i valori possibili sono normal, reverse o alternate.

Non è necessario inserire i valori per tutte le proprietà ma è preferibile rispettare l'ordine per evitare ambiguità.

Movimento diagonale

Per ottenere un'animazione nella quale un riquadro di dimensione 100x100 px si muove dal vertice basso sinistro a quello in alto a destro occorre utilizzare contemporaneamente i riferimenti relativi al margine superiore (top) e al lato sinistro (left).

Inoltre occorre calcolare la dimensione della finestra in termini di larghezza e altezza.

Per l'altezza il calcolo richiede di utilizzare una particolare unità di misura, detta vh. In tale unità di misura si ha che:

0vh: corrisponde al bordo superiore della finestra;
100vh: corrisponde al bordo inferiore della finestra.

Per la larghezza il calcolo richiede di utilizzare una particolare unità di misura, detta vw. In tale unità di misura si ha che:

0vw: è il margine sinistro;
100vw è il margine destro.

Per la larghezza è anche possibile operare in termini percentuali rispetto al contenitore padre.

La conversione in pixel si ottiene con la funzione calc() che può operare contemporaneamente su vh, vw, percentuale e pixel.

Esempio:

<!DOCTYPE html>

<head>

<title>Esempio semplice con keyframe</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

position: absolute;

animation: mymove 5s ease-in-out infinite;

}

@keyframes mymove {

from {

top: calc(100vh - 100px);

left: 0px;

}

to {

top: calc(0vh);

left: calc(100vw - 100px);

}

</style>

</head>

<body>

<h1>Animazione diagonale in HTML</h1>

</body>

</html>

In questo esempio il calcolo dei vertici tiene conto della dimensione del quadrato che viene animato. Il punto posizionato corrisponde al vertice alto/sinistro del quadrato.

Uso delle percentuali in @keyframe

L'at-rule @keyframe prevede anche la possibilità di specificare gli stili dell'animazione in varie fasi, indicate tramite una percentuale.

Esempio:

<!DOCTYPE html>

<head>

<title>Esempio semplice con keyframe</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

position: absolute;

animation: mymove 12s ease-in-out infinite;

}

@keyframes mymove {

0% {

top: calc(100vh - 100px);

left: 0px;

}

25% {

top: calc(0vh);

left: calc(100% - 100px);

}

50% {

top: calc(0vh);

left: calc(0%);

}

75% {

top: calc(100vh - 100px);

left: calc(100% - 100px);

}

100% {

top: calc(100vh - 100px);

left: 0px;

}

</style>

</head>

<body>

<h1>Animazione con incrocio in HTML</h1>

</body>

</html>

Pseudo-classi

Le pseudo-classi possono essere utilizzate in congiunzione con le regole CSS per ottenere effetti particolari.

Esempi di pseudo-classi sono le seguenti:

:hover: applicato quando l'utente passa il mouse sopra un elemento. È spesso utilizzato per creare effetti di espansione, come cambiare il colore di un collegamento quando il mouse ci passa sopra.
:active: applicato quando l'utente fa clic su un elemento o lo attiva in altro modo. È spesso utilizzato per evidenziare visivamente l'effetto di un clic su un collegamento o un pulsante.
:focus: applicato quando un elemento ottiene il focus, ad esempio quando un campo di input viene selezionato o un collegamento viene evidenziato tramite il tastiera.
:target: è utilizzata per selezionare un elemento HTML che è stato "indirizzato" (targeted) tramite un ancoraggio nell'URL del documento. In altre parole, questa pseudo-classe seleziona l'elemento corrispondente a un determinato identificatore presente nell'URL.

Esempio:

<!DOCTYPE html>

<head>

<title>Cambio forma al passaggio del mouse</title>

<style>

/* Stile iniziale del div */

.mio-div {

width: 100px;

height: 100px;

background-color: blue;

transition: width 0.3s, height 0.3s;

}