kadunew.com/blog » CSS

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 direita/esquerda inferior*/
}

#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á

Isso vai interessar você também

Bug do Internet Explorer 6 (IE6) – fundo desaparecendo em listas

Carlos Eduardo - Kadu — Thu, 12 Mar 2009 21:51:18 +0000

Esse bug acontece com o Internet Explorer 6 quando colocamos uma lista, ordenada, não ordenada ou de definição, dentro de uma DIV que tenha sido flutuada (left ou right) e ainda que tenha declarada position:relative nela.
O Código para representar o bug:

HTML:


	
		Primeiro item
		Segundo item
		Terceiro item
		Quarto item

CSS:

#listas {
		float: left;
		position: relative;
		}

Veja a renderização correta no Firefox e o bug no Internet Explorer 6

Bug do fundo desaparecendo em listas

A solução para sair do bug é simples, basta declarar a regra abaixo para as listas que apresentarem o bug.
#listas ul{position:relative;}

Isso vai interessar você também

Bug do Internet Explorer 6 (IE6) – Margem dobradas

Carlos Eduardo - Kadu — Tue, 03 Feb 2009 13:45:54 +0000

Bugs do Internet Explorer 6 são erros que ocorrem na hora da renderização dos elementos devido esse navegador não seguir os padrões web de desenvolvimento. A Microsoft fez uma grande correção na quantidade dos bugs do Internet Explorer 7 e promete que o seu mais novo navegador, o Internet Explorer 8, seja 100% padrões web.
Como a maioria dos bugs concentram-se no Internet Explorer 6, vou apresentar alguns bugs clássicos e suas respectivas soluções desse navegador.

Bug da margem dobrada

Este bug acontece sempre que flutuamos um elemento à esquerda (ou à direita) e declarar para o mesmo elemento uma margem para o mesmo lado que o elemento foi flutuado. O IE 6 e anteriores dobrar o valor da margem.
Veja o exemplo:

...



DIV com float

Observe na imagem a renderização errada no navegador IE e a correta no navegador Opera.

bug margem dobrada ie6

A solução do bug

A solução para este bug é simples, é só declarar display:inline; para o elemento flutuado. Veja o exemplo abaixo:

 
#float{
	display:inline;
	width: 250px;
	height: 250px;
	background: #FF0000;
	float: left;
	margin: 5px 0 0 50px;
	}

Elementos que são flutuados assumem a condição de elementos nível de bloco, sendo que navegadores padrões ignoram essa declaração.

Isso vai interessar você também

Css TypeSet Gerador de CSS

Carlos Eduardo - Kadu — Sat, 24 Jan 2009 19:22:30 +0000

Css TypeSet é um conversor de texto para CSS.
È uma ótima ferramenta online, que converte automaticamente em CSS as formatações escolhidas por você, em palavras ou bloco de texto.
Entre as formatações que você pode fazer estão: cor do texto, cor de fundo, espaçamento entre os caracteres e estilos.
Depois de fazer a formatação, é só copiar o CSS é colar na sua folha de estilo.
Link: http://csstypeset.com

Isso vai interessar você também

Posicionamento relativo, absoluto, static e fixed em CSS

Carlos Eduardo - Kadu — Thu, 22 Jan 2009 14:34:08 +0000

Posicionamento relativo:

Ao declararmos position:relative sozinha não causa nenhum efeito no posicionamento. Se usarmos ela em conjunto com as propriedades top, right, bottom e left, movimenta o bloco de sua posição inicial para uma posição conforme declarado nas propriedades citadas.
O bloco sai de sua posição original e o espaço que ela ocupava é preservado.
Veja o exemplo:
CSS

div#dois {
	background: #009900;
	position: relative;
	left: 60px;
	top: 35px;
	}

Resultado final

Posicionamento absoluto:

Para declararmos um bloco com posicionamento absoluto usamos a propriedade position:absolute. Um bloco com posicionamento absoluto retira o elemento da posição original, fazendo com que o lugar deixado seja ocupado pelo elemento que se segue.
Veja o exemplo:

Div#dois {
	background: #009900;
	position: absolute;
	left: 60px;
	top: 35px;
	}

Veja que a DIV 3 ocupou o espaço deixado pela DIV 2

Posicionamento estático:

O valor static usado em position é o valor padrão de posicionamento. Os blocos ficam onde estão. O uso dessa declaração é para sobrescrever um posicionamento declarando anteriormente.

Posicionamento fixo:

O valor fixed usado em position deixa o bloco posicionado de maneira fixa em relação a uma referência. O contexto de posicionamento é sempre a área de renderização, exemplo, canto superior esquerdo da tela do navegador. O bloco com esse valor não se movimenta quando há rolagem na página. O IE6 não suporta essa declaração.

Isso vai interessar você também

Elementos inline e nível de bloco

Carlos Eduardo - Kadu — Sun, 18 Jan 2009 12:48:46 +0000

Para um bom entendimento da renderização dos elementos HTML é necessário o entendimento de elementos níveis de bloco, inline e os invisíveis. Conhecendo bem esses conceitos, evitamos o uso inadequado de elementos HTML e marcação adicional.

Elementos níveis de bloco

Elementos nível de bloco ocupam toda largura disponível na página e criam uma linha invisível antes e depois de si próprio. Elementos nível de bloco sempre começam em nova linha. Um elemento que venha antes ou depois de um elemento nível de bloco é renderizado acima ou abaixo do elemento nível de bloco, nunca ao lado.
Elementos nível de bloco podem conter elementos inline e outros elementos nível de bloco.
Exemplos de tags nível de bloco:

address, blockquote, center, dir, div, dl, dt, dd, frameset, fieldset, form,
h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, ul, li, p, pre, table,
tbody, thead, tfoot, tr, td, th

Elementos inline

Ocupa somente a largura do elemento, largura necessária. Elementos “inline” poderão apenas conter informações e outros elementos “inline”, jamais poderão conter elementos nível de bloco.
Diferente dos elementos nível de bloco os inline não começam em nova linha.
Exemplos de tags inlines:

a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, del, dfn,em, font, i, iframe, img, input, ins, kbd, label, map, object, q, s, samp, select,small, span, strike, strong, sub, sup, textarea, tt, u, var

Elementos invisíveis

São definidos como tags invisíveis porque estão escritas no documento mas o usuário não as vê.
Exemplos de elementos invisíveis:

meta, link, style, title

Usando display:block; e display:inline; podemos trocar um elemento para nível de bloco e inline respectivamente.