CSS no Lanche

Imagine a seguinte situação: Você precisa centralizar uma imagem dentro de um box maior que a imagem e com dimensões atribuídas, caso você insira a imagem via CSS, é fácil daixá-la centralizada, mas isso não é possível quando estamos utilizando a tag <img>

Você poderia simplesmente fazer o seguinte:

• Aplicar display:block a 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.

Continuar lendo »

Já falei aqui no blog uma vez sobre CSS Sprites, através de um vídeo tutorial, mas faltava algo mais prático para mostrar aos usuários. Com isso, vou postar aqui agora um exemplo simples de CSS Sprite baseado no Plugin para WordPress Sexy Bookmarks.

A marcação HTML é muito simples, e para isso vamos utilizar listas desordenadas:

<ul class="sharing-cl" id="text">
	<li><a class="sh-mail" href="">email</a></li>
	<li><a class="sh-feed" href="">feed</a></li>
	<li><a class="sh-tweet" href="">twitter</a></li>
	<li><a class="sh-face" href="">facebook</a></li>
	<li><a class="sh-su" href="">stumbleupon</a></li>
	<li><a class="sh-digg" href="">digg</a></li>
</ul>

Continuar lendo »