Texto vertical, con Query

Pues eso: con Query podemos convertir, de forma automática, un texto normalito horizontal en vertical. O convertir, al clickar sobre él, un texto horizontal en vertical.

Encontré esta maravilla mientras echaba un ojo al nuevo diseño de anieto2k, que nos remite a la página original del hack. He hecho mi prueba en Este Blog y, la verdad, es que me gusta, sí. Podéis descargaros los scripts en la web del hack

Pues nada. Para hacer algo semejante, podéis empezar por un

.- CSS: Que puede ser algo así (ésta es mi prueba):

}
p.flipv {
font-size: 18px;
color: #900;
float:right;
}
p.click {
font-size: 18px;
color: orange;
float:right;
}

p.italic {
font-style: italic;
}

Cambiad lo que queráis: estilo, colores, desplazamiento...

.- SCRIPTS: Necesitamos una librería, además del query el Flip, en otro caso no funciona...

<script src='http://.../js_jquery.js' type='text/javascript'/>

<script src='http://.../cvi_text_lib.js' type='text/javascript'/>

<script src='http://.../jquery.flipv.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;p.click&quot;).bind(&#39;click&#39;, function (){

$(this).text(&#39;Genial!&#39;).flipv().unbind(&#39;click&#39;);

return false;

});

});

</script>

En este último script, podéis cambiar el texto que se va a desplegar al clickar sobre él, así como este último.

.- HTML: Tneís dos posibilidades: de forma automática, usando una clase o de forma manual:

<p>usando 'flipv()' con un selector Query: clicka y mira cómo el texto horizontal pasa a vertical</p>

<tt>$('p').flipv();</tt>





<p class="click">¡clicka aquí y flipa!</p>





<p>Añade la clase 'flipv' al elemento</p>



<tt>&lt;p class='flipv'&gt;jQuery.flipv prueba&lt;/p&gt;</tt>

<p class="flipv"><canvas id="canvas672" width="80" height="163">jQuery.flipv Prueba</canvas></p>

Y una advertencia;: sólo vale para una línea de texto (así que no sale si nos ponemos a escribirle nuestra vida en verso, je )