

Cell. +39 3479684755
I CSS3 (Cascading Style Sheets versione 3) hanno introdotto la proprietà transform e, come relativo valore, alcune funzioni che consentono la trasformazione degli elementi a cui vengono applicate, ottenendo così degli effetti visivi che fino ad oggi avrebbero richiesto l’utilizzo di Flash o di Javascript.
Questa funzioni sono quattro: scale(), rotate(), skew() e translate().
I relativi esempi applicati ad un’immagine si trovano in questa pagina.
A ciascuna immagine, identificata tramite id, è stato applicato un collegamento ipertestuale (con href=”#” per attivare l’hyperlink senza dovere specificare una destinazione), dopo di che è stata applicata la proprietà transform alla pseudoclasse dinamica :hover (vedi più sotto per esaminare il codice).
Si osservi che l’effetto ottenuto con la trasformazione non influenza in alcun modo gli altri elementi della pagina, il cui posizionamento resta invariato.
La funzione scale() permette di ridimensionare l’elemento a cui è applicata la proprietà transform sulla base di un fattore di scala numerico: 1 equivale al 100% della dimensione originale, quindi un numero >1 determina un ingrandimento e un numero <1 determina un rimpicciolimento: ad es., 1.2 indica un aumento delle dimensioni del 20%.
Se viene specificato un solo fattore, questo viene applicato sia orizzontalmente sia verticalmente; ne possono essere indicati due diversi, in tal caso il primo sarà il fattore di scala orizzontale ed il secondo quello verticale.
Nell’esempio pubblicato, il codice CSS è il seguente:
a:hover img#foto1 {
transform: scale(1.1);
}
che comporta un ingradimento del 10% su entrambi gli assi, come è logico che sia per evitare una distorsione dell’immagine.
E’ disponibile per il download il nuovo programma dei corsi di web design organizzati a Vigevano (Pavia) da INSTANT WEBSITES, studio specializzato nella realizzazione di siti Internet e nella organizzazione di corsi di web design e sviluppo per il web.
Per ragioni di semplicità, il programma è unico per entrambi i corsi: Corso Base e Corso Avanzato, dal momento che il secondo costituisce un’estensione e completamento del primo tramite dei moduli concordabili in base alle proprie preferenze ed al tipo di approfondimento desiderato.
Il programma, molto dettagliato, può essere scaricato dalle pagine dedicate ai corsi dei nostri siti:
http://www.instantwebsites.it/corsi.html
http://www.corsiwebdesign.it/corsobase.php
http://www.corsidiwebdesignavigevano.it/corsi-di-web-design.php
oppure direttamente cliccando qui.
Ricordiamo che INSTANT WEBSITES organizza corsi individuali e di gruppo, anche con programma personalizzato.
Per maggiori informazioni è possibile consultare i nostri siti oppure contattarci direttamente: tel. 3479684755 / modulo di contatto
Abbiamo già esaminato in un precedente articolo il nuovo tag <video> introdotto con HTML5 e la sua utilizzazione per mostrare dei filmati in una pagina HTML senza usare Flash.
In modo del tutto analogo, con la nuova versione di questo linguaggio è stato introdotto il corrispondente tag audio che consente la riproduzione di file, appunto, di tipo audio.
La sintassi essenziale è molto semplice:
<audio src=”nomefile.mp3″></audio>
presupponendo che il file da eseguire si trovi nella stessa cartella della pagina in cui deve essere eseguito.
Per garantire la totale compatibilità del file audio con i diversi browser, soprattutto nella prima fase di diffusione della nuova versione, è opportuno rendere disponibile quest’ultimo in più formati e cioè: ogg, mp3 e wav.
In questo caso si aggiunge il parametro source che consente di specificare diverse alternative da gestire in sequenza e, facoltativamente, il parametro type (vedi più sotto per la spiegazione).
La sintassi di base diventerà dunque la seguente:
<audio>
<source src=”nomefile.ogg” type=”audio/ogg”>
<source src=”nomefile.mp3″ type=”audio/mpeg”>
<source src=”nomefile.wav” type=”audio/wav”>
</audio>