Há muitos plugins Jquery para se fazer menus dropdown bacanas, mas usar apenas CSS para isso é muito mais interessante, não é? É isso que vamos fazer a seguir. Primeiro vamos estruturar nosso html, segue: <ul id=”menu”> <!– Inicia o menu principal –> <li><a href=”#”>Home</a> <!– Item normal do menu –> <li><a href=”#” class=”drop”>Posts mais acessados</a> <!– [...]
Arquivos da categoria: HTML/CSS
CSS3Pie – CSS3 no IE
Já mostrei aqui no blog como usar border-radius no IE e agora mostro uma ferramenta mais completa para ultilizar os tais recursos do CSS3 no IE, este é o CSS3Pie que permite que o IE reconheça as seguintes propriedades: border-radius box-shadow linear-gradient as background image Exemplo de uso: .minhaclasse{ /*declarando as bordas arredondadas*/ border: 1px [...]
Usando @font-face em todos os navegadores
Há alguns meses atrás fiz um posts sobre o Google Fonts, onde mostrei uma alternativa para usar fontes diferentes das que os usuários têm em suas maquinas. Neste tutorial vamos ver como usar em todos os navegadores (inclusive o IE6 ) a nova e utilíssima propriedade @font-face do CSS3, essa propriedade tem a função de carregar fontes externas, ou [...]
4 ferramentas de CSS online, que vão facilitar sua vida
Se você (assim como eu) já utiliza algumas propriedades CSS3, mas em contrapartida precisa adaptar o layout ao IEca 6, as ferramentas que citarei a seguir o ajudarão nas duas coisas! vamos a elas então. IE6 css fixer: Esta ferramenta gera os hacks para IE6 necessários para corrigir a maioria dos problemas, como a margem duplicada quando os elementos [...]
Usando border-radius no IE
Para aqueles que odeiam o IE (como eu!) e ficam P… da vida, quando precisam fazer aquela borda arredondada e acabam tendo que usar imagens, porque a M… do IE não aceita essa nova propriedade do CSS, podem ficar tranquilos agora, o pessoal do site http://www.htmlremix.com, desenvolveu um arquivo .htc para resolver isso: o modo [...]
PNG transparente no IE6
Apesar de cada vez mais(e graças a Deus) o uso do IE6 está em queda, principalmente depois que o Orkut, YouTube e outros serviços “populares” avisarem que não irão mais dar suporte a esta coisa que a Micro$oft chama de Navegador de Internet, temos que fazer com que o layout funcione igual aos outros navegadores [...]
Alguns exemplos de HTML5
Montei uma lista de alguns sites com exemplos do uso do HTML5, segue a lista: http://html5gallery.com/ http://www.youtube.com/html5 http://www.cssnolanche.com.br/uploads/html5/ http://html5demos.com/ http://shapeshed.com/examples/drag-and-drop/ Lembrando que com browsers antigos(principalmente aqueles com iniciais IE), não será possivel visualizar o conteudo, mas com o Firefox3.5, já é possivel. Se você quiser saber mais sobre o HTML5, visite a página oficial da [...]
Galeria de imagem com CSS puro
Olá pessoal neste post estarei mostrando como fazer uma galeria de imagem com CSS puro. Este exemplo foi baseado no exemplo do site http://www.dynamicdrive.com, neste site foi usado o pseudo-elemento :hover, porém eu usei o :active, fazendo com que a imagem só amplie de tamanho quando clicada, fiz também outras modificações para adaptar melhor ao [...]