Leandro Medeiros

Archive for the ‘CSS’ Category

PCDTR – Substituindo texto por imagem

In CSS, Internet, Trabalho on dezembro 17, 2008 at 11:02 pm

Venho utilizando muito o script PCDTR – versão melhorada por um brasileiro – para realizar a tarefa de substituir texto por imagem (técnica chamada de “Dinamic Text Replacement) em títulos das páginas dos sites. Eu uso ele no meu site também. A vantagem desse recurso é que você pode usar a fonte que escolher, inclusive aquela que você tem certeza que o usuário não vai ter instalada no computador.

O trabalho dele é transformar a fonte, que deve estar dentro da pasta especifica, em imagens PNG, letra por letra. O resultado é ótimo, já que o fundo permanece transparente e tudo é ajustado por CSS, inclusive a formatação do texto. Interessante também é poder usa-lo em corpo de texto, apenas adicionando no CSS a classe que está usando, como eu estou fazendo nesse site que não fiz o design mas estou finalizando na agência.

Ah! como o script é em PHP – e posso até estar errado – somente consegui fazer ele funcionar se o arquivo index for PHP. Se alguem conseguir de outra forma, por favor me avise!

Integração com Twitter

In CSS, Internet, Javascript, jquery on dezembro 6, 2008 at 9:34 pm

O Twitter é talvez a ferramenta que atualmente melhor proporciona compartilhamento de conhecimento (além de cultura inútil, claro). Assim como o Youtube quando se popularizou, o Twitter começa a se tornar importante para a comunicação e aparecer cada vez mais nos sites. Ele é ao mesmo tempo uma ferramenta social fácil e rápida.

Logo que comecei a usa-lo, pensei em colocar no meu site, mas não queria colocar só o link para o meu Twitter. Eu queria mostrar no meu site o que eu publicar lá. Novamente usei Jquery.

Também já tinha visto alguém “twittar” uma música no Blip (depois falo melhor dele aqui). Pra isso você só precisa configurar no Blip sua conta do Twitter e ele publica pra você a música.
Uma simples pesquisa e achei o que precisava. O plugin é simples como sempre e muito customizável.
Você pode ver o resutado no meu site. No meu caso, queria apenas o último, configurei e alterei o CSS e ficou muito legal.

Testes com Plone

In CSS, Dicas, Tecnologia, Trabalho on agosto 24, 2007 at 11:00 pm

A algum tempo, conheci um sistema de gerenciamento de conteúdo (CMS para os íntimos) chamado Plone, que de cara me deixou muito impressionado. Até tenho alguma historia com ele, mas por uns motivos e outros acabei não me interessando em conhecer a fundo a ferramenta naquele momento. Agora, com a necessidade da criação de alguns sites nesse modelo, voltei a procurar ferramentas. Por acaso me lembrei que tinha instalado aqui no meu PC e resolvi fuçar mais… com algumas pesquisas mais diretas na internet, percebi que ele é muito mais personalizável do que eu achava… Nele é possível por CSS (o que é melhor ainda), transformar o visual completamente do site. Comecei a testar alguns “produtos” – como são chamados alguns complementos funcionais do Plone – pra saber quais as possibilidades de adaptação desse sistema construido para servir como portal institucional. Se tudo der certo, o Plone pode ser pra mim o CMS definitivo.

“Background” transparente

In CSS, Internet, pngfix, Trabalho, Webstandards on julho 1, 2007 at 3:40 am

Update: Pura coincidencia ou não, quando recebi o comentario do Vinicios estava trabalhando num projeto que necessitava usar transparência em uma div, mas o conteúdo que estaria dentro dessa div não poderia estar transparente, como acontecia neste post. Então, a solução que encontrei foi colocar o conteúdo em uma outra div e posicioná-la sobre a outra com a transparência. Dessa forma, apenas a div com o código vai ficar transparente. Talvez não seja a forma mais “elegante”… mas funciona!

Depois de algum tempo sem ter o que postar aqui no blog, finalmente achei algo interessante: Transparências. Como muitos já conhecem, para arquivos .PGN, existem alguns hacks e manhas para driblar o problema de transparência do IE. Mas e para “backgrounds”? Isso, imagens transparentes no fundo da página… se você usar uma imagem como background e usar o pngfix por exemplo, essa imagem não vai ficar transparente. Testei isso a muito tempo atrás e já sabia que não funcionava. Então fui à caça de uma solução. A curiosidade me levou a uma descoberta: com CSS é possível usar transparência nas imagens de fundo através de filtros. E isso funciona tanto para o adorado Firefox como pro IE. Na verdade é uma linha pra cada. Sem enrolar muito mais, vou colocar os códigos, que claro, devem ser adicionados ao restante dos atributos para a DIV desejada:

filter:alpha(opacity=30); > para o IE (de 0 à 100).
opacity: .30; > para o Firefox (de 0 à 1.0).

O interessante aqui, que eu gostaria de ressaltar, é que realmente funciona muito bem para os navegadores mais usados. Mas também existem alguns contras… como por exemplo o fato de as imagens que estiverem dentro de uma DIV com filtro ficam também transparentes. Ainda não consegui arrumar uma solução para esse problema mas continuo procurando. Talvez seja algo simples e até óbvio mas ainda não consegui sacar. Vi funcionar certinho em alguns blogs, mas o codigo deles é sempre uma zona. Se alguém souber, comenta aí! Por enquanto é isso. Surgindo novidades aviso aqui.

As três DTDs

In CSS, Referências, Trabalho, Webstandards on janeiro 22, 2007 at 8:33 pm

Estou trabalhando em um site e estava com alguma dificuldade com o posicionamento de alguns elementos do layout. Procurei a respeito e descobri que isso poderia ter relação com as DTDs (Document Type Definition ou Definição do Tipo de Documento). Conversando com um amigo, ele confirmou que realmente o Strict não aceita alguns termos e pode mostrar um resultado ruim, pois é muito mais rígido a algumas regras. Bom, procurei no Oráculo (hahaha) alguma coisa a respeito e achei, um comparativo entre Strict e Transitional simples e direto, mostrando alguns elementos aceitos por um e rejeitados pelo outro. Na sequência achei também um artigo sobre DOCTYPEs no 24 Ways: Transitional vs. Strict Markup muito completo e muito mais organizado. Por último, eu acho legal ler a respeito mais profundamente. Pra isso existe um documento no W3C falando tudo (ou quase) que há sobre XHTML e ainda tem uma tradução para português.
Esses artigos e documentos talvez possam ajudar, como tem me ajudado a escolher o melhor caminho. E que a força esteja com você! hahaha
😛

Soluções e problemas…

In CSS, Dicas, Javascript, moo.fx, pngfix, Trabalho on dezembro 20, 2006 at 9:15 pm

Certo, achei o nifty corners cube… muito bom mesmo. Mas minha surpresa foi usar ele com o pngfix.js (aquele famoso pra o IE rederizar png): as bordas simplesmente nao aparecem! Procurei um pouco hoje sobre como resolver, mas ate agora nada.

Solução temporária? USE JPG (ou gif, tanto faz).

Redondo… sem imagem?? Ohhh!!

In CSS, moo.fx, mootools, NiftyCorners, Trabalho on novembro 20, 2006 at 1:04 pm

Pois é… acredite. Eu procuro, procuro, procuro… e acabo achando outra coisa! hahaha. Estava eu, vagando pela internet tentando achar, nem que fosse por acaso, alguma coisa sobre “background gradient”. Queria o efeito que se faz como o filtro da M$, mas que rodasse no Firefox também. Dai que por acaso entrando em um blog (que infelizmente nao me lembro qual) vi um artigo sobre “rounded transparent corners”… isso me chamou atenção. Fui conferir e me surpreendi: cantos arredondados transparentes… e sem imagem! Baixei o tal do Transcorners, o script que possibilita isso e estou buscando implementar ele em um site que estou terminando de desenvolver. Interessante é que usa o Mootools… pra variar hehe. Assim que tiver novidades sobre o dito cujo, posto aki.
🙂

Up: Descobri que o Transcorners não funciona com a última versão do mootools (rev. 83). Em compensação achei outros scripts q funcionam bem, como o curvycorners e o Niftycube.

Moo.fx, CSS, javascript, ajax e blá,blá,blá

In Ajax, CSS, Javascript, moo.fx, mootools, Referências, Trabalho on novembro 16, 2006 at 4:27 pm

Ow… eh muita coisa nova ao mesmo tempo pra assimilar. Navegando por ai conversando com amigos, descobri algumas coisas novas na web. Tudo bem, pode me chamar de atrasado e blá blá blá. Mas agora eu to empolgadão com o tal do ajax e as tais bibliotecas de javascript q fazem um monte de coisas legais e te fazem ganhar bastante em visual junto com CSS. Não me peçam nomes técnicos, eu nem sou ligado muito com isso. Me importa mesmo eh o resultado. Ainda to iniciando no uso, com algumas dificuldades… mas deu pra perceber q o skema eh forte. Dando uma olhada no moo.fx vc vai ver como o negócio eh bonito. Limpo, leve, elegante… tudo que eu tava procurando. hehe. Espero que seja um bom futuro. E eu continuo aki aprendendo…
😀