KADUNEW.COM/BLOG Tutoriais, Dicas e Artigos sobre Web Design, Web Standards, CSS, HTML, SEO e Programação web.

Entries Tagged ‘CSS’

22 web sites desenvolvidos com HTML5 e CSS3

Exemplos de sites em HTML5 e CSS3

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…

Deixe um Comentário

Ferramentas CSS3 online para Web Designers

CSS3

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…

Deixe um Comentário

Como criar um layout de 3 colunas com CSS

Layout CSS com 3 colunas

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…

Comentário (2)

Mostrar legenda ao passar o mouse sobre imagens

Legenda com CSS
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…

Comentário (2)

10 efeitos com propriedades CSS3

CSS3

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…

Comentário (8)

Exemplos de menus em CSS

styledmenu
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.

Deixe um Comentário

Comentários condicionais para o Internet Explorer

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]-->

Continuar lendo…

Deixe um Comentário

Abreviando propriedades CSS

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:

Margem & Padding

#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;
}

Continuar lendo…

Deixe um Comentário

Entendendo a especificidade CSS

O CSS trabalha com três tipos de seletores. Cada um com sua importância. Veja abaixo os seletores em ordem de importância.

  1. Seletores com id. Ex: #menu{declaração}
  2. Seletores com class. Ex: .texto{declaração}
  3. Seletores de elemento. Ex: p{declaração…}

Continuar lendo…

Deixe um Comentário

Centralizando layout com CSS – parte I

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.

Parti do princípio que são raras as pessoas que usam resoluções menores que 800 X 600.

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>

Continuar lendo…

Comentário (8)