quinta-feira, 28 de junho de 2007

Menu com imagens - CSS Sprites

Essa técnica é interessante pois carrega cada imagem do link de uma vez.
A imgem estática e a "hover" estão no mesmo arquivo, uma embaixo da outro. Com um tamanho fixo podemos saber onde termina uma e o começa a outra.
Exemplo:


imagem original:






Segue o código do menu:
<div id="menu">
<ul>
<li><a href="http://www.google.com.br/" id="navi1">Google</a></li>
<li><a href="http://www.yahoo.com.br/" id="navi1">Yahoo</a></li>
</ul>
</div>


Agora o CSS com explicação:

/* Menu */
#menu ul {
/*Retira a bolinha da lista*/
list-style-type: none;
}

#menu li {
/* Evita a repetição da imagem*/
background-repeat: no-repeat;
}

#menu li a {
/*Altura e largura do primeira parte da imagem*/
height: 39px;
width: 179px;
/*Estende o link para o tamanho do li*/
display: block;
/*Retira o sublinhado do link*/
text-decoration: none;
/* Aqui tem um truque, joga o texto do link para 2000 pixels a esquerda, fora da visualização. Valeu pela dica Vinicius.*/
text-indent: -2000;
}

#menu li a#navi1 {
/*Coloca a imagem no de fundo no link. CAla link deve ter uma "NaviX" para variar a imagem*/
background-image: url(img/button.jpg);
}

#menu li a:hover {
/*Está ai a mágica do efeito. Muda a posição da imagem de fundo do link para 144 pixels a cima , novamente fora do elemento(exatamente a altura da primeira parte)*/
background-position: 0px -39px;
}

Esse efeito é interessante porque mesmo sem o CSS o menu continua funcional.

terça-feira, 26 de junho de 2007

O Futuro do Orkut

Sem duvida o Orkut abriu a porta para uma revolução no relacionamento via internet. O que quero mostrar são algumas formas diferentes de relacionar pessoas, não ficando apenas nos amigos e comunidades. São os filhos do Orkut.
Dei ênfase em como se relacionam as pessoais e a forma que isso é mostrado. Certamente teremos um sucessor do Orkut com formas diferentes de relacionamento como o Flickr e Del.icio.us estão fazendo com seus produtos, fotos e links. WEB como foco no usuário.

Imagini
Baseado em preferências. Cada membro relaciona fotos a sensações , montando assim um perfil fotográfico, que é ligado a outros perfis similares, uma rede por afinidade. Bem interessante é a nuvem de fotos que roda com alguns perfis, você fica a um click de conhecer gente nova com os mesmo interesses que você.
We Feel Fine
É isso mesmo, sentimento. Cadastre o que você está sentindo agora, e mais algumas informações como sexo e nacionalidade e pronto, você é mais uma bolinha na nuvem de gente que é a WEB. O destaque vai para as animações com os links das pessoas e fotos. Cada pontinho é realmente uma pessoa. Veja se tem algem cadastrado do Brasil.
Made of Japan
Não é bem uma comunidade mas bem que poderia ser. É a imagem de um tenis (Onitsuka Tiger) feito de fotos e links para diversos sites com conteúdo relacionado com o estilo de vida que o tênis cultua. Se tivesse como cadastrar o nosso próprio site seria show.

quarta-feira, 13 de junho de 2007

Teste a velocidade de carregamento do seu site

A Pingdom lançou uma ferramenta que testa a velocidade de carga do seu site, gerando um gráfico com o tempo de carregamento de cada item da página. O recurso é bem interessante, por exemplo descobri em uma análise que a imagem deste post que carreguei no photobucket esta muito pesada. Mais um motivo deixar o layout do blog mais leve.
Use também para testar o site do concorrente :)

sexta-feira, 8 de junho de 2007

Um elemento HTML, várias Classes

Depois de algum tempo de silêncio digital, tenho uma dica rápida de CSS .
Podemos aplicar mais de uma classe a um elemento HTML, basta declarar os nomes das classes separados por espaço. Fica assim:


.posicao {float: right;}
.cor { color: #f00; }
<p>Testando</p>
<p class="cor">Testando</p>
<p class="cor posicao">Testando</p>

O resultado é esse:


Testando


Testando


Testando


É mais uma forma de organizar seu CSS.