KADUNEW.COM/BLOG » CSS

22 web sites desenvolvidos com HTML5 e CSS3

Carlos Eduardo - Kadu — Tue, 10 Jan 2012 10:39:10 +0000

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.

Apesar da linguagem HTML5 ainda não estar totalmente finalizada, há muitos projetos de sites utilizando essa linguagem, que promete revolucionar o modo que os desenvolvedores criam seus sites. Com a presença do HTML5 podemos eliminar a necessidades de plugins de terceiros, permite uma codificação mais semântica e limpa, entre outras vantagens.

Suporte para CSS3 está crescendo rapidamente, os principais navegadores já estão interpretando regras CSS3 (novos seletores, propriedades, etc).

1. Bent the Bodyguard

2. Bounty Bev

3. Digital Hands

4. Get Satisfaction

5. I am Jamie

6. Icaro Ferracini

7. Ivan Asetiawan

8. Matt Hewnsara

9. Mula Design

10. Nike Better World

11. Robedwards

12. Seamco

13. Vision 18

14. Walo

15. Web For Freaks

16. Readiness

17. Clearideaz

18. Scratch Radio

19. nzfestival

20. OK Cool

21. Zoocha

22. Portfolio Rui Molar’s

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

Ferramentas CSS3 online para Web Designers

Carlos Eduardo - Kadu — Mon, 09 May 2011 10:45:42 +0000

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.

Eu acredito que já pode ser utilizada, até porque a cada dia os navegadores estão mais compatíveis com as propriedades e seletores CSS3. Para dar uma idéia do que podemos conseguir com a nova versão das CSS, dê uma olhada nessas úteis ferramentas online utilizadas para gerar código CSS3.

CSS3 Button Maker

Ferramentas CSS3 Tricks

Crie um botão usando apenas CSS. Através dos botões, barras deslizantes contidas no painel principal do site você vai escolhendo o estilo desejado do botão. Em seguida você pode copiar o código fonte e usar em seus projetos

CSS3 Generator

Ferramentas CSS3, Tricks Generator

Selecione em uma lista a propriedade CSS3 desejada, preencha alguns parâmetros da propriedade selecionada e pronto, o aplicativo mostra o código gerado para você copiar e colar no arquivo de estilos do seu site. A visualização das mudanças é imediata.

CSS3 Please

Ferramentas CSS3 Please, edite as principais propriedades CSS3

Aqui você pode editar os valores das principais propriedades CSS3 que estão sublinhadas. Depois é só copiar e colar no seu arquivo de estilos CSS. O bom é que quando você alterar a propriedade por exemplo, -moz-box-shadow o aplicativo atualiza automaticamente a propriedade -webkit-box-shadow.

CSS3 Gradient Generator

Ferramentas CSS3, crie seu próprio Gradiente

Muitos não sabem, mas é possível criar efeitos de gradientes usando CSS. Veja esse simples gerador de gradiente CSS3.

CSS3 Transforms

Ferramentas CSS3 Westciv

Com essa ferramenta você pode fazer diversas transformações no conteúdo, tais como, rotação e inclinação. Ele também gera o código correspondente ao efeito escolhido.

CSS3 Selectors Test

Ferramentas CSS3 Selectors Test

Faça testes de seletores CSS3. A ferramenta executa automaticamente um grande número de testes que determinam se o seu navegador é compatível com um grande número de seletores CSS. Caso não seja compatível com um seletor especial, o mesmo é destacado. Você pode clicar em cada seletor CSS para ver os resultados, incluindo um pequeno exemplo e uma explicação para cada um dos testes.

Me siga no Twitter: @kadunew
Forte abraço!

Isso vai interessar você também

Como criar um layout de 3 colunas com CSS

Carlos Eduardo - Kadu — Wed, 22 Dec 2010 16:39:58 +0000

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.

Um usuário com uma resolução menor do que a largura do layout verá uma barra de rolagem na horizontal do seu navegador. Se a resolução do monitor for maior que a largura definida no layout aparecerá espaços vazios na tela. Neste caso é interessante que o desenvolvedor centralize o layout, para os espaços vazios aparecerem nos dois lados do site.

Vale lembrar também que, usando CSS para formatar as suas páginas, no lugar de tabelas, fica muito mais prático para alterar o layout do seu site, alteramos apenas pelo arquivo CSS, além disso, seu site irá carregar mais rápido.

Layout de três colunas é muito comum, já que permite deixar a navegação à esquerda, o conteúdo no meio, e a publicidade, links, logos… à direita.

Estrutura do HTML para três colunas

Acima temos a marcação necessária para a criação das três colunas. Repare que criamos uma div chamada de conteudo-2 que serve como um box para englobar as divs conteudo-2-1 e conteudo-2-2. A seguir detalhes da estrutura HTML usada.

#geral: um elemento usado para controlar principalmente a largura total do nosso layout;
#cabecalho: Não é realmente parte do layout de 3 colunas, mas incluídos aqui para fazer um layout completo;
#principal: O elemento que contém o conteúdo que será exibido nas colunas. Nesse exemplo não vamos estilizar esse elemento, porém sempre é de boa pratica criar um box para o conteúdo do site. Caso mais adiante você desejar aplicar um estilo mais avançado ou com uma especificidade CSS maior com certeza será útil;
#conteudo-1: O elemento que se tornará a coluna da esquerda. Isto será muitas vezes um submenu;
#conteudo-2: Coluna da a direita, dentro dela ficará mais duas divs(#conteudo-2-1 e #conteudo-2-2);
#conteudo-2-1: O elemento que será a coluna do meio. O conteúdo principal normalmente vai aqui.
#conteudo-2-2: Este elemento será a coluna da direita, usada frequentemente como um “sidebar” ou uma coluna auxiliar.
#rodape: Como o cabeçalho, isso não faz parte do layout das colunas, mas incluímos em prol da integridade.

Resultado da nossa marcação HTML

Agora dê uma olhada em como o navegador renderiza o documento sem estilos, apenas com nossa marcação HTML. Para facilitar a visualização inseri um pouco de conteúdo dentro das colunas.

Exemplo da marcação HTML.

Definindo a largura e cores de fundo das colunas

Agora vamos adicionar um pouco de CSS básico para tornar mais fácil o entendimento do que estamos fazendo. A seguir deixamos uma largura fixa igual a 960px e centralizamos horizontalmente o layout. Coloquei também algumas cores de fundo para facilitar a montagem do layout com 3 colunas.

body {
    margin:0;
    padding:0;
    color:#000;
    background:#fff;
}
#geral {
    width:960px;
    margin:0 auto;
    background:#ddd;
}
#cabecalho {
    background:#fdd;
}
# conteudo-1 {
    background:#bfb;
}
#conteudo-2-1 {
    background:#ddf;
}
#conteudo-2-2 {
    background:#dff;
}
#rodape {
    background:#ff9;
}

Veja como ficou nosso layout depois de definir a largura da div #geral. Todos os elementos são empilhados verticalmente em uma única coluna.

Largura total do layout mais cor de fundo.

Criando as duas primeiras colunas

Para começar a criar as colunas, vamos definir a largura das divs #conteudo-1 e #conteudo-2 e flutuá-las em direções opostas, ou seja, uma para esquerda e outra para a direita.

#conteudo-1 {
    float:left;
    width:240px;
    background:#bfb;
}
#conteudo-2 {
    float:right;
    width:720px;
}

Veja como está funcionando nosso layout de 3 colunas.
O rodapé parece estranho, nesta fase, mas isso será corrigido mais tarde.

Coluna #conteudo-1 e #conteudo-2 lado a lado.

Deixando as colunas lado a lado

Para deixar os elementos #conteudo-2-1 e #conteudo-2-2 em colunas, tudo o que precisamos fazer é repetir o que fizemos antes, ou seja, dar as larguras aos elementos utilizando float em direções opostas, veja o código abaixo.

#conteudo-2-1 {
    float:left;
    width:480px;
    background:#ddf;
}
#conteudo-2-2 {
    float:right;
    width:240px;
    background:#dff;
}

Temos agora as três colunas que queríamos, #conteudo-1 para a esquerda, #conteudo-2-1 no meio, e #conteudo-2-2 para a direita.

Colunas lado a lado.

Arrumando o rodapé, colocando o rodapé no seu lugar

A div do #rodape é exibida atualmente abaixo do #conteudo-1 , que não é onde queremos que fique. Existem diferentes formas de empurrá-la abaixo das três colunas, mas a maneira mais simples é usar clear: both.

Essa propriedade do CSS diz que não podemos ter elementos flutuando a esquerda e nem a direita desse elemento, no caso a div #rodape.

#rodape {
    clear:both;/*posicionando o rodape abaixo das outras divs*/
    background:#ff9;
}

Arrumando o Rodape.

Organizando os elementos do layout

Para tornar a página de demonstração final melhor de ser visualizada vamos dar uns espaçamentos utilizando a propriedade padding do CSS. Veja como ficou a folha de estilos. Atenção para as modificações feitas na largura (propriedade width:) das divs #conteudo-1 e #conteudo-2-2. Diminuímos a largura porque colocamos um espaçamento, caso não tivéssemos diminuído a largura desses elementos o layout “quebraria” (as colunas não ficariam uma ao lado da outra). Uma outra solução seria aumentar a largura da div #geral.

#cabecalho {
    padding:10px;
    background:#fdd;
}
# conteudo-1 {
    float:left;
     /* diminuimos a largura para não quebrar o layout.
      * valor antigo 220
      */
    width:210px;
    padding:10px;
    background:#bfb;
}
#conteudo-2-1 {
    float:left;
    width:460px;
    padding:10px;
    background:#ddf;
}
#conteudo-2-2 {
    float:right;
    /*diminuimos a largura para não quebrar o layout
    * valor antigo 220
    */
    width:200px;
    padding:10px;
    background:#dff;
}
#rodape {
    clear:both;
    padding:10px;
    background:#ff9;
}

Confira o resultado final do layout com 3 colunas.

Resultado final. Layout CSS 3 colunas.

Fique por dentro de todas atualizações aqui do site: Twitter: @kadunew
Abraço e até a próxima!

Isso vai interessar você também

Mostrar legenda ao passar o mouse sobre imagens

Carlos Eduardo - Kadu — Sun, 21 Nov 2010 19:56:42 +0000

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.

A técnica do efeito consiste em esconder a legenda até que o usuário passe o mouse sobre a imagem. Repare que usamos a marcação span class="desc" para tal finalidade. Pensando em tornar mais óbvio que temos uma legenda na imagem vamos adicionar um link “saiba mais”. Quando o visitante do site passar o mouse sobre o link a legenda aparecerá.

Exemplo

Você pode ver o resultado final desse tutorial na Página de Exemplo. O site DesignFlavr faz uso desse efeito, porém um pouco mais complexo.

HTML



	
	Saiba Mais
	
		Lorem Ipsum
		Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.

CSS

Abaixo a estilização da DIV que aloca todos os outros elementos.

.imgefeito {
	margin: 0;
	overflow: hidden;
	float: left;
	position: relative;
}
.imgefeito a {
	text-decoration: none;
	float: left;
}
.imgefeito a:hover {
	cursor: pointer;
}

Estilização da imagem onde aparecerá o texto no estado hover, ou seja, quando o mouse estiver sobre a imagem.

.imgefeito a img {
	float: left;
	margin: 0;
	border: none;
	padding: 10px;
	background: #fff;
	border: 1px solid #ddd;
}

Em seguida estilizamos o texto Saiba Mais e a “caixa” da legenda que será mostrada quando passarmos o mouse sobre o texto. Perceba o uso de um comando proprietário da Microsoft, -ms-filter para o efeito funcionar no Internet Explorer 8.

.imgefeito a .mais {
	position: absolute;
	right: 20px;
	bottom: 20px;
	font-size: 1.2em;
	color: #fff;
	background: #000;
	padding: 5px 10px;
	filter:alpha(opacity=65);
	opacity:.65;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgefeito a:hover .desc{
	display: block;
	font-size: 1.2em;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #fff;
	position: absolute;
	bottom: 11px;
	left: 11px;
	padding: 10px;
	margin: 0;
	width: 615px;
	border-top: 1px solid #999;
}
.imgefeito a:hover .desc strong {
	display: block;
	margin-bottom: 5px;
	font-size:1.5em;
}

Referências:
Sohtanaka e Aranea.Zuavra.

Como falei no artigo, esta técnica é muito útil para sites de galerias de imagens. Pelo fato da legenda aparecer sobre a imagem, conseguimos economizar espaço na página já que não precisamos deixar um espaço para a legenda. Fica aí a dica!

Quer ficar sabendo das atualizações aqui no Blog? Siga-me no Twitter: @kadunew

Isso vai interessar você também

10 efeitos com propriedades CSS3

Carlos Eduardo - Kadu — Mon, 23 Aug 2010 14:01:58 +0000

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.

1. Arredondar cantos de divs

Com a propriedade border radius conseguimos arredondar cantos de dvis. Dessa forma muitos desenvolvedores podem deixar de lado a estrutura de tabelas complexas e imagens para alcançar tal efeito.

Como acontece com margens, bordas, etc. no CSS há propriedades individuais para cada canto que deseja arredondar, veja alguns exemplos abaixo:
-moz-border-radius-topright: 3px; arredonda em 3px o canto superior direito
-moz-border-radius-topleft: 3px; arredonda em 3px o canto superior esquerdo.

#div1 {
border: 1px solid #699;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

2. Sombras em divs

Criamos sombras em CSS com uso da propriedade box-shadow. Um exemplo seria: box-shadow: 2px -3px 4px #000. Os quatros valores passados são respectivamente: deslocamento horizontal da sombra(2px), deslocamento vertical(-3px), faz um “borrão” na sombra, um esfumaçado(4px) e por último a cor da sombra(#000).

#div2 {
border:1px solid #699;
-moz-box-shadow: 5px 5px 5px #b6ebf7;
-webkit-box-shadow: 5px 5px 5px #b6ebf7;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

3. Transparência

Para fazer o efeito utilizamos a propriedade background-color mais o valor rgba() que é uma extensão do famoso modo de cores RGB. O comando rgba() é composto por 4 valores, por exemplo, rgba(255, 125, 0, 0.5); os três primeiros são valores em RGB que são respectivamente vermelho, verde e azul. Os valores podem ser de 0 a 255. O último valor é a transparência que varia de 0 até 1. Por exemplo, 0 seria totalmente transparente, 1 seria totalmente opaco e 0.5 seria uma transparência do 50%.

#div3 {
background-color: #6e8eb9;
}
body:last-child #div3 {
background-color: rgba(110, 142, 185, .4);
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

4. Colunas

Segundo pesquisas de usabilidade as pessoas têm dificuldades de ler textos onde as linhas são muito longas. Portanto, para aproveitar uma tela maior nada melhor que fazer seus textos em colunas, iguais aos jornais. E o melhor, com CSS isso já é possível. As colunas podem ser substituidas por divs flutuadas. Aqui algumas propriedades.

column-count:define o número de colunas
column-gap: cria um espaço entre as colunas (padding)
column-rule: define a estilização da borda que ficará entre as colunas.

#div4 {
/* borda inserida para facilitar o entedimento */
border: 1px solid #699;
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #6e8eb9;

-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #6e8eb9;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

5. Várias imagens de fundo

Trabalhar com imagens de fundo sempre foi um pouco restrito quando se trata de CSS, devido ao fato de podermos inserir uma imagem de cada vez no fundo dos elementos. Isso não ocorre com CSS3. O uso de CSS3 permite ao desenvolvedor inserir múltiplas imagens por elemento simplesmente separando por vírgula a propriedade background.

Observe o exemplo abaixo:

background:url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%;

Os valores depois de no-repeat significam a posição da imagem. O primeiro representa a posição da imagem na horizontal, já o segundo valor é a posição da imagem na vertical.

#div5 blockquote{
/* retira qualquer imagem de fundo e adiciona espacamento de 20px
na na parte superior e inferior do elemento */
background:none;
padding:0 20px;
}

body:last-child #div5 blockquote p{
background:none
}

/*  hack para navegadores Microsoft*/
/* inserindo as imagens */
body:last-child #div5 blockquote{
background:url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%;
}

Lorem Ipsum is simply dummy text of the printing.

6. Box-sizing – box model

Box model especifica quais propriedades da folha de estilo serão somadas para definir o tamanho do elemento. Ao aplicar a largura(width) em uma div e depois uma borda, ou um espaçamento (padding) esse valores são somados ao tamanho inicial do elemento tornando ele maior.

Ao usar o box-sizing o uso da propriedade padding, por exemplo, pode ser aplicado dentro do tamanho definido no width. A propriedade é aplicada para dentro do elemento e não para fora. Ao invés de somar com o valor definido no width ele diminui. Recomendo observar os exemplos para um melhor entendimento da propriedade box-sizing.

#div6 {
background:#b6ebf7;
width: 200px;
padding: 10px;
-moz-box-sizing: content-box;
/* para o IE8 */
box-sizing: content-box;
-webkit-box-sizing: content-box;
}

#div6b {
background:#b6ebf7;
width: 200px;
padding: 10px;
-moz-box-sizing: border-box;
/*para o  IE8 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

O conteúdo da DIV tem uma largura de 250px e padding de 10px, ou seja, a largura total é de 270px (largura do conteúdo mais espaçamento esquerda e direita do padding)

Largura de 250px e padding de 10px, mas o preenchimento agora é dentro da área de conteúdo, largura total é 250px

7. Outline

Utilizado para aplicar um espaçamento em volta de um elemento HTML. Sua vantagem é de não alterar o tamanho do Box Model fazendo com que o elemento acabe ocupando mais espaços por causa da borda. Isso acontece quando utilizamos a propriedade border.

outline: cria uma borda adicional
outline-offset: utilizado para mover o contorno para dentro ou fora. Valores negativos movem para dentro do elemento.

#div7 {
border: 1px solid #000;
/*borda adicional*/
outline: 1px solid #FF0000;
/*utilizado para mover o contorno para dentro ou fora*/
outline-offset: -9px;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

8. Fundo com gradientes

Já imaginou criar um fundo gradiente sem usar imagens? Com CSS3 isso é totalmente possível. Perceba que para usar o efeito no Safari e no Chrome foi necessário alterar um pouco o código.

Um exemplo de uso pode ser visto abaixo:
linear-gradient(bottom, #b6ebf7, #fff 50%). linear é o tipo do gradiente, bottom é o inicio do nosso gradiente, #b6ebf7 e #fff são as cores usadas, 50% quanto que o gradiente ocupara do elemento.

Para o efeito funcionar no Chorme temos que alterar algumas coisas como mostrado abaixo:

gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));

linear é o tipo, left e bottom é o inicio do gradiente, left e top o final, color-stop define a cor de inicio e fim.

#div8 {
background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

9. Rotacionando elementos

rotate: permite a rotação de elementos. O valor passado rotaciona o elemento em sentido horário.

#div9 {
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

10. Animação

O efeito funciona apenas para usuários do Firefox ou Safari 4. Aqui podemos trabalhar com transição e rotação podendo definir quantas vezes o elemento fará isso.

No exemplo abaixo primeiramente definimos uma cor para o link. Depois definimos uma cor e a propriedade que será animada. Por último quanto tempo deve ter a animação. Ao colocar o mouse sobre o link perceba que o fundo aparece de uma forma mais sutil.

.div a {
color: #0f0;
}

#div10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
}

#div10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}

#div10 a:hover {
color:#31801f;
-moz-transition-property: color;
-webkit-transition-property: color;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

Este artigo foi escrito baseado no original Top 10 CSS3 commands com algumas alterações.

Me siga no Twitter: @kadunew
Forte abraço!

Isso vai interessar você também

Exemplos de menus em CSS

Carlos Eduardo - Kadu — Fri, 10 Jul 2009 14:19:14 +0000

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.

Isso vai interessar você também

Comentários condicionais para o Internet Explorer

Carlos Eduardo - Kadu — Fri, 22 May 2009 18:10:24 +0000

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:

Sua estrutura básica é a mesma a de um comentário em HTML.
Todos os outros navegadores vão interpretar como um comentários e não vão executar o que estiver entre .
O comentário condicional acima diz o seguinte: Se o navegador for o Internet Explorer 6 a div com o nome de principal vai ter a largura de 500px.
Inserimos os comentários condicionais dentro de arquivos HTML, mas precisamente entre As tags …. Não tem como inseri-los dentro de arquivos CSS.
Em meus trabalhos sempre prefiro usar os comentários condicionais a usar os hacks. Acho mais fácil de dar manutenção na apresentação do site trabalhando dessa forma.
Como dito no inicio do post podemos criar comentários condicionais para um determinado navegador da Microsoft, para isso utilizaremos os termos de comparação:

Sinal	Descrição
lt	Significa menor do que
lte	Significa menor do que ou igual
gt	Significa maior do que
gte	Significa maior do que ou igual
!	Significa condição negada

Veja alguns exemplos:

Você também pode por o link de uma folha de estilo:
Exemplo:

E aqui termina mais um post
Abraços

Isso vai interessar você também

Abreviando propriedades CSS

Carlos Eduardo - Kadu — Tue, 21 Apr 2009 16:21:42 +0000

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*/
}

#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}

#div {
margin:10px 20px 0;
/*superior igual a 10px direita/esquerda igual a 20px e inferior 0*/
}

#div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#div {
margin:0 auto;
/*topo/inferior esquerda/direita*/
}

#div {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}

#div {
margin:50px;
/*topo/direita/inferior/esquerda*/
}

Border

#div {
border-width: 5px;
border-style: dotted;
/*(solid, dashed, dotted, double, etc) (padrão = nenhum)*/
border-color: blue;
/*as cores podem ser: nome da cor, hexadecimal ou rgb de 0 a 255 */
}

#div {
border:5px dotted blue;
}

#div {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #666666;
}

#div {
border-right:2px solid #666;
}

#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}

#div {
border-width:3px 2px;
}

Fundo

#div {
background-color: #CCCCCC;
/*as cores podem ser: nome da cor, hexadecimal ou rgb de 0 a 255 */(padrão = transparente)*/
background-image: url(images/bg.gif);
background-repeat: no-repeat;
/*repeat, repeat-x, repeat-y ou no-repeat) (padrão = repeat*/
background-attachment: scroll;
/*(fixed ou scroll) (padrão = scroll)*/
background-position: top left;
/*topo, direita, esquerda, infeior ou centro) (padrão = 0% 0%)*/
}

#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}

Font

#div {
font-family: Verdana, Arial, Helvetica;
/*Verdana, Arial, “Times New Roman”, etc */
font-size: 12px;
font-weight: bold;
font-style: italic;
font-variant: normal;
/*normal ou small-caps (padrão = normal)*/
line-height: 1.5px;
}

defina

 #div {
font-family: Verdana, Arial, Helvetica;
font-size: 12px;
font-weight: bold;
font-style: italic;
font-variant: normal;
line-height: 1.5px;
}

#div {
font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}

Listas

#div {
list-style-image: url(images/bullet.gif);
list-style-position: inside;
list-style-type: square;
/*tipos de marcador circle, disc, square. (padrão = disc)*/
}

#div {
list-style:square inside url(images/bullet.gif);
}

Cores

Black: #000000 to #000
Blue: #0000ff to #00f
Dark Grey: #666666 to #666
Light Grey: #cccccc to #ccc
Orange: #ff6600 to #f60
White: #ffffff to #fff
Link original: Leigeber

Isso vai interessar você também

Entendendo a especificidade CSS

Carlos Eduardo - Kadu — Sun, 19 Apr 2009 20:01:16 +0000

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

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

A especificidade em CSS é utilizada para determinar quais as regras tem precedência, são mais específicas, para estilizar um seletor.
Por exemplo, se você tiver as seguintes marcação (X)HTML:

Texto de exemplo

E com a regra CSS a seguir:

p { color: red; } p { color: blue; }

Qual a cor final do elemento?
Acertou quem respondeu azul, isso porque foi a última regra a ser declarada.
Se tivéssemos a regra:

div p { color: red; } p { color: blue; }

Qual seria a cor final do elemento?
Acertou agora quem respondeu vermelho. Se perguntando o porquê? Simples, pela especificidade do seletor div p ser mais especifico que apenas o seletor p. Especificidade é isso!
Algumas formas de calcular a especificidade de seletores são as seguintes:
Você da a cada seletor id (#) um valor de 100. Cada class (.) você da um valor de 10, e por fim para cada seletor HTML um valor 1. Depois apenas some os valores. O maior total é a regra CSS mais especifica.
Veja alguns exemplos:

p tem uma especificidade de 1 (1 seletor HTML)
div p tem uma especificidade de 2 (2 seletores HTML; 1 +1)
.tree tem uma especificidade de 10 (1 classe no seletor)
div p.tree tem uma especificidade de 12 (2 seletores HTML e um seletor classe; 1 1 10)
#baobab tem uma especificidade de 100 (1 seletor id)
body #content .alternative p tem uma especificidade de 112 (seletor HTML, seletor id, classe seletor, seletor HTML; 1 100 10 1)

Conclusões:
Se todas as regras forem usadas a regra que iria “ganhar” seria a última por ser mais especifica, isso independente da ordem em que for escrita dentro do arquivo.
Abraço a todos!
Referência: htmldog

Isso vai interessar você também

Centralizando layout com CSS – parte I

Carlos Eduardo - Kadu — Tue, 17 Mar 2009 21:41:58 +0000

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:

...


… Aqui vem o conteúdo da sua página ...

CSS:

Body	{text-align:center;}/* Centraliza no IE6*/
#conteiner
{
width:760px;
margin:0 auto;
text-align:left; /*volta o alinhamento padrão*/
}

A declaração responsável por centralizar a página em navegadores padrões (Firefox, Opera…) é a declaração margin:0 auto;
O navegador calcula as margens esquerda e direita subtraindo a largura total disponível da largura declarada (no nosso caso a largura declarada para o elemento é 760px) e depois divide por 2. O resultado é a margem que o navegador vai deixar do lado esquerdo e direito.
Vamos trabalhar com números para ficar mais claro.
Exemplo:
O suário que entrou no seu site e está com uma resolução igual a 1024.
O navegador faz o seguinte cálculo:
(1024px-760px) = 264px/2 = 132px
Ou seja, 132px (aproximadamente, temos que descontar a barra de rolagem do navegador) para o lado esquerdo e direito respectivamente.
O Internet Explore 6 não suportam a declaração margin:0 auto e erradamente interpreta a declaração text-align:center para centralizar texto e o contêiner.
A outra forma mostrarei no próximo post. Até lá