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 scala alle immagini e agli elementi, la funzione scale()
Vediamo una semplice struttura che incorpora la funzione scale():
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
div.scale1
{
width:100px;
height:100px;
background-color:green;
/* Scale div */
-ms-transform:scale(1,0.5); /* motore trident -ms- IE 9 */
-moz-transform:scale(1,0.5); /* motore mozilla -moz- Firefox */
-webkit-transform:scale(1,0.5); /* motore webkit Safari e Chrome */
-o-transform:scale(1,0.5); /* motore presto -o- Opera */
transform:scale(1,0.5); /* generico */
}
div.scale2
{
width:100px;
height:100px;
background-color:red;
/* Scale div */
-ms-transform:scale(2.1,1); /* motore trident -ms- IE 9 */
-moz-transform:scale(2.1,1); /* motore mozilla -moz- Firefox */
-webkit-transform:scale(2.1,1); /* motore webkit Safari e Chrome */
-o-transform:scale(2.1,1); /* motore presto -o- Opera */
transform:scale(2.1,1); /* generico */
}
</style>
</head>
<body>
<div align="center">
<div class="scale1">Il contenuto del documento</div>
<div class="scale2">Il contenuto del documento</div>
</div>
</body>
</html>
Il risultato del codice rappresentato è il seguente:
Analizziamo il codice:
transform:scale(2.1,1) -> trasformazione:scala(valore x,valore y)
La scala è un numero intero o decimale, IL DECIMALE VA INDICATO CON IL PUNTO NON CON LA VORGOLA.
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 in:
-ms-transform:scale(2.1,1); /* motore trident -ms- IE 9 */ -moz-transform:scale(2.1,1); /* motore mozilla -moz- Firefox */ -webkit-transform:scale(2.1,1); /* motore webkit Safari e Chrome */ -o-transform:scale(2.1,1); /* motore presto -o- Opera */ transform:scale(2.1,1); /* generico */
