Acabei de ver esse vídeo no blog do Carreira Solo. Ótimas dicas para manter sua cabeça sempre funcionando com o lado direito.

Mais uma diferença de compatibilidade entre os navegadores, é a opacidade que é possível ser aplicada a div’s. Esse pequeno código faz com que você aplique 50% da opacidade contemplando todos os navegadores, desde o IE até os mais modernos, como Chrome, Safari e Firefox. Então fica a dica: Sempre que for usar opacidade, use esses três itens.

selector {
filter: alpha(opacity=50); /* MSIE/PC */
-moz-opacity: 0.5; /* Mozilla 1.6 and older */
opacity: 0.5;
}

O efeito de bordas arredondas é, até hoje, uma grande dificuldade para ser aplicada em sites em HTML. É um efeito interessante, que, em navegadores modernos, já é possível ser feito em CSS3, e ficar com efeito bastante interessante. O problema, como sempre, fica com o Internet Explorer, que não aceita os comandos do Webkit ou do Mozilla como acontece com o Safari, Chrome e Firefox. No Brasil, o Internet Explorer ainda continua sendo bastante usado, por isso eu, particularmente, ainda não abandonei o desenvolvimento pra ele.

O código a seguir é a solução mais simples que encontrei para criar bordas arredondadas que funcionam nos IE’s e outros navegadores.

CSS
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }

Uma das maiores dificuldades que encontro para encontrar na rede são ícones de redes sociais com qualidade. Grande parte deles são cafonas e sem graça. Quando melhores, eles vem ume PNG e não é possível ditar o fundo deles, por exemplo.

Empenhado para achar um kit com os ícones em vetor, os achei no site Wp Zoom, que conta com praticamente todas as redes sociais acompanhado dos arquivos do Adobe Illustrator, totalmente editáveis. São exatamente 100 ícones (em cinco tamanhos), contando com o Facebook, Flickr, Orkut, Twitter, RSS e outros de menor expressão.

Sempre acreditei que cursos que são baseados em exemplos com arquivos fontes são mais efetivos que os teóricos. Pensando da mesma forma, um grupo de profissionais no Photoshop se juntaram para criar um extenso curso (de um ano, exatamente) que tem como conceito principal um exemplo com o arquivo fonte por dia.

O curso do 365 PSD é voltado basicamente para elementos online, mas nada impede de usar os elementos do curso para outras finalidades.

Imagens PNG transparentes 24 bits no Internet Explorer 6 - vulgo IE 6 - é algo que a Microsoft resolveu ignorar na mais odiada versão de um software na história. Existem centenas de soluções que arrumar esse problema com JavsScript ou simplesmente CSS, porém somente uma delas funciona em todas as situações que você implementar seu código, seja ele uma imagem ou um background no CSS. De quebra você ainda poderá usar o PNG transparente com os comandos background-position e background-repeat, que a grande maioria dos outros hacks não aceitam.

A tal solução chama-se DD_belatedPNG, o qual é um pequeno JavaScript com 7kb, que deve chamá-lo em suas páginas. O código possui uma condicional if que faz com que o código que está dentro do bloco só funcione no Internet Explorer 6, ou seja, é exatamente o que precisamos.

Para quem acha que não é possível compactar imagens em PNG, saiba que através de um serviço online isso já se tornou possível. Não só o PNG mas todos os outros formatos de imagens conhecidos podem ser compactados e otimizados. O resultado é aceitável. Em média 5% do tamanho da imagem original sem perder a qualidade (visual). Nada mal para quem usa mais 30 imagens em um site.

A ferramenta faz parte do excelente Yahoo! Yslow e chama-se Smush.it.

Fazia já um tempo que não alimentava o blog, porém agora resolvi voltar com força total. Uma das grandes dificuldades de trabalhar com CSS é qual unidade de medida adotar nos seus sites. O padrão são os famosos pixels (px) mas ainda assim existem outras medidas superiores como o EM e os pontos que varia de qual ferramenta você está usando. Os valores da tabela são aproximados, pois os valores podem variar conforme a fonte, navegador e sistema operacional que você estiver usando.

Essa tabela serve para converter os valores e ajudar na hora de transformar um layout no Photoshop para um layout em HTML, por exemplo.

Fonte: Sureshjain