Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.
Il CSS3 ha introdotto una nuova specifica per assegnare una traslazione alle immagini e agli elementi, la funzione translate()
Vediamo una semplice struttura che incorpora la funzione translate():
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
div.translate1
{
width:100px;
height:100px;
background-color:green;
/* Translate div */
-ms-transform:translate(25px,0px); /* motore trident -ms- IE 9 */
-moz-transform:translate(25px,0px); /* motore mozilla -moz- Firefox */
-webkit-transform:translate(25px,0px); /* motore webkit Safari e Chrome */
-o-transform:translate(25px,0px); /* motore presto -o- Opera */
transform:translate(25px,0px); /* generico */
}
div.translate2
{
width:100px;
height:100px;
background-color:red;
/* Translate div */
-ms-transform:translate(50px,0px); /* motore trident -ms- IE 9 */
-moz-transform:translate(50px,0px); /* motore mozilla -moz- Firefox */
-webkit-transform:translate(50px,0px); /* motore webkit Safari e Chrome */
-o-transform:rotatetranslate(50px,0px); /* motore presto -o- Opera */
transform:rotatetranslate(50px,0px); /* generico */
}
</style>
</head>
<body>
<div class="translate1">Il contenuto del documento</div>
<div class="translate2">Il contenuto del documento</div>
</body>
</html>
Il risultato del codice rappresentato è il seguente:
Analizziamo il codice:
transform:rotatetranslate(50px,0px) -> trasformazione:sposta(spostamento in x, spostamento in y)
I valori di spostamento possono essere espressi come lunghezza in px (pixel) em etc…
Per garantire la compatibilità anche con i browser più datati è necessario specificare in serie le istruzioni specifiche per i vari motori di rendering come indicato nelle righe qui sotto:
-ms-transform:translate(50px,0px); /* motore trident -ms- IE 9 */ -moz-transform:translate(50px,0px); /* motore mozilla -moz- Firefox */ -webkit-transform:translate(50px,0px); /* motore webkit Safari e Chrome */ -o-transform:rotatetranslate(50px,0px); /* motore presto -o- Opera */ transform:rotatetranslate(50px,0px); /* generico */
