Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Un logo 'elastico' con Flash e CSS

Realizzare un logo che si adatti alle dimensioni in un layout liquido e che non perda in qualità.
Realizzare un logo che si adatti alle dimensioni in un layout liquido e che non perda in qualità.
Link copiato negli appunti

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.

Ti consigliamo anche