Curvando textos com CSS3 e JQuery – ARCTEXT.JS

imagem
5 coisas que cada ‘Mobile Design’ deve ter
21/01/2012
Esquemas de Cores Eficiente
Roda de Cores – Cores Complementares e Análogas
29/02/2012

Curvando textos com CSS3 e JQuery – ARCTEXT.JS

Enquanto CSS3 nos permite girar as letras, é bastante complicado organizar cada letra ao longo de uma trajetória de curva. Arctext.js é um plugin jQuery que permite que você faça exatamente isso. Baseado em Lettering.js, ele calcula a rotação direita de cada letra e distribui as letras igualmente entre o arco imaginário do raio dado.

 

COMO FUNCIONA?

A principal idéia por trás o plugin Arctext é para rodar cartas com CSS3 transforma, a fim de colocá-los ao longo de uma trajetória curva. A curva é sempre um segmento de um círculo (daí o arco) para os quais o raio pode ser especificado. O espaço e rotação para cada letra será calculada usando esse raio ea largura do texto.

As seguintes opções estão disponíveis:

radius  : 0,
// o valor minimo permitido é
// a metade do comprimento da palavra.
// se definido -1, a palavra ficara em linha reta.
dir     : 1,
// 1: curva para baixo,
// -1: curva para cima
rotate  : true,
// se ativado cada letra deverá ser "rodada"
fitText : false
// Se você quiser experimentar o
// plugin fitText (http://fittextjs.com/)
// definir como true.
// Não esqueça, o wrapper tem que ser fluido(fluid).

Artigo Original LINK

Douglas W. P.
Douglas W. P.
por quase todas as áreas de uma agência, viu que se identificava mais como Gaúcho de 24 anos, criou a Finalizart no fim de em 2008. Depois de passar por quase todas as áreas de uma agência, vi que me identificava mais como designer onde atuo até hoje, e sei fazer um bom café. Especialidades: HTML5, jQuery, VirtueMart, CSS, Semântica e Otimização SEO.

Deixe uma resposta