kadunew.com/blog » CSS

Sombra em texto com CSS – text-shadow

Carlos Eduardo - Kadu — Mon, 21 Jun 2010 22:48:51 +0000

A propriedade text-shadow do CSS permite adicionar uma sombra no texto descartando o uso de imagens. A maioria dos navegadores já possuem suporte para essa propriedade, entre eles estão: Safari, Opera, Chorme e Firefox.

Abaixo um exemplo de sombra com uso de CSS.

Exemplo text-shadow

Se o seu navegador não tem suporte para essa propriedade segue a imagem de referência.

Para produzir esse efeito foi utilizada a seguinte regra de estilo.

text-shadow:3px 4px 2px #aaa;

Como você pode ver text-shadow aceita quatro valores:

3px: Cordenada X (horizontal) da sombra em relação ao texto;
4px: Cordenada Y (vertical) da sombra em relação ao texto;
2px: O raio de desfocagem da sombra, isso significa que quanto maior o valor mais a sombra é “esticada”, causando um efeito de borrão;
#aaa: Cor da sombra. A cor pode ser especificado no inicio ou após o valor de desfoque.

Podemos trabalhar com múltiplas sombras, bastando apenas separar os valores da propriedade text-shadow por uma virgula. Segue abaixo dois exemplos de utilização de múltiplas sombras.

Exemplo 1

Exemplo text-shadow

text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px

1px #666, -1px -1px #fff

Imagem de referência

Exemplo 2

Exemplo text-shadow

text-shadow: 0 6px 4px #33F, -3px -5px 4px #f00, 3px

-5px 4px #0F0

Imagem de referência

Uma outra forma de fazer sombras utilizando CSS é com o uso de propriedades de posicionamento position:.A técnica consiste em trabalhar com as propriedades top e left, por exemplo, para deslocar o texto da sombra.

Espero que tenham gostado.
Abraços e boa semana a todos!

Isso vai interessar você também

Nenhum post relacionado

Propriedade Overflow no CSS

Carlos Eduardo - Kadu — Sun, 29 Nov 2009 03:11:12 +0000

Há bastante tempo não escrevo artigos sobre CSS aqui no blog. Hoje pela manhã resolvi que iria escrever algo falando sobre CSS. Escolhi a propriedade Overflow.

Com a propriedade Overflow (sobrecarga) do CSS, podemos escolher o que deverá acontecer se o conteúdo ultrapassar o tamanho de uma DIV. Podemos adicionar barra de rolagem, ocultar o conteúdo ultrapassado, etc. Essa propriedade decide o que fazer se o conteúdo exceder o tamanho de um elemento, no nosso exemplo a DIV.

Esta propriedade do CSS deve ser usada no lugar da tag iframe do HTML.

Tipos de Overflow mais utilizados

hidden - Corta o conteúdo que ultrapassa o tamanho da DIV.
scroll - Mostra as barrades de rolagens, vertical e horizontal, mesmo que não seja necessário.
auto - Acho essa a melhor opção porque só cria barra de rolagem quando necessário.

Além dessas três opções temos a inherit que herda os valores, e a opção visible que é a padrão.

Vamos aos exemplos na prática.

Código (X)HTML


	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum tristique enim non pharetra. Praesent eu libero odio, eu molestie nunc. Proin et orci a lectus tincidunt blandit venenatis quis arcu. Aenean odio massa, sagittis quis elementum et, cursus sit amet neque. Nulla facilisi. Vestibulum malesuada velit iaculis ligula luctus bibendum. 
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum tristique enim non pharetra. Praesent eu libero odio, eu molestie nunc. Proin et orci a lectus tincidunt blandit venenatis quis arcu. Aenean odio massa, sagittis quis elementum et, cursus sit amet neque. Nulla facilisi. Vestibulum malesuada velit iaculis ligula luctus bibendum.

Código CSS

div{
	border:solid 1px #000000;
	width:200px;
	height:300px;
	overflow:auto;
}

Resultado final utilizando overflow:auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum tristique enim non pharetra. Praesent eu libero odio, eu molestie nunc. Proin et orci a lectus tincidunt blandit venenatis quis arcu. Aenean odio massa, sagittis quis elementum et, cursus sit amet neque. Nulla facilisi. Vestibulum malesuada velit iaculis ligula luctus bibendum.

Veja mais exemplos da propriedade overflow

Isso vai interessar você também

Nenhum post relacionado

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 II

Carlos Eduardo - Kadu — Wed, 25 Mar 2009 21:15:41 +0000

No último post sobre CSS vimos como centralizar o layout utilizando margens automáticas, propriedade margin:o auto. Nesse segundo post sobre centralizar layout usando CSS vou mostrar uma oura forma. A técnica consiste em declarar posicionamento relativo e margem negativa para a div. Nesse modo não precisamos colocar a declaração text-align:center no body, como foi feito na outra técnica.

A marcação (X)HTML:


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

CSS:

#conteiner{
width:760px;
position:relative;
left:50%;
}

Só a regra CSS acima não é suficiente, já que a declaração position relative irá afastar o elemento 50% da margem esquerda do navegador. Esse valor é contado a partir da borda esquerda do elemento e não do centro do elemento. Para o elemento ficar no centro da tela, é só puxar ele com a metade do seu valor de largura para a esquerda.

#conteiner{
width:760px;
position:relative;
left:50%;
margin-left:-380px;/*metade do valor total da div*/
}

Termina aqui o segundo artigo sobre centralizar layout com CSS.
Abraços!

Isso vai interessar você também

Nenhum post relacionado

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.