Fiz esse artigo reunindo sites inspiradores usando HTML5 e CSS3, exemplos brilhantes e para lá de criativos que demonstram o potencial dessas duas tecnologias, e claro, a habilidade e criatividade dos desenvolvedores. Esse post também serve como uma grande fonte de inspiração para você aplicar em seus projetos.
Continuar lendo…
CSS3 continua a ganhar a cada dia mais e mais popularidade, está presente na maioria dos sites de quem trabalha com web, apesar de ainda dizerem ser cedo para aprender e aplicar as CSS3, já que as propriedades e seletores não são totalmente suportadas por todos os navegadores.
Continuar lendo…
Tutorial demonstrando como criar um Layout CSS com 3 colunas.
Existem dois tipos principais de layouts com CSS: largura fixa e de largura variável (conhecido também como, layout líquido ou layout fluido), esse último o site se ajusta ao tamanho da janela do navegador do usuário. Outra coisa que se pode fazer é deixar a coluna do conteúdo como uma largura variável e as colunas ao lado fixa. Nesse artigo vou mostrar como criar um layout fixo de 3 colunas.
Continuar lendo…
Vou mostrar um exemplo rápido para fazer o efeito de revelar a legenda de uma imagem apenas quando o usuário passar o mouse sobre a imagem. Normalmente se coloca a legenda logo abaixo da imagem, nesse caso a legenda aparecerá sobre a imagem e na parte inferior. O efeito é inteiramente feito com CSS, sem qualquer necessidade de JavaScript. É um ótimo efeito para ser usado em galerias de imagens para colocar a descrição da imagem quando o mouse estiver sobre a imagem.
Continuar lendo…
Firefox, Safari e Chrome já implementaram propriedades do CSS3. Para que funcionem, é necessário adicionarmos os prefixos -moz (para renderização no Firefox) e -webkit (para renderização nos navegadores Chrome e Safari). Ambos são soluções proprietárias dos fabricantes. Veja abaixo 10 efeitos das folhas de estilos CSS3.
Continuar lendo…
O site styledmenus disponibiliza para download uma série de menus feitos em CSS. É uma ótima fonte de inspirações para seus projetos além de servir como fonte d estudo também.
Os Comentários condicionais (Conditional Comments) só funcionam para navegadores Internet Explorer, é uma implementação proprietária da Microsoft e serve para as versões 5 e superiores. Utilizamos comentários condicionais para servir uma regra CSS diferente para os navegadores da Microsoft. Só os navegadores da Microsoft leram esses códigos. Podemos ainda escrever uma regra CSS para uma determinada versão do Internet Explorer.
Os comentários condicionais funcionam da seguinte forma:
<!--[if IE 6]>
#principal{width:500px;}
< ![endif]-->
Estava eu hoje pela manhã lendo artigos sobre CSS e achei um muito legal no site Leigeber. Esse artigo mostra como escrever propriedades CSS de forma resumida deixando nosso arquivo css com um tamanho reduzido.
Confira abaixo as propriedades da forma não resumida e a forma resumida:
#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
}
#div {
margin:0 5px 10px 15px;
/*superior direita inferior esquerda*/
}
e
#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}
O CSS trabalha com três tipos de seletores. Cada um com sua importância. Veja abaixo os seletores em ordem de importância.
Essa é a primeira matéria de como centralizar o site.
Uma dúvida muito comum para quem está iniciando no mundo do CSS é:
“Como faço para centralizar meu layout com CSS.”
Uma forma de mostrar todo seu layout, sem a barra de rolagem na horizontal e independente da resolução do usuário, é definir uma largura fixa para a DIV que engloba todo o conteúdo e depois centralizá-la na tela. Assim o usuário que acessar seu site com uma resolução maior terá o site centralizado. O usuário que acessar com a resolução definida por você vai ter o site preenchendo toda a tela.
Temos duas formas de centralizar uma DIV:
Vamos a marcação (X)HTML para os exemplos:
(X)HTML:
... <body> <div id=”conteiner”> … Aqui vem o conteúdo da sua página ... </div> </body>
