Arquivos para CSS
Como alterar a fonte de template’s no WordPress
14 de fevereiro de 2012 | Alexandre K. Cordeiro 4
A pedido de Arlindo Armando do Blog na Carteira, hoje vou dar uma dica extremamente fácil e muito necessária para personalizar o template do seu blog em WordPress. Vou ensinar como alterar a fonte do template que você utiliza. Leia Mais
Como deixar uma imagem transparente com CSS3 utilizando opacity
9 de dezembro de 2011 | Alexandre K. Cordeiro
Uma dica de CSS3 muito legal para deixamos o visual do nosso site mais atraente, é utilizando a propriedade CSS3 opacity. Leia Mais
Altere e visualize as CSS´s de um site com Firebug no Mozilla Firefox
14 de setembro de 2011 | Alexandre K. Cordeiro 9
Firebug é um complemento para o browser Mozilla Firefox essencial caso você trabalhe desenvolvendo ou adaptando layout para sites.
Ele funciona enquanto você navega por um determinado site podendo editar, depurar e monitorar CSS, HTML e JavaScript. Utilizo muito o Firebug para adaptar e alterar temas de sites WordPress modificando as CSS’s Leia Mais
Incrementando seu Site com Efeito Rollover em CSS
30 de novembro de 2010 | Alexandre K. Cordeiro 8
Hoje vou falar sobre um efeito básico de CSS, mas muito interessante para incrementar o seu site com links de imagens. Esse efeito chamasse rollover e utiliza apenas uma imagem dividida em duas.
O efeito rollover é aquele que troca uma imagem por outra quando o usuário passa o mouse sobre ela. Quando bem usado, esse recurso pode incrementar uma página ou um site de maneira significativa. É possível chegar a esse resultado apenas com CSS (Cascading Style Sheets).
Logo a seguir vocês entenderão melhor.
Criando o efeito rollover
A vantagem de utilizar o efeito rollover é que essa técnica dispensa o uso do preload, ou seja, a imagem que aparecerá quando o usuário disparar o evento não precisa ser carregado previamente para que o efeito funcione da maneira desejada. Essa técnica foi utilizada no banner do twitter do Criador Sites.
Veja o exemplo abaixo
Passo a passo
1º passo: crie sua imagem
Ao invés de duas imagens, você tem apenas uma, contendo a imagem nos seus dois estados, que terá a posição alterada quando o usuário disparar o evento.
Usando o editor de imagens de sua preferência, crie sua imagem como na figura abaixo: Na metade superior, a imagem como aparecerá no site. Na metade inferior, a imagem que aparecerá quando acontecer o efeito rollover.
Exemplo de imagem para efeito rollover
2º passo: crie seu arquivo HTML
Vamos criar o arquivo HTML:
<html> <head> <title>Efeito rollover com CSS</title> <link href="rollover.css" rel="stylesheet" type="text/css" /> </head> <body> <p><a href="http://twitter.com/criadorsites" title="@criadorsites" target="_blank" id="efeito">@criadorsites</a></p> </body> </html>
Perceba que não usamos a tag <img> para exibir nossa imagem, e sim um link. Isso é importante, pois dessa maneira, garantimos que mesmo o usuário com as imagens ou o CSS desabilitado em seu navegador vai conseguir acessar o link sem problemas.
3º passo: crie seu arquivo CSS
Com o CSS vamos transformar o link em uma imagem:
<!--
#efeito{
width: 250px; height: 250px;
overflow: hidden;
background: url(twitter.gif) top left no-repeat;
display: block;
text-indent: 10000px;
}
#efeito:hover{
background-position: bottom left;
}
-->
Explicando
O atributo width: 250px; define a largura da imagem. Lembre-se de que no primeiro passo definimos os dois estados da imagem no mesmo arquivo, por isso, atribuiremos à imagem apenas metade da sua altura (neste exemplo, 250 pixels: height: 250px;), já que a parte de baixo “trocará de lugar” com a parte de cima no momento que o efeito rollover ocorrer. Isso deixa claro que é importante medir com precisão o tamanho de sua imagem para dividi-la exatamente ao meio, do contrário, o efeito pode ter falhas. Por sua vez, o atributo overflow: hidden; define que o link terá exatamente o tamanho definido, e que qualquer “sobra” da imagem será cortada.
No entanto, o truque está mesmo no atributo background:. Repare na seguinte linha:
background: url(twitter.gif) top left no-repeat;
No url(twitter.gif) você deve colocar a url completa de onde a imagem está salva. Ela define a imagem de fundo e o posicionamento dela: alinhada pelo topo, à esquerda e sem repetição.
O atributo display: block;, que vem logo abaixo, transforma nosso link em um “bloco”, e o text-indent: 10000px; esconde o texto do link.
Por fim, o atributo
background-position: bottom left;
Define que, ao passar o mouse sobre a imagem, ela se alinhará pela base e à esquerda, exibindo assim a metade de baixo do arquivo.
Depois de criado o código, salve o arquivo CSS (ou implemente na própria página HTML, se desejar). Neste exemplo, o arquivo recebeu o nome de rollover.css. Repare que, no código HTML do 2º passo, esse arquivo é “chamado” na quarta linha.
Finalizando
Com um pouco de prática, você pode aplicar a mesma idéia em vários elementos de uma mesma página. Com o mesmo código e um pouco de imaginação, também é possível usar esse efeito em menus, botões de formulário e praticamente quaisquer outros elementos da sua página HTML.
Agradeço a Erika Sarti pela inspiração do post.
Comentários