Como "distorcer" uma div?

[FabianoSouza 5]

Seguinte, quero usar um "post-it" numa determinada página do site para exibir lembretes.

 

A ideia é usar a imagem de um post-it (exemplo http://globoesporte.globo.com/platb/files/1022/2011/09/post-it.gif)

como background de uma div.

 

Agora a "façanha" que preciso é fazer com que o texto dentro da div seja "distorcido" para acompanhar a curvatura da

imagem do background para tornar o efeito mais fiél.

 

Help!

 

Obrigado.

[Bruno Augusto 417]

Acho que combinando vários truques CSS3 seja possível. Nesse post o cara brincou bastante, mas ele não aplicou especificamente à texto e sim à elementos de bloco.

 

Mas não seria o caso, até mesmo por compatibilidade, que as imagens já tivessem o texto escrito?

[Odair Oliveira_163654 2]

Com css3 dá para usar a propriedade transform.

O css fica assim:

 

-moz-transform: scale() rotate(-10deg) translate(px, px) skew(deg, deg);
-webkit-transform: scale() rotate(-10deg) translate(px, px) skew(deg, deg);
-o-transform: scale() rotate(-10deg) translate(px, px) skew(deg, deg);
-ms-transform: scale() rotate(-10deg) translate(px, px) skew(deg, deg);
transform: scale() rotate(-10deg) translate(px, px) skew(deg, deg);

 

Dae da para você acrescentar sombras e outros efeitos. O único problema é a compatibilidade de navegadores.

[FabianoSouza 5]

Bruno, o texto é dinâmico. Será exibido (via AJAX) no objeto, no caso, numa DIV.Por isso preciso "deformar" a div (não o texto) para que, por consequencia, o texto fique meio "torto", seguindo a forma da imagem de fundo (o post-it).

Ah, o link que postou infelizmente não está abrindo.

 

Obrigado.

 

Odair, fiz dois testes:

1º) Apliquei o CSS que postou diretamente numa imagem (meu post-it). Não notei nenhum efeito.

2°) Criei uma DIV, coloquei a imagem como background e depois apliquei o CSS na DIV. Também não notei nenhum efeito.

 

Testei no IE e no Chrome.

 

Obrigado.

[Ignição 1]

Fabiano, da uma olhada.. ve se te ajuda:

 

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_matrix1

[Odair Oliveira_163654 2]

Fabiano, realmente, tinha esquecido dos valores 0px;

-moz-transform: scale(1) rotate(-10deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(-10deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(-10deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(-10deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(-10deg) translate(0px, 0px) skew(0deg, 0deg);

Dá uma olhada nesse site: http://css3generator.com/

[FabianoSouza 5]

Fabiano, da uma olhada.. ve se te ajuda:

 

http://www.w3schools...ansform_matrix1

 

Thiago, obrigado pela dica.

É algo bem neste "nipe" que estou precisando.

 

 

Valew!

 

Fabiano, realmente, tinha esquecido dos valores 0px;

 

-moz-transform: scale(1) rotate(-10deg) translate(0px, 0px) skew(0deg, 0deg);

-webkit-transform: scale(1) rotate(-10deg) translate(0px, 0px) skew(0deg, 0deg);

-o-transform: scale(1) rotate(-10deg) translate(0px, 0px) skew(0deg, 0deg);

-ms-transform: scale(1) rotate(-10deg) translate(0px, 0px) skew(0deg, 0deg);

transform: scale(1) rotate(-10deg) translate(0px, 0px) skew(0deg, 0deg);

 

Dá uma olhada nesse site: http://css3generator.com/

 

 

Ok, Odair. Farei novos testes.

Ah, o site que indicou vai quebrar vários galhos.

 

 

 

Obrigado!