Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

lunes, 30 de enero de 2012

Como crear texto curvo con CSS3

Mientras que CSS3 te permite rotar texto, es medianamente complicado el arreglo de un texto a lo largo de path curvo.

Como crear texto curvo con CSS3

Arctext.js es un script en jQuery inspirado en Lettering.js

Este script calcula la correcta rotación en CSS3 de cada letra a través del path curvo; distribuyendo así la letras en forma uniforme a través del arco (imaginario) según el radio informado.

Las siguientes opciones están disponible para implementar el efecto

radius  : 0,
// the minimum value allowed is
// half of the word length.
// if set to -1, the word will be straight.
 
dir     : 1,
// 1: curve is down,
// -1: curve is up
 
rotate  : true,
// if true each letter should be rotated.
 
fitText : false
// if you want to try out the
// fitText plugin (http://fittextjs.com/)
// set this to true.
// Don't forget, the wrapper should be fluid.

Sitio Web | Arctext
Share:

Publicidad

Estadísticas