Você poderia simplesmente fazer o seguinte:

Aplicar display:block à imagem
Definir as margens esquerda e do topo para a imagem, deixando-a centralizada dentro do box.

Mas o grande problema é que você pode ter imagens no formato retrato e paisagem. Imagine uma galeria de fotos com fotos de diferentes tamanhos, você teria que definir um CSS para cada imagem para que elas ficassem centralizadas.

A solução

Centralizar imagens na horizontal não é difícil, se a imagem está com seu comportamento padrão de display:inline, então um simples text-align:center já resolveria o problema e funcionaria bem em todos os browsers.

Agora para centralizar imagens na vertical, em browsers modernos, uma simples solução é atribuir display: table-cell; e vertical-align: middle ao elemento container. Só que como nessa vida nem tudo são flores, em browsers como o IE7 e inferiores essa técnica não funciona.

Para o IE7, a solução é criar uma espécie de linha, tendo como altura a altura do container e utilizar novamente vertical-align: middle. A propriedade line-height infelizmente não pode ser usada para conseguir esse efeito, uma vez que ela não funciona corretamente no IE7/Win na presença de imagens. Utilizar também uma fonte com algum tamanho grande (sem especificar line-height) é problemático, porque o tamanho da caixa gerada é ligeiramente maior que o tamanho da fonte.

Felizmente o IE7 tem suporte parcial a propriedade display: inline-block. Se um elemento vazio que possua a propriedade inline-block (por exemplo um < span >) é adicionado dentro do elemento container e é atribuído ao mesmo height:100% e vertical-align: middle, então ela permite justamente conseguir o que queremos.

A solução utiliza das propriedades display: table-cell e uma tag < span > extra com display: inline-block. Funciona em todos os browsers, inclusive no Internet Explorer.

Código CSS

No exemplo foi utilizado um elemento container com a classe box e o código para o IE será descrito aqui através de comentarios condicionais:

<style type="text/css">
.box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.box * {
    vertical-align: middle;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.box span {
    display: inline-block;
    height: 100%;
}
</style>
<![endif]-->

A marcação HTML é muito simples e é descrita logo abaixo:

<div class="box">
<span></span>
<img src="" alt="" title="" />
</div>

Vejam o exemplo em funciomanento no post original do iMasters.

Essa técnica foi originalmente desenvolvida pelo desenvolvedor Bruno, veja mais informações no post original.

Para aqueles que quiserem fazer um teste, o link é: http://styleneat.com/

Lembrando que seu código não sofre alterações, mantendo a mesma idéia aplicada por você quando o escreveu.

Vejam abaixo alguns exemplos com os links para as respectivas páginas:

Bolhas de discursos

Fonte: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html

Efeitos fantáticos para botões com CSS3 e RGBA

Fonte: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

Moldura em imagens com CSS3

Fonte: http://www.change.org/actions/view/tell_the_senate_protect_polar_bears_from_global_warming

Como transformar suas imagens com estilo polaroid

Fonte: http://www.zurb.com/article/305/easily-turn-your-images-into-polaroids-wi

Dicas de campos de formulários (apenas com CSS3)

Fonte: http://www.skyrocketlabs.com/articles/css3-web-form-hints.php

CSS3 Drop Down Menu

Fonte: http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/

Explicando os CSS3 selectors

Fonte: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Recriando a interface do Mac OSX com CSS3

Fonte: http://www.css3.info/wp-content/uploads/2007/08/colormoduletest.html

Tipografia: efeito em textos

Fonte: http://acrisdesign.com/2010/03/letterpress-text-effect-using-photoshop-and-css/

Criando um visualizador de fotos com efeito polaroid com jQuery e CSS3

Fonte: http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html

Conhece outros exemplos com CSS3? Deixe nos comentários

O que você me diz agora? hehe

O código era o grande problema. A quantidade de código interferia diretamente na performance do site. E isso fez com que os desenvolvedores encontrassem saídas não muito agradáveis.

Era comum fazer códigos como o de baixo:

1
2
3
4
5
6
7
8
9
10

<table>
 <tr>
   <th>Produto</th>
   <th>Preço</th>
 </tr>
 <tr>
   <td>Tênis</td>
   <td>R$230</td>
 </tr>
</table>

Se transformarem em verdadeiros monstros:

<table><tr><th>Produto</th><th>Preço</th></tr><tr><td>Tênis</td><td>R$230</td></tr></table>

Isso tudo para economizar alguns bytes, que dependendo do site, significavam teras e teras de banda por mês. Naquele tempo, fazer isso era totalmente justificável. Precisávamos de alguma forma diminuir esse código para que o site ficasse mais rápido para o usuário e as requisições não sobrecarregassem o servidor.

Hoje isso é totalmente dispensável.

Aprendemos a utilizar o CSS e sabemos escrever HTML semântico.
A utilização dos Padrões trazem uma série de vantagens, e uma grande parte dessas vantagens são por causa da diminuição do código. Com o desenvolvimento de camadas e principalmente por causa do uso do CSS, não precisamos mais “otimizar” o código.

Mas parece que os desenvolvedores gostam de coisas complicadas. Esse mal costume de otimização de código ainda existe, e hoje querem otimizar o CSS. Eu acho totalmente inútil. O CSS foi feito para controlar o visual do site inteiro. Ele tirou a responsabilidade de formatação que colocávamos no HTML. Seu trabalho é exclusivamente esse: controlar o visual e diagramação do site.
É normal ele ficar grande, enorme, bizarro! Sim, haverão alguns casos que o tamanho superará mais de 1000, 2000, 3000, 4000 linhas.
Dá para evitar? Claro que dá! Pense simples. Module os arquivos. Faça um planejamento. Mas NUNCA faça com que um CSS escrito assim:

1
2
3
4
5
6
7

div {
 padding: 10px;
 border: 1px solid #CCC;
 width: 485px;
 height: 37px;
 background: #EEE;
}

Fique assim:

1

div{padding:10px;border:1px solid #CCC;width:485px;height:37px;background:#EEE}

Tenha dó do seu próximo e tenha dó de você mesmo.

Se você escreve o código de acordo com os Padrões, já economizou código suficiente. Não prejudique a manutenção do site por conta dessa neura. Escreva código legível!

Há outro ponto que devemos levar em consideração: imagine que o site pese 40Kb. Estes 40Kb são compostos por 20Kb de CSS e 20Kb de HTML. O CSS tem uma característica interessante: ele é cacheado pelo browser quando visitante entra no site.
Na primeira visita do usuário ele baixará 40Kb de uma vez. Já na segunda visita ele baixará apenas 20Kb relativos ao HTML. Ele não precisará baixar os 20Kb de CSS porque o arquivo já está cacheado pelo browser.

Não “otimize” seu código CSS, nem seu código HTML. Faça apenas com Padrões Web e siga categoricamente a semântica. É a melhor otimização que você pode conseguir.

O Leonardo Caineli escreveu um artigo sobre isso. Claro, discordo da opinião dele.

[update]Depois do post o pessoal chamou a atenção para essa prática em empresas grandes. Notei que no post eu não falei nada sobre isso. Sim, concordo que essa prática, só nessa hipótese, é totalmente considerável.

Quando treinei a primeira equipe do Terra – da época do site laranjão, lembra-se? – a primeira coisa que eles fizeram foi converter a home, e eles ainda sim queriam colocar todo o CSS em apenas uma linha.

Realmente 1Kb multiplicado por milhões é coisa para caramba e não há banda que agüente. Por isso, é totalmente aceitável que sites com um porte muito grande, “otimizem” seu código. [/update]

A maior parte dos desenvolvedores web, designers ou programadores, começaram antes do surgimento dos movimentos em prol dos padrões web, usando tabelas para montar layouts em editores WYSIWYG, e ainda hoje este método é usado na maioria dos projetos de internet. Logo, é natural que muita gente, ao começar a entender o valor dos padrões, se pergunte como migrar do desenvolvimento “tradicional” para o desenvolvimento de código semanticamente coerente.

É um caminho muito duro o que separa o desenvolvedor acostumado a editores visuais do desenvolvimento de código coerente. E é muito comum que o designer desista após uma primeira tentativa frustrada de desenvolver um website tableless, com layout CSS e XHTML validado.

Por isso gostaria de propor um caminho gradual, mais suave, para aqueles que querem se aventurar pela primeira vez pelos padrões web. O princípio desse método é da recompensa. Você pode obter um grande benefício aproximando seu código dos padrões web, mesmo que não faça tudo de uma vez. Quero mostrar como você pode começar, e obter benefícios imediatos.

Limpe seu HTML

A minha primeira recomendação é que você estude CSS. Comece pela formatação básica de fonte, cor e tamanho. Isso vai te garantir código menor e produtividade maior com pouquíssimo esforço.

Assim, ao criar um item de menu, você vai evitar códigos como este:

<a href="parceiros.asp"><font
face="Arial, Helvetica, Sans-serif" size="2"
color="#FF3300"><b>Parceiros</b></font></a>

Colocando no lugar:

<a href="parceiros.asp">Parceiros</a>

Tendo no CSS:

.menu{
font-family: Arial, Helvetica, Sans-serif;
font-size: 80%;
font-weight: bold;
color:#FF3300;
}

Como você pode ver, o CSS é extremamente simples. Aprender esses quatro atributos, mais o “font-style” (para fazer itálico), é a primeira coisa que eu recomendo. É claro, isso apenas faz cócegas nas possibilidades do CSS, ainda há muito o que aprender, mas recomendo começar por aí porque é algo que você pode aprender em alguns minutos e vai te salvar muito, muito tempo. E você vai começar a ter o controle da formatação, tendo todas as definições de fonte em um único arquivo, podendo alterar, por exemplo, a qualquer momento, a fonte de todo o conteúdo ou de todos os menus do site.

O passo seguinte para limpar seu HTML é se livrar do spacer.gif, aquele gif transparente de 1 pixel que se usa para dar espaços em tabelas, e das dezenas de tabelas aninhadas. Para isso vamos começar a estudar o “box-model”.

O pulo-do-gato aqui é um atributo CSS chamado padding. O padding é a distância entre as bordas de um elemento e o texto dentro dele. Assim, se é preciso que o conteúdo de uma célula esteja a 10 pixels da borda esquerda, ao invés de inserir uma célula extra como espaçador, ou inserir mais uma tabela, basta definir uma classe para essa célula. Uma vez que você já está colocando a formatação no CSS, provavelmente esta célula já tem uma classe. Então basta:

.conteudo{
padding-left:10px;
}

Isso vai fazer com que o texto esteja a 10 pixels da borda esquerda do documento. Ah, claro, o CSS também pode livrar você de definir no HTML as bordas e o background das células de sua tabela. Lembre-se, quanto mais layout e formatação você colocar no CSS, mais controle terá sobre seu site, principalmente em mudanças de layout durante o processo de produção e em futuras manutenções. O site também será mais leve para carregar.

Concluímos então que, após aprender os atributos de formatação de fonte, o passo seguinte é aprender os atributos background, border e padding. Indo até aqui você com certeza será um desenvolvedor muito mais feliz! Depois de limpar seu HTML, ganhar controle sobre a formatação de seu site e se tornar muito mais produtivo, você está pronto para passar à segunda etapa, correndo atrás da semântica.

Começando o Trabalho de Gente Grande

Muito bem, agora você já pode limpar seu código. Vamos estudar um exemplo prático. No começo de cada uma de suas páginas você tem um título, cujo código hoje é assim:

<font face="Arial, Helvetica, Sans-serif" size="4"
color="#FFFF00"><b>Novidades</b></font>

Ao limpar esse código, você vai substituir esse monte de tags por uma só. Que tag você vai usar? Como o CSS te permite formatar qualquer elemento, muita gente que começa a estudar o assunto acha que é indiferente que tag usar, e coloca algo como:

<p>Novidades</p>

Agora, veja bem, outro desenvolvedor poderia resolver o mesmo problema com:

<div>Novidades</div>

E o resultado visual poderia ser o mesmo. Acontece que há algo na natureza do HTML que nos diz que tag usar. Chamamos esse algo de “semântica”: as tags do HTML tem significado. A tag P é para parágrafos, a tag DIV para divisões no conteúdo, e há uma série de tags para título, h1, h2, h3, h4, h5 e h6. Assim, se você pode usar qualquer tag, pode fazer assim:

<h1>Novidades</h1>

O que você ganha com essa preocupação? Os buscadores inteligentes podem ler semanticamente o conteúdo de um documento, entendendo que trecho de código é um título, por exemplo. Assim, escrever HTML semanticamente correto pode melhorar muito sua visibilidade em buscadores. O segundo bom motivo é que você vai saber para que serve cada tag se tiver que mexer nesse mesmo documento daqui a alguns meses. E vai ser mais fácil também se outra pessoa tiver que dar manutenção no seu código.

Logo, use as tags do HTML para aquilo para o que foram criadas:

• dd, dl e dt para listas de definições (um glossário, por exemplo)
• h1 a h6 para títulos
• p para parágrafos
• abbr para abreviaturas e acronym para acrônimos
• blockquote e q para citações longas e curtas
• address para endereços (sabe aquele rodapé onde vai o endereço e o telefone da empresa?)
• ul e ol para listas e li para os itens da lista

Você pode obter uma lista mais abrangente em:
http://www.w3schools.com/xhtml/xhtml_reference.asp

E formate tudo ao seu gosto com CSS.

Finalmente, Livrando-se das Tabelas

Não há bons motivos para você eliminar a qualquer custo todas as tabelas de seu primeiro trabalho. Conheço alguns excelentes profissionais, muito talentosos, que fizeram um ótimo trabalho em sua primeira tentativa de tableless. Mas a maioria dos que eu vi tentarem demoraram muito para conseguir da primeira vez, e alguns não obtiveram os resultados que esperavam. Isso tudo serve para que você possa produzir mais rápido e melhor, não o contrário. Então vá com calma. Faça alguns estudos em tableless, comece eliminando parte das tabelas em seus primeiros trabalhos. Por exemplo, remover as células de tabela que formam o menu, trocando por uma lista (com as tags ul e li), é um ótimo desafio para o primeiro projeto.

Ah, e não se esqueça que para dados como uma tabela periódica ou um calendário a solução semanticamente correta é a tabela mesmo. Ou seja, tableless não é ausência de tabelas, é o seu uso apenas onde é semanticamente justificável.

Não vou entrar em detalhes aqui, porque já escrevi bastante sobre como construir um layout no Tutorial Tableless Básico, mas o conselho é ir com calma, sem estresse. Você logo vai estar produzindo tableless mais fácil do que produz sites com tabelas.

XHTML

Há uma coisa que muita gente que está começando me pergunta: o que é e para que serve esse tal de XHTML? É muito mais simples do que parece. Um arquivo XHTML é um arquivo HTML, que pode ser lido por qualquer browser. Não estamos falando de um novo HTML, com novas tags ou coisa assim. Pelo contrário, o XHTML 1 foi feito para funcionar mesmo em navegadores antigos. Mas, ao mesmo tempo, Um arquivo XHTML é também um arquivo XML válido, que pode ser lido por qualquer interpretador de XML.

Meu primeiro conselho, nesse caso, é que você, se não trabalha com XML, deixe preocupação com o XHTML para depois de dominar bem o código semântico e o layout tableless. Não porque seja complicado, pelo contrário, transformar bom HTML em XHTML é bem simples, mas simplesmente porque você pode obter benefícios muito significativos, e muito mais rapidamente, aprendendo CSS do que XHTML.

O segundo conselho é que você comece a estudar o assunto. Depois de dominar bem layouts CSS, mergulhe no XML. A maioria dos bancos de dados hoje permite extrair dados diretamente em XML e todas as plataformas de aplicações web trabalham bem com XML. E com a poderosa linguagem XSLT você pode muito facilmente oferecer seus os dados em XHTML para o navegador.

Voando Alto

Estamos falando de muito mais do que criar sites estilosos. Há duas semanas esteve aqui um amigo com um Palm novo, um Zire 71, e um celular com acesso à internet. Isso está se tornando cada vez mais barato e comum. Conheço também uma porção de empresas e instituições, entre elas uma série significativa de TeleCentros e órgãos públicos, que estão adotando Linux como sistema operacional para desktops. O Google hoje é responsável por 90% do tráfego que meu site consegue de buscadores. É o primeiro colocado absoluto entre os buscadores. E conseguiu isso indexando semanticamente o conteúdo real dos sites. Praticamente todas as plataformas web estão oferendo suporte a XML e apostando na idéia de webservices.

Quem segue os padrões web não precisa ter medo do futuro. Não importa que browser vai ser o mais usado daqui a dois anos, que tecnologia vai estar na moda ou de onde as pessoas vão estar usando a internet. Seu site estará lá, leve, acessível, atual e útil.

Acompanhem o vídeo de digam o que acharam!

PS. retirado do Blog do Bruno Ávila

Ok, mesmo que o site seja testado no Firefox, ie6, ie7, Safari, Chrome e Opera, quem garante que os navegadores Netscape 6.0, Ant Galio 3.1, Blaze 6.0 ou o Playstation 3 5.0 vão interpretar corretamente também?

E é por isso que devemos validar o código. Existem diversas ferramentas para validação de código.
A mais importante delas, creio que é o HTML validator, uma extensão de firefox. Além de válidar seu (x)html, ele diz o que está errado e como consertar o que é ótimo pra quem está começando a programar interface.

Para validar CSS, a melhor opção é o CSS validator da W3C. Infelizmente não existe (ou não conheço) nenhuma opção desktop. Mas mesmo assim, vale a pena utilizar.

Já o link-checker é um validador de links que analisa seu site e procura por links quebrados, muito útil. A análise é BEM completa, e demora muito tempo, afinal ele checa tudo. Analisando a home do TidBits ele demorou 286 segundos e checou mais de 200 arquivos.

Outras ferramentas como o firebug, ajudam bastante na codificação, principalmente pra detectar erros de JavaScript. E finalmente, para garantir a acessibilidade do seu site, existe diversas opções, duas em português: o Da Silva e o ASES desenvolvido pelo governo eletrônico.

Fonte: TidBits

O tutorial abaixo foi traduzido do original por mim, com a idéia de lhes ajudar com este novo recurso jQuery. Abaixo você verá vários exemplos e como aplicá-los em seu projeto junto com HTML e CSS. Divirta-se

Navegação é um componente essencial para websites. A boa navegabilidade leva o usuário com maior facilidade e rapidez até a informação desejada. Aqui temos 12 excelentes tutoriais para criar menus de navegação para seu projeto, utilizando o poderoso jQuery, framework JavaScript.

1.Menu horizontal animado com jQuery

Este tutorial nos mostra como criar uma menu interativo usando jQuery, nos dando uma animação na horizontal quando o mouse estiver sobre este link, mostrando informações escondidas referente ao link.

Tutorial Demo

2. SlidingMenu usando jQuery

Este tutorial explica como criar um menu ‘deslizante’ a partir de seu ícone, mostrando mais detalhes do link que o mouse sobrepor.

Tutorial Demo

3. Criando um bom menu imitando kwicks jQuery Plugin

Se você tem sempre usado o kwicks jQuery plugin, este menu é uma exata imitação dele. Este tutorial explica como alcançar o efeito do kwicks usando jQuery.

Tutorial Demo

4. Menu com rolagem horizontal utilizando CSS & jQuery

Este tutorial explica como alcançar um deslocamento horizontal do menu utilizando CSS e jQuery.

Tutorial Demo

5. Menu Drop-down usando jQuery

Se você possui um pequeno espaço e necessita mostrar muitos links, seus problemas acabaram, com este plugin você consegue criar um ‘menu suspenso‘ utilizando jQuery.

Tutorial Demo

6. RolloverTooltips com jQuery

Este tutorial nos dá uma ferramenta para exibir “dicas” animadas sobre os ícones de navegação. Uma agradável opção para exibir maiores informações sobre o link em questão.

Tutorial Demo

7. Estilos de links baseados nas extensões dos arquivos

Se você necessita apresentar diversos tipos de documentos em sua página web este tutorial pode te ajudar. Ele ensina como diferenciar os links baseando-se nos tipos de arquivos.

Tutorial

8. Como criar um menu inspirado no efeito do ‘Mootools Homepage’ com jQuery

Criando um ótimo efeito para menu vertical usando jQuery inspirado em um velho efeito mootools homepage navigation.

Tutorial Demo

9. Criando um menu com teclas de atalho – jQuery

Este tutorial nos ensina a criar um menu que trabalha com teclas de atalho, poupando o usuário de levar o mouse até o menu de navegação.

Tutorial Demo

10. jQuery: Menu ‘desbotado’ – Substituindo Conteúdo

Criar um efeito legal do menu ‘desbotando’ e substituindo o conteúdo da página.

Tutorial Demo

11. Criando uma navegação legal com CSS & jQuery

Este tutorial é uma réplica de um menu em flash, porém utilizando CSS e jQuery. Observe como o efeito é baseado no flash, porém não utiliza o flash.

Tutorial Demo

12. Criando um Menu Flutuante usando HTML, CSS & jQuery

Este tutorial vai te ensinar como criar um menu flutuante com jQuery. Muito útil para página de conteúdo extensos.

Tutorial Demo

Espero ter ajudado com esta dica

É isso ae mesmo que o título está falando…agora também é possível validar as cores do seu site! Todos ja sabem como validar os códigos HTML e CSS pela W3C, porém esta ferramenta é nova para mim, e creio que para muitos também.

Trata-se do Check My Colours, um validador de cores que acabei de conhecer. Basta inserir a URL nesta simples ferramenta e voilá (não sou amante do idioma francês, porém este expressão me veio a mente agora), ali está o resultado indicando se seu site está ou não em plena harmonia de cores.

Faça o teste agora mesmo: Check My Colours

Fonte: Blog Avante – Bruno Ávila