Mudando o background-image no hover
Postado por Rodrigo Medeiros | Algo sobre CSS, Geral, Tutoriais
Vamos lá. Retomando o ritmo dos tutoriais que estava um pouco lento, ai vai mais uma dica para a galera que ta começando.
Quando usamos uma imagem como background de um link, e queremos que ela mude no hover, em geral vem a idéia de usar duas imagens, algo do tipo a{background-image:url(imagem1.jpg)} e a:hover{background-image:url(imagem2.jpg)}. Ok,essa maneira não possui nada de errado, mas pode ser melhorada.
Você abre a página, e a imagem inicial é carregada, quando passar o mouse no link, a imagem do hover por ainda não ter sido carregada, não vai aparecer instantaneamente, e vai ficar sem imagem por alguns segundos.
É um tempo que pode parecer insignificante, mas que pode ser evitado com uma alteração simples. Para tal, basta fazer isso usando uma imagem só. Ao invés de usar 2 background-image distintos, usaremos um background-position.
Para facilitar o entendimento, veja a imagem abaixo. Temos um botão com 100 x 40. Para isso precisaremos de um background de 100 x 80, que seriam os 2 backgrounds distintos, mas em uma única imagem, então apenas precisaremos mudar o bg de posição. Vejamos agora o código para essa tarefa.
a{
background:url(bg.jpg) no-repeat;
background-position:0 0;
width:100px;
height:40px;
display:block;
text-indent:-5000px;
}
a:hover{background-position:0 -40px;}
Note que a imagem tem 100×80, mas o botão terá apenas 100×40, fazendo com que só apareca a parte da imagem correspondente. Confira o resultado.
Sobre os Tutoriais
Postado por Rodrigo Medeiros | Algo sobre Geral, Tutoriais
Para aqueles que estavam acostumados com a seção “Extras” no site anterior, onde eu diponibilizava alguns tutoriais, saibam que eles se encontram aqui no blog. Basta acessar a categoria “Tutoriais” para facilitar o acesso.
Breve estarei publicando mais alguns. Até a próxima.
Tags: Tutoriais
Novo site quentinho.
Postado por Rodrigo Medeiros | Algo sobre Designer, Geral
Depois de algum tempo reunindo idéias, entre erros e acertos, finalmente entra no ar a versão 2 do meu site. Com um design mais light, e agora em 1024, está com o conteúdo mais a mostra, sem rodeios.
Como não se pode agradar a todos, estou aberto à críticas.
Por hj é só.
Tags: Design, Portfolio, Sites
CSS + Criatividade = Veja você mesmo
Postado por Rodrigo Medeiros | Algo sobre CSS, Designer
Eu não podia deixar de mostrar esse site para vocês. É o portfolio do designer Bryan Katzel, que apesar de não ser web designer, possui um site pra deixar muitos profissionais da área com aquela velha pergunta: - Como ele fez isso? Quando vc para ver os detalhes, é bastante simples, mas a maneira como foram utilizados simples truques de CSS, chega a ser revoltante como ele conseguiu tanto com tão pouco.
Na verdade o tão pouco que me refiro é ao css, que não tem nenhum mistério, já as imagens utilizadas para mascarar, requer algumas boas horas pensando para se obter o efeito.
Fica ai o link para quem ficou no mínimo curioso. www.bryankatzel.com
POG em ação
Postado por Rodrigo Medeiros | Algo sobre Geral, Vale uma risada
Esses dias, “zanzando” pela net, me deparei com algo feito por alguém no mínimo cara-de-pau. Essa é uma prova da grande quantidadede de usuários da POG (Programação Orientada a Gambiarra). Tudo bem que o responsável pelo feito estivesse com pressa quando fez isso, mas dai a anúnciar pra todo mundo que aquilo é uma gambiarra já é demais. E outro detalhe é que ja faz um tempo que está assim, ou seja, creio que vai permanecer assim ainda por um bom tempo. Sei não, seria trágico se não fosse comico.
Tags: POG, Vale uma risada
