Ola galera, mais uma vez estou aqui trazendo um artigo que pode ser interessante para a maioria dos desenvolvedores, pois é uma maneira de rotacionar textos em todos os navegadores sem ter que fazer uso de nenhum tipo de imagem, o que torna o site bem mais leve.

Quando eu falo todos os navegadores é porque existe uma maneira de fazer funcionar no Internet Explorer também.

Para rotacionar textos no Firefox e em outros navegadores que tem os padrões de CSS atualizados é muito simples rotacionar qualquer tipo de objeto na tela (Webkit e Firefox 3.5), basta utilizar uma propriedade e falar quantos graus devem ser modificados, da seguinte forma:

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);

Bem simples, porém como sempre temos um problema, chamado IE.

Que no meu ver não é tão ruim assim se você você estiver disposto em aprender como solucionar os seus problemas. São muitos mas boa parte deles já tem um bom Hack para consertar, basta ter interesse.

Para que rotacionar elementos funcione no Interent Explorer basta você usar os filtros que são fornecidos pelo MSDN no seu banco de dados para desenvolvedores.

No caso iremos usar o BasicImage, que é um filtro que te permite fazer vários tipo de manipulações com elemento, tipo transformá-lo em Preto e Branco.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Bom estermos usando a propriedade rotation do filtro, que nos permite girar o elemento em 4 ângulos diferentes com 4 inteiros diferentes, sendo eles: 0, 1, 2 e 3 e rotacionando em 0, 90, 180 e 270 graus respectivamente.

Essas propriedades só irão funcionar em elementos que tenham a propriedade de bloco, ou seja, para elementos de texto, como um span será necessário adiconar a seguinte propriedade ao elemento em CSS:

display:block;

Colocando em Prática os conhecimentos novos

Eu estava lendo um pouco do CSS-Tricks, um maravilhoso site sobre CSS, e me deparei com a dica de usar sprites para fazer as data dos artigos colocados no blog, para aqueles temas que usam um tipo de pequeno calendário para exibir a data.

Fiquei intrigado com a idéia, porém achei que era meio ruim para um site de longo prazo, que tem sei la uns 8 ou 9 anos de existencia, pensei que seria melhor apenas rotacionar os elementos. Mas ai me veio a idéia de que teria o Internet Explorer para me atrapalhar, e dias depois descobri o banco de dados para desenvolvedores da MSDN, e este tornou a idéia possível.

Então como fazer é bem simples, vamos aplicar o que aprendemos mais acima, vamos criar um código da seguinte forma:

<div class="data">
  <span class="dia">07</span>
  <span class="mes">Dez</span>
  <span class="ano">2009</span>
</div>

Após feito isso iremos adicionar um pequeno código CSS para que fique na posição que desejamos, e é claro adicionar a rotação:

<style type="text/css" media="screen">
	* { margin: 0; padding: 0px; outline:none; border:none; }
	body { padding:20px; font-family: Arial, Helvetica, sans-serif; }

	.data { background-color:#dedede; color:#3e3e3e; float:left; position:relative; padding:40px 5px 0px; }
	.data .mes { text-transform: uppercase; font-size:25px; }
	.data .dia { font-size:36px; line-height:45px; position:absolute; left:5px; top:0px; }
	.data .ano { display:block; font-size:12px; position:absolute; right:-5px; top:15px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);-o-transform: rotate(90deg);
 }

	div.footer { position: absolute; bottom:0px; width: 95%; height:30px; padding: 15px 2%; border-top:1px solid #e1e1e1;}
</style>
<!--[if IE]>
	<style>
		.data .ano { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); right:2px!important; top:8px!important; }
	</style>
<![endif]-->

Após adicionado este CSS deve ficar como na imagem abaixo:

Você pode dar uma olhada se funciona no seu navegador, caso não funcione da maneira que deveria, por favor deixe um comentário com as informações do seu navegador

Bom galera, estou aqui neste, para dar uma dica de como facilitar a sua vida como desenvolvedor. Está é relacionada com a criação de um arquivo de CSS que pode e deve ser usado em qualquer tema de WordPress, para facilitar na hora do editor que já vem no próprio sistema.

Seguinte, o sistema vem com alguns padrões para alinhamento de textos, imagens e a criação de captions, e a implementação de todo esse código depende do Desenvolvedor, porém eu já a algum tempo criei um arquivo que uso como adendo, e este já contém todos os códigos que passam as informações referentes às classes usadas por padrão do WordPress.

Então você pode fazer o download do arquivo com esses códigos padrões do WordPress, e colocar na pasta do seu tema, e apenas adicionar o seguinte código na header.php do seu tema:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/wp.css" type="text/css" media="all" />

É basicamente isso, qualquer pergunta ou dúvida, comentem que eu vou responder.

Galerinha estou aqui para deixar uma pequena dica para blogs. Muitos blogs tem um tamanho de imagem máximo que pode ser colocado, que é definido pelo tamanho da área de conteúdo do seu site.

Para fazer com que sua imagem nunca passe do tamanho da área de conteúdo basta adicionar o seguinte código no CSS do seu site/blog:

.single-entry img {
    max-width: 580px;
    height: auto;
}

Ajuste a quantidade de Pixels de 580 para o que for necessário, e veja qual o campo que as imagens do seu blog vão estar[single-entry].

Espero que gostem e comentem, essa é uma série de dicas que são bem rápidas mas bem úteis.

Olá galerinha, estou aqui por meio deste para lhes contar um pouco de como foi a WordCamp Brasil 2009 e a CMS Brasil 2009.

Sou desenvolvedor WordPress, então logicamente irei falar mais sobre as palestrar que mais participei, de WordPress.

Webord.net nos dois eventos de CMS

Bom de começo posso contar que ambos foram eventos de altíssima qualidade, com palestras muito boas, e bem organizadas. Na CMS Brasil meu único adendo é que na próxima poderíamos ter um lobby maior para que pudéssemos ter uma área um pouco maior para circular e olhar os stands.

Nos dois eventos, quem deveria fazer a primeira palestra deveria ser o Matt Mullenweg, porém no WordCamp, a palestra dele foi deixada para ser a segundo para esperar que mais pessoas chegassem.

Aos que conhecem WordPress e sua comunidade sabem que é uma comunidade muito forte, porém apareceram poucas pessoas, talvez e na minha opinião deve ser porque era gratuito, então quem iria não ficou tão animado assim porque no dia anterior teve o CMS Brasil. Minha humilde sugestão é que no próximo tenhamos uma pequena taxa, tipo 25 reais para que as pessoas que se registraram irem. Read More