Un logo 'elastico' con Flash e CSS

Questo lo scenario. Decidi di passare da un layout a larghezza fissa ad uno liquido/elastico con dimensioni espresse in em (o in percentuale). Vuoi però che il logo che appare sulla testata si ridimensioni, scali in grandezza, senza perdere qualità  nel caso l'utente, ad esempio, decida di ridimensionare il testo.

John Oxton ha risolto così. Ha creato il logo con un programma di grafica vettoriale, lo ha importato in Flash e ha esportato il semplice movie che ne è risultato. Lo ha quindi inserito nella pagina in questo modo:


<div class="container">
<object type="application/x-shockwave-flash" data="logo.swf" >
<param name="movie" value="logo.swf" />
<param name="wmode" value="transparent" />
<img src="logo.gif" alt="John Oxton" />
</object>
<h1 class="alternate-text">John Oxton</h1>
</div>


Come si vede, nessuna dichiarazione esplicita per width ed height sul filmato Flash. Le dimensioni sono invece settate nel CSS, in em:


object {
width:21em;
height:4em;
}


Il risultato? Primo esempio, secondo e terzo. Si provi, ovviamente, a ridimensionare il testo con il browser per apprezzare l'effetto.