<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Blog Leoguime &#187; CSS</title>
	<atom:link href="http://leoguime.wordpress.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://leoguime.wordpress.com</link>
	<description>webstandards ▫ design ▫ css ▫ portfólio</description>
	<lastBuildDate>Sat, 21 Mar 2009 23:46:04 +0000</lastBuildDate>
	<generator>http://wordpress.com/</generator>
	<language>pt-br</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<cloud domain='leoguime.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://www.gravatar.com/blavatar/49a6e4b3bfdf47ad1d24b7af7663fef8?s=96&#038;d=http://s.wordpress.com/i/buttonw-com.png</url>
		<title>Blog Leoguime &#187; CSS</title>
		<link>http://leoguime.wordpress.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://leoguime.wordpress.com/osd.xml" title="Blog Leoguime" />
		<item>
		<title>PCDTR &#8211; Substituindo texto por imagem</title>
		<link>http://leoguime.wordpress.com/2008/12/17/pcdtr-substituindo-texto-por-imagem/</link>
		<comments>http://leoguime.wordpress.com/2008/12/17/pcdtr-substituindo-texto-por-imagem/#comments</comments>
		<pubDate>Wed, 17 Dec 2008 23:02:34 +0000</pubDate>
		<dc:creator>Leandro Medeiros</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Trabalho]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[pcdtr]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[text replace]]></category>

		<guid isPermaLink="false">http://leoguime.wordpress.com/?p=122</guid>
		<description><![CDATA[Venho utilizando muito o script PCDTR &#8211; versão melhorada por um brasileiro &#8211; para realizar a tarefa de substituir texto por imagem (técnica chamada de &#8220;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 [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=leoguime.wordpress.com&blog=222528&post=122&subd=leoguime&ref=&feed=1" />]]></description>
			<content:encoded><![CDATA[<div class='snap_preview'><br /><p>Venho utilizando muito o script <strong><a title="PCDTR escrito por Joao Makray" href="http://www.joaomak.net/util/dtr/" target="_blank">PCDTR</a></strong> &#8211; versão melhorada por um brasileiro &#8211; para realizar a tarefa de substituir texto por imagem (técnica chamada de &#8220;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.</p>
<p>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 <strong><a title="Olimpiadas Juridicas" href="http://olimpiadasjuridicas.com.br" target="_blank">nesse site</a></strong> que não fiz o design mas estou finalizando na agência.</p>
<p>Ah! como o script é em PHP &#8211; e posso até estar errado &#8211; somente consegui fazer ele funcionar se o arquivo index for PHP. Se alguem conseguir de outra forma, por favor me avise!</p>
  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/leoguime.wordpress.com/122/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/leoguime.wordpress.com/122/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/leoguime.wordpress.com/122/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/leoguime.wordpress.com/122/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/leoguime.wordpress.com/122/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/leoguime.wordpress.com/122/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/leoguime.wordpress.com/122/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/leoguime.wordpress.com/122/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/leoguime.wordpress.com/122/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/leoguime.wordpress.com/122/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=leoguime.wordpress.com&blog=222528&post=122&subd=leoguime&ref=&feed=1" /></div>]]></content:encoded>
			<wfw:commentRss>http://leoguime.wordpress.com/2008/12/17/pcdtr-substituindo-texto-por-imagem/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/8479cc51009c4403a3d353357c8456c7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Leo</media:title>
		</media:content>
	</item>
		<item>
		<title>Integração com Twitter</title>
		<link>http://leoguime.wordpress.com/2008/12/06/integracao-com-twitter/</link>
		<comments>http://leoguime.wordpress.com/2008/12/06/integracao-com-twitter/#comments</comments>
		<pubDate>Sat, 06 Dec 2008 21:34:03 +0000</pubDate>
		<dc:creator>Leandro Medeiros</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[blip]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[web 2.0]]></category>

		<guid isPermaLink="false">http://leoguime.wordpress.com/?p=103</guid>
		<description><![CDATA[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 [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=leoguime.wordpress.com&blog=222528&post=103&subd=leoguime&ref=&feed=1" />]]></description>
			<content:encoded><![CDATA[<div class='snap_preview'><br /><p>O <strong><a title="Twitter" href="http://twitter.com" target="_blank">Twitter</a></strong> é 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.</p>
<p>Logo que comecei a usa-lo, pensei em colocar no meu site, mas não queria colocar só o link para o <a title="Meu Twitter" href="http://twitter.com/leoguime" target="_blank"><strong>meu Twitter</strong></a>. Eu queria mostrar no meu site o que eu publicar lá. Novamente usei <a title="JQuery" href="http://jquery.com" target="_blank"><strong>Jquery</strong></a>.</p>
<p>Também já tinha visto alguém &#8220;twittar&#8221; uma música no <a title="Blip, um Twitter para musicas" href="http://blip.fm" target="_blank"><strong>Blip</strong></a> (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.<br />
Uma simples pesquisa e achei o que precisava. <a title="Plugin do JQuery para o Twitter" href="http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter" target="_blank"><strong>O plugin</strong></a> é simples como sempre e muito customizável.<br />
Você pode ver o resutado no <strong><a title="Meu site" href="http://leandromedeiros.com" target="_self">meu site</a></strong>. No meu caso, queria apenas o último, configurei e alterei o CSS e ficou muito legal.</p>
  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/leoguime.wordpress.com/103/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/leoguime.wordpress.com/103/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/leoguime.wordpress.com/103/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/leoguime.wordpress.com/103/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/leoguime.wordpress.com/103/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/leoguime.wordpress.com/103/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/leoguime.wordpress.com/103/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/leoguime.wordpress.com/103/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/leoguime.wordpress.com/103/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/leoguime.wordpress.com/103/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=leoguime.wordpress.com&blog=222528&post=103&subd=leoguime&ref=&feed=1" /></div>]]></content:encoded>
			<wfw:commentRss>http://leoguime.wordpress.com/2008/12/06/integracao-com-twitter/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/8479cc51009c4403a3d353357c8456c7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Leo</media:title>
		</media:content>
	</item>
		<item>
		<title>CMS: Joomla!</title>
		<link>http://leoguime.wordpress.com/2008/06/04/cms-joomla/</link>
		<comments>http://leoguime.wordpress.com/2008/06/04/cms-joomla/#comments</comments>
		<pubDate>Wed, 04 Jun 2008 18:51:44 +0000</pubDate>
		<dc:creator>Leandro Medeiros</dc:creator>
				<category><![CDATA[CMS]]></category>
		<category><![CDATA[Dicas]]></category>
		<category><![CDATA[Trabalho]]></category>
		<category><![CDATA[Webstandards]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Joomla!]]></category>
		<category><![CDATA[Mambo]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[XHMTL]]></category>

		<guid isPermaLink="false">http://leoguime.wordpress.com/?p=62</guid>
		<description><![CDATA[A muito que falo aqui sobre testes com diferentes tipos de CMS (Content Management System, do português &#8220;Sistema de Gerenciamento de Conteúdo&#8221;).
Pois bem. Hoje vou falar sobre o sistema que mais me agradou dentre todos que testei. O Joomla!, que é uma derivação do agora extinto Mambo, é realmente o mais completo e fácil de [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=leoguime.wordpress.com&blog=222528&post=62&subd=leoguime&ref=&feed=1" />]]></description>
			<content:encoded><![CDATA[<div class='snap_preview'><br /><p style="text-align:justify;">A muito que falo aqui sobre testes com diferentes tipos de CMS (Content Management System, do português &#8220;Sistema de Gerenciamento de Conteúdo&#8221;).</p>
<p style="text-align:justify;">Pois bem. Hoje vou falar sobre o sistema que mais me agradou dentre todos que testei. O <strong><a title="Joomla!" href="http://joomla.org" target="_blank">Joomla!</a></strong>, que é uma derivação do agora extinto Mambo, é realmente o mais completo e fácil de lidar entre os CSM. Além de ter uma estrutura de gerenciamento muito intuitiva, ele possibilita a incorporação de componentes e plugins que melhoram em muito sua performance. Na verdade o Mambo é um velho conhecido meu, pois trabalhei com ele durante dois anos, desenvolvendo sites para uma agência web.<br />
Na época que o Joomla! surgiu eu não dei muita importância, mas ele evoluiu muito dende então.</p>
<p style="text-align:justify;">Considerando as necessidades de cada site, o Joomla! é o que se mostrou mais adaptável e simples, desde sua instalação (toda em português do Brasil) e até mesmo em sua diagramação e codificação.Tudo é feito dentro do Joomla!. Você pode editar o código HTML ou CSS, adicionar e remover módulos, criar ou mudar o lugar que cada componente, módulo, ou plugin vai aparecer no site e ainda conta com uma infinidade de módulos, plugins e componentes no site oficial. Além disso existem inúmeros tutoriais na rede ensinando como criar novos componentes, módulos, plugins e temas &#8211; chamados de &#8220;templates&#8221;.</p>
<p style="text-align:justify;">Desde o inicio desde ano o Joomla! está com uma  nova versão (1.5) que trouxe melhoras consideráveis, levando o sistema a um nível realmente diferenciado. Pra quem está procurando um sistema dinâmico, seguro e com muitos recursos &#8211; além de compatível com os padrões W3C de XHTML e CSS &#8211; o Joomla! é uma excelente opção.</p>
<img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/leoguime.wordpress.com/62/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/leoguime.wordpress.com/62/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/leoguime.wordpress.com/62/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/leoguime.wordpress.com/62/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/leoguime.wordpress.com/62/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/leoguime.wordpress.com/62/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/leoguime.wordpress.com/62/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/leoguime.wordpress.com/62/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/leoguime.wordpress.com/62/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/leoguime.wordpress.com/62/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/leoguime.wordpress.com/62/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/leoguime.wordpress.com/62/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=leoguime.wordpress.com&blog=222528&post=62&subd=leoguime&ref=&feed=1" /></div>]]></content:encoded>
			<wfw:commentRss>http://leoguime.wordpress.com/2008/06/04/cms-joomla/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/8479cc51009c4403a3d353357c8456c7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Leo</media:title>
		</media:content>
	</item>
		<item>
		<title>Sobre CSS Hacks</title>
		<link>http://leoguime.wordpress.com/2007/12/27/sobre-css-hacks/</link>
		<comments>http://leoguime.wordpress.com/2007/12/27/sobre-css-hacks/#comments</comments>
		<pubDate>Thu, 27 Dec 2007 15:50:57 +0000</pubDate>
		<dc:creator>Leandro Medeiros</dc:creator>
				<category><![CDATA[Internet]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Hacks]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[Padrões Web]]></category>
		<category><![CDATA[Web Standard]]></category>

		<guid isPermaLink="false">http://leoguime.wordpress.com/2007/12/27/sobre-css-hacks/</guid>
		<description><![CDATA[Durante o desenvolvimento do último site, tive a ingrata (mas não incomum) surpresa de ver o mesmo site com visual diferente em cada navegador. Os que desenvolvem a mais tempo, sabem que, mesmo com o CSS certinho, da pra notar grandes diferenças entre um navegador e outro. Como levo em consideração que os navegadores mais [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=leoguime.wordpress.com&blog=222528&post=58&subd=leoguime&ref=&feed=1" />]]></description>
			<content:encoded><![CDATA[<div class='snap_preview'><br /><p align="justify">Durante o desenvolvimento do último site, tive a ingrata (mas não incomum) surpresa de ver o mesmo site com visual diferente em cada navegador. Os que desenvolvem a mais tempo, sabem que, mesmo com o CSS certinho, da pra notar grandes diferenças entre um navegador e outro. Como levo em consideração que os navegadores mais usados são o Firefox 2 e o IE 6 e IE7,  tenho que fazer o site ficar certinho e bonitão nos três. Algumas vezes, lancei mão dos dos hacks pra o IE6 e agora com o IE7, não seria diferente. Mas eu não queria mais deixar o CSS &#8220;sujo&#8221;. Me importo (e sei que isso ainda traz muita discursão) com a validação do CSS e a padronização e evitar gambiarras pra um ou outro navegador. Achei algumas soluções interessantes, como a de um brasileiro que desenvolveu uma <b><a href="http://rafael.adm.br/css_browser_selector/" title="CSS Selector por Rafael Lima" target="_blank">solução</a></b> em javascript que tem a função de identificar o navegador e utlizar um CSS diferente pra cada. Apesar de interessante a ideia, eu ainda achei que no meu caso não precisava de tanto, já que o problema era só com o IE7. Continuei procurando e me deparei com uma solução no site da própria Microsoft: <b><a href="http://msdn2.microsoft.com/en-us/library/ms537512.aspx" title="Conditional Comments" target="_blank">Conditional Comments</a></b>.</p>
<div align="justify"></div>
<p align="justify">Bom, isso eu já conhecia de antes, por outros problemas como o conhecido caso do PNG no IE6. Entretanto, não sabia que essa era uma solução apontada pela própria empresa para casos em que o conteúdo do site tivesse apresentações diferentes para um determinado navegador. Claro que no site, a condição é que o conteúdo esteja sendo apresentado com recursos para diferentes IE&#8217;s, mas todos nós sabemos que a necessidade não é sempre essa. E aí é que os &#8220;Comentários Condicionais&#8221; entram em ação.</p>
<div align="justify"></div>
<p align="justify">Andei lendo a respeito do uso desse tipo de solução e realmente acredito ser a melhor maneira de se solucionar esse tipo de problema, apesar de um <b><a href="http://www.tableless.com.br/comentarios-condicionais-nao-use#comments" title="O porquê de não usar comentários condicionais, por Diego Eis" target="_blank">renomado blog brasileiro</a></b> que trata de padrões web publicar um artigo recomendando a não utilização dessa solução pelos desenvolvedores. Pelo menos ate agora, além de mim, vários outros desenvolvedores discordaram do artigo.</p>
<div align="justify"></div>
<p align="justify">A solução é muito simples.  É um comentário colocado dentro do código HTML do site, que tem a função de impor uma condição: toda vez que o site for acessado pelo navegador citado, ele utilizará um arquivo adicional, além do CSS que já está sendo usado no site. Ou seja, desta forma você pode usar um arquivo CSS apenas com as correções necessárias para os outros navegadores em que o site aparecer estranho. Veja o exemplo abaixo:</p>
<div align="justify"></div>
<blockquote>
<p align="justify"><b><code>&lt;!--[if IE]&gt;<br />
&lt;link rel="stylesheet" type="text/css" href="css/ie.css"&gt;&lt;/link&gt;<br />
&lt;![endif]--&gt;</code></b></p></blockquote>
<div align="justify"></div>
<p align="justify">O outro passo é criar um arquivo e dar o nome de &#8220;ie.css&#8221;, escrevendo somente as correções necessárias para o navegador. Essa solução, inclusive, facilita as correções e atualizações e modificações mais tarde, já que apenas o que está errado precisa ser adicionado a este arquivo.</p>
<div align="justify"></div>
<p align="justify">Quero lembrar que isso ainda é uma solução ideal pra se usar somente depois de tentar todas as soluções no CSS, pra nao ter que usar um hack que vai sujar seu código.</p>
<div align="justify"></div>
<p align="justify">A esperança é que o próximo IE venha com um suporte melhor para os padrões conhecidos pra que a gente nao tenha que se preocupar com isso mais.</p>
<img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/leoguime.wordpress.com/58/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/leoguime.wordpress.com/58/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/leoguime.wordpress.com/58/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/leoguime.wordpress.com/58/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/leoguime.wordpress.com/58/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/leoguime.wordpress.com/58/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/leoguime.wordpress.com/58/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/leoguime.wordpress.com/58/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/leoguime.wordpress.com/58/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/leoguime.wordpress.com/58/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/leoguime.wordpress.com/58/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/leoguime.wordpress.com/58/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=leoguime.wordpress.com&blog=222528&post=58&subd=leoguime&ref=&feed=1" /></div>]]></content:encoded>
			<wfw:commentRss>http://leoguime.wordpress.com/2007/12/27/sobre-css-hacks/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/8479cc51009c4403a3d353357c8456c7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">Leo</media:title>
		</media:content>
	</item>
	</channel>
</rss>