CssWarp: Generador de texto curvo ¡Qué onda!

Por estos lares no se lleva mucho esa expresión de ¡Qué onda!, pero no se me ocurría nada mejor para describir lo que hace este generador llamado CSSWarp. Son los efectos de una Navidad repleta de excesos, así que me tendréis que perdonar por la falta de imaginación.

La utilidad es muy intuitiva, así que no merece la pena hacer un tutorial muy extenso para explicarla... y esta pereza también tiene la misma justificación que lo de la falta de imaginación temporal y espero pasajera.

El que se decida a usarla podrá comprobar que una vez que tenemos el diseño al gusto, el servicio nos proporciona todo el CSS y el HTML necesario para reproducir esa misma terminación en una página web.

Viene incluso con toda la estructura necesaria para montar la página completa, pero normalmente sólo nos interesará el estilo que podremos usar como viene -entre etiquetas style-o si lo vamos a usar con frecuencia, añadiéndolo a nuestra hoja de estilo. Evidentemente también necesitaremos la caja que monta todo y que es la que lleva la id denominada #warped.

Con esas dos cosas ya podremos hacer algo como esto:

Un texto con mucha ONDA

Si intentáis seleccionar ese texto comprobaréis que es tal y no una imagen. Usuarios de IE con versiones anteriores a la 9, absténganse por favor.

El sistema con el que se ha construido es simple pero muy farragoso y lo que hace es asignar una clase distinta para cada carácter (w1, w2, w3, etc.) mediante etiquetas span, para así poder cotrolar el estilo de cada uno individualmente. Luego con CSS se dan propiedades a todas esas clases que básicamente incluyen posicionamiento absoluto y giros mediante transform: rotate.

Recordar que podíamos hacer lo mismo con el plugin para jQuery llamado Lettering, pero este generador tiene la ventaja de que también nos monta el CSS.

Ni que decir tiene que podemos añadir propiedades adicionales a la id denominada #warped para cambiar un poco el estilo del texto y de la propia caja que lo contiene, pero bueno, lo digo.

El código que se nos facilita incluye prefijos para compatibilidad con los distintos navegadores, lo que unido al sistema utilizado provoca que se convierta en un churro interminable de código. Por eso es de agradecer que haya quién se moleste en crear generadores de este tipo para poder lanzar mensajes de manera algo distinta.

deseos para 2013 ! ¡ Con mis mejores

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Copy URL

Y muchos más artículos interesantes si nos sigues en...