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 »

Vocês se lembram daqueles cardápios com a lista de pratos servidos nos restaurantes, ou até mesmo aqueles encartes que as pizzarias distribuem com a listagem de pizzas que eles produzem onde as informações contidas são: Nome do prato, valor e lista de ingredientes? Já pensaram em fazer isso com CSS? O site Web-graphics disponibiliza um tutorial ensinando a fazer um menu estilo cardápio de uma forma bem simples. Esse mesmo efeito pode ser aplicado a criação de um prefácio para livros, pois a lógica do tutorial é a mesma para ambos.

Se você tem interesse em aprender a desenvolver um menu desse tipo, vamos utilizar de listas de definição para o desenvolvimento do menu. Observe abaixo a marcação HTML:

<dl>
    	<dt>Nome do prato</dt>
        <dd class="price">Valor</dd>
        <dd class="ingredients">Descrição dos ingredientes</dd>
</dl>

Continuar lendo »

Aqueles que como eu que trabalham com desenvolvimento web sabem o quanto é complicado desenvolver um menu dropdown que além de funcionar em todos os browsers ainda funcione através do teclado, tudo isso sem a utilização de JavaScript ou Hacks CSS.

Mas Michael MacNaughton conseguiu desenvolver um menu desse tipo, que funciona em todos os browsers, inclusive no Internet Explorer 6. O código HTML pode ser visto abaixo:

Continuar lendo »