CSS no Lanche

Você alguma vez já tentou fazer aqueles efeitos de bordas internas em imagens semelhantes a utilizadas no sites da Globo.com e não conseguiu ou não teve saco algum para descobrir como fazer? Pois bem, vou postar aqui uma forma muito simples de conseguir esse efeito que acabei encontrando aqui.

Primeiro vamos a marcação HTML, bem simples, utilizaremos listas para estruturar as imagens:

<ul>
	    <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
        <li><a title="" href="#"><img alt="" src="caminho_da_imagem"/></a></li>
</ul>

No HTML nenhum segredo até agora, agora vamos iniciar o processo de verdade aplicando o CSS:

img {border:none}
ul {margin:0; padding:0; width:236px}
ul:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
ul li {list-style-type:none; float:left; margin:0 3px 3px 0}
ul li a, ul li a img {float:left; overflow:hidden}
ul li a:hover {border:4px solid #f00}
ul li a:hover img {margin:-4px}

Agora vamos a explicação de cada item:

• Linha 1: Retirei as bordas padrão do link, que por default são azuis, nesse momento minha imagem não pode ter borda alguma.
• Linha 2: Defini uma largura para meu objeto container (ul) para que as imagens ficassem uma ao lado da outra.
• Linha 3: Uma técnica utilizada para “limpar floats”, prometo fazer um post sobre isso qualquer dia desses.
• Linha 4: Adicionei float:left para colocar as imagens uma do lado da outra.
• Linha 5: É obrigatório o uso de float e oveflow:hidden para que as imagens não fiquem sambando na tela.
• Linha 6: É aí onde eu defini a cor e espessura da borda da imagem.
• Linha 7: Onde a mágica toda acontece, quando eu defini 4px de borda para a imagem no hover do link, para que o efeito ocorra corretamente eu preciso deslocar as margens da imagem com seus valores negativos nas 4 direções (top, right, bottom e left), por isso o valor de margin:-4px.

Agora vejam o exemplo em funcionamento.

Quando você inicia seus estudos com CSS, uma das primeiras coisas que quer aprender é a centralizar divs na página independente da resolução do usuário. Existe uma forma muito simples de fazer isso somente com a utilização de CSS. Observe a seguinte marcação HTML:

<div id="box"></div>

O que nós vamos fazer agora é centralizar essa div na tela do usuário utilizando o seguinte CSS:

#box {background-color:#ff0000; height:480px; left:50%; position:absolute; top:50%; width:640px}

A primeira vista você pode pensar que somente definindo position:absolute e as coordenadas left e top com 50% para a div funcionarão, mas vejam nesse exemplo o que acontece. Infelizmente assim não conseguiremos centralizar a div horizontalmente nem verticalmente, o segredo para que isso aconteça é muito simples, temos que adicionar margens negativas ao elemento que você deseja centralizar, da seguinte forma:

#box {background-color:#ff0000; height:480px; left:50%; margin:-240px 0 0 -320px; position:absolute; top:50%; width:640px}

Agora se repararem nesse exemplo, verão que a div estará sempre centralizada na tela independente da resolução do usuário. O segredo é utilizar as margens top e left com valores negativos. A base para se chegar a esses valores é a seguinte: Para a margin-top você deve pegar a altura total do elemento e dividir por 2, como temos alí uma div com um height de 480px, o valor final é de 240px, e para margin-left pegamos a largura total do elemento, que alí é de 640px, dividimos por 2, e chegamos ao valor de 320px. A partir daí basta utilizar esses valores negativos.

Testei e funciona perfeitamente nos seguintes Browsers: IE6, IE7, Firefox 2.0.0.18, Firefox 3, Safari 3(Win), Opera 9.5, Opera 10 Alpha, Google Chrome e Flock.

Está interessado em aprender boas práticas no desenvolvimento CSS? Então seria uma boa você dar uma olhada nesse overview:

| View | Upload your own

Segue abaixo um simples código para se produzir bordas redondas com CSS:

border-radius: 9px; /* CSS 3 */
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */

Internet Explorer? Como ele não possui suporte a CSS 3, a solução seria ignorá-lo, ou então utilizar JavaScript ou imagens. Exemplo.