Definição

A propriedade box-shadow pode ser aplicada a qualquer elemento e é aceito atualmente pelo Firefox 3.5+ (utilizando o prefixo -moz a propriedade) e pelo Safari 3.1+ (utilizando o prefixo -webkit a propriedade). Não preciso dizer que os –projetos de browsers– de Redmond não aceitam (ainda) esta propriedade.

O box-shadow não faz parte do box-shadow, ou seja, não influencia no tamanho total que o elemento terá na tela.

A propriedade é declarada da seguinte maneira:

box-shadow:5px 5px 10px #ccc;
/* implementação para o firefox */
-moz-box-shadow:5px 5px 10px #ccc;
/* implementação para safari */
-webkit-box-shadow:5px 5px 10px, #ccc;

Onde:

• o primeiro valor é a posição horizontal da sombra em relação ao elemento. Valor positivo projeta a sombra para a direita e negativo para a esquerda;
• o segundo valor é a posição vertical da sombra em relação ao elemento. Valor positivo projeta a sombra para baixo e negativo, adivinhem?, para cima;
• o terceiro valor é o blur da sombra, só aceita valores positivos ou 0 (zero);
• o quarto e último valor é a cor da sombra;

A propriedade aceita multiplas sombras. Podemos implementar inúmeros efeitos desta forma. Para isso é só separar a declaração de cada sombra com vírgulas:

box-shadow: 5px 5px 10px #333, -5px -5px 10px #ccc;

Exemplos

Vamos então colocar a mão na massa e implementar os dois exemplos acima, primeiro a sombra simples:

E agora o exemplo com múltiplas sombras:

Para aqueles que estão me taxando de louco ou acham que essa é a versão web do conto A Roupa Nova do Rei, seguem as respectivas imagens com o que você deveria ter visto aqui:

Sombra Simples

Sombra Múltipla

E por hoje é só pessoal! Dúvidas, críticas, sugestões?

Leia também:

1. CSS3: propriedade text-shadow
2. Otimize seu site usando CSS Sprite

Quem nunca recebeu aquele layout finalizado, com um título sombreado e silenciosamente pensou: “P*** ****, lá vou eu fazer um text-replacement novamente”. Essa atitude era comum entre os webdevelopers, mas finalmente o pessoal da W3C veio solucionar nossos problemas.

Definição

O text-shadow pode ser aplicado a qualquer elemento que tenha texto, lógico, e é aceito pela grande maioria dos browsers modernos: Firefox 3.5, Opera 9.5+, Safari 3+. Infelizmente, mesmo com todas as melhorias (e realmente foram muitas) no Internet Explorer 7 e mais ainda no Internet Explorer 8, eles ainda não suportam essa propriedade, ou seja, escolheram a pílula azul.

A propriedade text-shadow é usada da seguinte maneira:

text-shadow: 2px 2px 2px #00f;

Onde:

• os dois primeiros valores são as coordenadas top left, para onde a sombra será projetada;
• o terceiro valor é o blur da sombra;
• o quarto valor é a cor da sombra;

A propriedade também aceita multiplas sombras. Sim! Até degradê é possível de se implementar usando somente CSS. Para isso, é só separar a declaração das sombras usando vírgulas:

text-shadow: 2px 2px 2px #000, 4px 4px 2px #00f;

Essa propriedade não é nova. Na verdade ela foi proposta na especificação do CSS2. A definição completa da propriedade pode ser encontrada aqui.

Exemplos

Vamos então implementar então os dois exemplos acima, primeiro a sombra simples:

bittersweet dev – CSS3: Propriedade text-shadow

E também o com sombras multiplas:

bittersweet dev – CSS3: Propriedade text-shadow

Pra quem não viu nada diferente nessas frases dê uma olhada nas imagens abaixo que representam respectivamente os exemplos acima:

… e uma dica, tome a pílula vermelha, ou seja, use um browser decente!

Aguardem novos posts explicando as novas propriedades do CSS3, até lá, deixe seu comentário, dúvida ou critica

text-shadow: 2px 2px 4px #f00;

Leia também:

1. CSS3: propriedade box-shadow

Todo o desenvolvedor web que se preste deve gerar um HTML/XHTML válido para suas páginas. Isso não é mais uma recomendação, é um dever nosso.

Quando falamos de inserir um Flash, o negócio fica preto, o código gerado pelos famigerados programas da Adobe não são válidos, criando tags que não existem (<embed>?) e um fonte gigantes com parâmetros que não é bom nem refletirmos muito sobre eles.

Outro problema que temos é de usabilidade, visto que esse Flash não tem um conteúdo alternativo, excluindo as pessoas que não tem Flash player. Claro, isso hoje em dia é raro de existir, mas não podemos esquecer que cresce cada vez mais (a passos de tartaruga, mas ainda assim caminha) o acesso a internet usando dispositivos móveis e alguns browsers usados nesses dispositivos não têm suporte. Dessa maneira, o  usuário simplesmente vai ter uma tela em branco, sem saber o que deveria ter de conteúdo ali. Também não podemos esquecer dos leitores de tela (JAWS e afins). Eles não “entendem” flash, excluindo, assim,  mais uma parcela de usuários.

Devemos lembrar ainda de um problema existente (pra falar a verdade, eu não sei se ainda existe, pois faz anos que não utilizo o IE) com o Internet Explorer que,  após determinada versão do Flash Player (8 se não estou enganado), tornou-se necessário clicar no flash para ativá-lo, ou seja, você precisava clicar num menu para ele funcionar como um menu.

Mas isso agora é passado! (parece aquelas propagandas de produtos duvidosos que aparecem na TV em horários alternativos) Existe uma maneira de inserir Flash gerando um HTML/XHTML válido, acessível e sem dores de cabeça e se chama SWFObject

O que é o SWFObject?

É um pequeno JavaScript  (menos de 4kb após ser comprimido) para adicionar conteúdos feitos em Flash na sua página de maneira fácil e indolor.

Porque usar o SWFObject?

Dentre as razões, podemos citar:
* Sua página terá um HTML válido
* Detecta automaticamente o Flash Player (existem outras soluções para isso, mas todas tem seus problemas)
* Remove o incômodo de ter que clicar para ativar o Flash no Internet Explorer
* Como é possível ter um conteúdo alternativo para o Flash, melhora a indexação pelos mecanismos de busca
* Permite que se tenha uma Graceful Degradation

Como usar

Antes de tudo, devemos fazer o download do SWFObject do página do projeto no Google Code.
A última versão estável disponível quando escrevi o artigo é a 2.1. Já existe a 2.2, mas é uma versão beta, deixem ela para depois, ok?

Descompacte o arquivo swfobject_2_1.zip e copie o swfobject.js e o expressInstall.swf para o diretório do seu projeto.

Usando o SWFObject, existem duas maneiras de adicionar o conteúdo flash na sua página.

Maneira Estática

Adiciona o Flash e o conteúdo alternativo usando marcação válida e usa o JavaScript para resolver que a marcação não pode resolver sozinha.  vantagem
Tem como vantagem:

• Usa marcação standard
• Não usa javascript para adicionar o conteúdo a página, apenas para corrigir problemas pontuais, ou seja, o Flash vai ser acessível a um número maior de usuários (os que não tem suporte a JavaScript, leitores RSS, etc)

1º Passo
Seu Flash deve ser adicionado da seguinte maneira no <body> da sua página:

<object id="meuId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
    <param name="movie" value="test.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
    <!--<![endif]-->
       <div>
            <h1>Conteudo Alternativo</h1>
           <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Faça o download do Flash Player" /></a></p>
        </div>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

Você pode adicionar parâmetros adicionais, mas é necessário colocar o <param> em ambas as declarações do <object> para o correto funcionamento

2º Passo
Adicione a chamada para o SWFObject no <head>:

<script src="swfobject.js" type="text/javascript"></script>

3º Passo
Registre seu Flash no SWFObject e mostrar o que ele deve fazer com ele:

<script type="text/javascript">
     swfobject.registerObject("meuFlash", "9.0.0", "expressInstall.swf");
</script>

Onde o primeiro argumento é o ID do seu Flash, o segundo é a versão mínima do Flash Player que o Flash necessita e o terceiro parâmetro (opcional) é o link para a instalação expressa do Flash Player (vem junto no pacote do SWFObject)

Veja um exemplo

Maneira Dinâmica

É baseada no conteúdo alternativo e usa o JavaScript para substituir este conteúdo pelo o do Flash caso haja o Flash Player e suporte JavaScript minimo necessário.
Tem como vantagem:

• Evita ter que clicar no Flah para ativá-lo no Internet Explorer 6/7 e Opera 9
• Se integra melhor com aplicações que usam script

1º Passo
Crie um conteúdo alternativo usando uma marcação válida no <body> da sua página:

<div id="meuConteudo">
    <h1>Conteudo alternativo</h1>
    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Faça o download do Flash player" /></a></p>
</div>

É necessário adicionar um ID ao elemento, pois é através dele que o SWFObject irá fazer a substituição do conteúdo.

2º Passo
Adicione a chamada para o SWFObject no <head>:

<script src="swfobject.js" type="text/javascript"></script>

3º Passo
Adicione o SWF usando JavaScript:

<script type="text/javascript">
    swfobject.embedSWF("test.swf", "meuConteudo", "300", "120", "9.0.0", "expressInstall.swf");
</script>

O método embedSWF tem 5 parâmetros obrigatórios (urlSWF,id,width,height,versionSWF) e 4 opcionais (urlInstallSWF,flashvars,params,attributes). Para este exemplo, vou usar só os obrigatórios, mais detalhes sobre os parâmetros acesse http://code.google.com/p/swfobject/wiki/documentation

Isso faz com que o SWFObject substitua o conteúdo do elemento ID, com o conteúdo do urlSWF

Veja um exemplo

Alguns links interessantes sobre o assunto:

• Página do projeto SWFObject
• A List Apart – Flash Embedding Cage Match

E era isso, dúvidas? Críticas? Sugestões? Entre em contato!

Sem Posts Relacionados.

Para contornar esses problemas que nosso “querido” Internet Explorer nos causa, temos algumas práticas interessantes, dentre elas, as que eu utilizo utilizava posso destacar os CSS Hacks e os CSS Condicionais

CSS Hacks

Podemos definir como CSS Hacks as formas que encontramos de “enganar” o browser (IE, sempre IE) para que ele  renderize corretamente corretamente o CSS da página. Esses Hacks somente se aplicam aos browsers que tem essa falha, lógico.

Podemos citar alguns Hacks famosos:

/* IE 6 e anteriores */
* html #um  { color: red }
 
/* IE 7 e anteriores */
*:first-child+html #dois { color: red } 
 
/* IE 7 e browsers modernos */
html > body #tres { color: red }
 
/* Somente browsers modernos (sem IE 7) */
html > /**/body #quatro { color: red }

Apesar de parecer ser uma solução simples, os Hacks tornam o CSS não-válidos, o que na minha opinião é um problema. Sem contar o fato de que estamos enganando o browser para ele renderizar algo que ele não foi feito para suporta, ou seja, processamento extra.

CSS Condicional

Como o próprio nome já diz, é o uso de uma folha de estilos condicional, ou seja, só é carregada quando for determinado browser que estiver fazendo a requisição, e o melhor, sem javascript!

Essa prática faz uso dos conditional comments, um comentário HTML com uma sintaxe especial que é interpretado única e exclusivamente pelo Internet Explorer. Os browsers modernos os enxergam apenas como comentários comuns, sem interpretá-los.

Por exemplo, se quisermos que um estilo seja carregado somente no IE 6, fazemos o seguinte:

<!--[if IE 6]>
	<link rel="stylesheet" href="main_ie.css" mce_href="main_ie.css" type="text/css" media="all" />
<![endif]-->

A lado bom de se utilizar os CSS Condicionais é que a folha de estilo é válida, pois não usa nenhum hack que possa a ver a invalidá-la. Por outro lado, temos requisições extras que vão ser feitas de acordo com o browser.  Além disso, com está no <head>, a renderização da página fica aguardando ela estar totalmente carregada.

Uma nova esperança!

Eis que lendo um artigo do Paul Irish, surgiu uma luz no horizonte, que resolve o problema das multiplas requisições de folhas de estilos e também da espera pelo carregamento.

A solução é fazer o uso de conditional comments não para alternar entre folhas de estilos a ser carregadas, e sim para aplicar ou não uma class no <body> do documento da seguinte maneira:

  <!--[if lt IE 7]> <body class="ie6"> <![endif]-->
  <!--[if IE 7]>    <body class="ie7"> <![endif]-->
  <!--[if IE 8]>    <body class="ie8"> <![endif]-->
  <!--[if !IE]>-->                 <!--<![endif]-->

Isso  faz com que de acordo com o browser, seja adicionado a class (ie6, ie7 ou ie8) no corpo do documento, possibilitando corrigir as falhas de renderização direto na folha de estilo principal, facilitando até a manutenção do código.

Como exemplo, para adicionar alguma correção, fariamos o seguinte no CSS:

    div#container{margin-left:10px;}
    //corrigindo o famoso bug da margem dupla
    body.ie6 div#container{margin-left:5px;}

E é isso!

De agora em diante, essa é a solução que utilizarei!

Segue alguns links interessantes sobre o assunto:

• http://jigsaw.w3.org/css-validator/
• http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
• http://paulirish.com/2009/browser-specific-css-hacks/
• http://www.quirksmode.org/css/condcom.html

Sem Posts Relacionados.

James Edwards tem uma pequena lista que ousa sonhar com uma vida pós IE6. Ele nos deu uma lista de 10 coisas que que poderemos fazer quando este dia chegar:

Usar child-selectors

Não vamos mais precisar definir intermináveis regras para remover as regras dos child-selectors. Com os eles no CSS2  poderemos especificar regras CSS que sejam aplicadas apenas no elemento filho, não nos descendentes em geral.

Usar PNGs de 24-bit

Não vamos mais precisar adaptar imagens em diferentes backgrounds coloridos para que tenhamos um anti-aliasing descente. Com o suporte ao canal alpha do PNG, poderemos usar imagens com sombras, glows e outros efeitos de opacidade, com segurança que todos os navegadores gráficos poderão vê-los.

Usar attribute selectors

Não vamos mais precisar definir classes de tipagem para os inputs – coisas como <input class=”text” … /> – quando podemos endereça-las com os attribute seletors do CSS2, como input[type="text"]. Podemos usar até mesmo o attribute selector substring-matching do CSS3 (suportado por todos os navegadores modernos, inclusive o IE7), que pode ser muito útil quando definimos seletores que se aplicam a um grande numero de atributos, diminuindo significantemente o número de código que teremos que fazer.

Usar um grande número de propriedades display

Poderemos usar coisas como display:inline-block ao invés de float:left. Isso significa não ter mais os intermináveis float dentro de float dentro de float, ou ainda o duvidável uso do overflow:hidden, só para os blocos ficarem posicionados corretamente. (Embora eu deva dizer que teremos que esperar até o Firefox 3 para termos isso também!).

Usar min-width e max-width

Apesar da implementação do propriedade width do IE6 ser muito parecida com a correta implementação do min-width, não é a mesma coisa, e não serve para o mesmo propósito; e isso não faz nada para o max-width. Com o fim do IE6 virá uma nova renascença dos designs em block, com a grande flexibilidade que os designers vem reclamando a anos.

Jogar fora 90% dos CSS hacks (e 90% da razão pela qual precisamos deles!)

No nos preocuparemos com repetições bizarras de caracteres, misteriosos blocos invisíves ou frustantes margens duplicadas; com o fim do IE6 acabará a necessidade de diagnosticar e curar tantos bugs de reendenização

Adicionar abreviações que todos poderão ver

Apesar de pessoalmente só usar o elemento <abbr> e nunca usar <acronym>, ainda sim me aborreço ao lembrar que os usuários do IE6 não verão a expansão, e me aborrece mais ainda as ocasiões que eu preciso usar scripts para eles (e não posso).

Confiar novamente no z-index

Não vamos mais precisar coçar nossas e refletir sobre o porque a camada X estão acima da camada Y quando deveria estar abaixo, imaginando o que podemos ter feito de errado, só pra lembrar que – duh – não fizemos nada de errado, é apenas o contexto de empilhamento do IE6.

Poupar tempo e dinheiro

Gastar um tempo consideravelmente menor hackeando significa menos tempo de desenvolvimento e menos custos.

Aproveitar novamente!

Escrever CSS vai se tornar prazeiroso como costumava ser. Isso é, até nossas expectativas aumentarem novamente e o IE7 se tornar nosso monstro

Mas ainda teremos que esperar pelos contadores CSS, box-sizing, e um JavaScript mais decente (e muito muito mais, como Canvar e suporte a SVG).

Tomara que o update automático para o IE8 coloque tudo nos eixos

Sem Posts Relacionados.

Sprite é uma técnica utilizada originalmente em jogos 2-D  que tem por principio colocar todas as ações de um personagem (movimentos) em uma só imagem, e só mudar a posição que deve ser mostrada na tela. Quando foi criada essa técnica, o hardware era muito limitado, por isso havia a necessidade de otimizar os gráficos para não sobrecarregar o processador.

Exemplo de Sprite do jogo Super Star Wars: The Empire Strikes Back, para SNES

No desenvolvimento Web, os Sprites são amplamente utilizados em ícones e em menus rollover.

Por que utilizar Sprites

Vários sites, como Google e Yahoo, utilizam essa prática para otimizar o carregamento das imagens usadas. Ao invés de requisitar 15 imagens, é feita a requisição de uma só imagem. Isso pode parecer muito pouco de for pensar em 10, 20 acessos, mas pense em milhões de acessos simultâneos? A economia de requisições neste caso é enorme.

A utilização de Sprites trás também a facilidade de alteração do tema do site. Imagine um site com 15 icones: Para mudar o tema, seria necessário mudar 1 por 1 os ícones. Utilizando os Sprites, seria necessário apenas mudar uma imagem que contém todos os ícones.

Como usar essa técnica

Vou demonstrar 2 exemplos do uso da técnica, um para ícones e outro para menus rollover.

O primeiro passo é criar o Sprite contendo as imagens necessárias. Para este exemplo, criei 4 estágios de botões (bem simples, diga-se de passagem):

Menu Sprite

Feito isso, vamos colocar a mão na massa e fazer o HTML.

<ul>
	<li id="opcao1"><a href="#">Opção 1</a></li>
	<li id="opcao2"><a href="#">Opção 2</a></li>
	<li id="opcao3"><a href="#">Opção 3</a></li>
</ul>

Cada item tem definido um ID, pois  cada um terá um fundo (ícone) diferente.

Agora que temos o HTML, podemos estilizar usando CSS. Para este caso, usaremos a seguinte definição, abstraindo os estilos comuns e mostrando apenas o necessário para fazer a “mágica”:

ul li{background:url(menu_sprite.png) 0px 0px no-repeat;}
ul li#opcao1:hover{background-position:-70px 0px;}
ul li#opcao2:hover{background-position:-140px 0px;}
ul li#opcao3:hover{background-position:-210px 0px;}

Explicando tudo

ul li: Aqui eu defino o background padrão para os botões do menu e posiciono ele na posição (0px, 0px), pois é essa a posição da imagem que eu quero que apareça. Cabe aqui explicar a sintax da propriedade background:

É a combinação de algum ou todos os valor para background-color, background-image, background-repeat, background-attachment e background-position

Como a mesma regra se aplica a todos os links, só alterando a posição, vou colocar a explicação somente para a primeira opção.

ul.li#opcao1:hover: Aqui se aplica a propriedade background-position{ -70px 0px; }, ou seja, deslocar a imagem de background 70 pixels para a esquerda quando o mouse estiver sobre o li, fazendo aparecer a outra imagem do sprite.

Dessa maneira, temos um menu rollover usando apenas uma imagem e a prática do CSS Sprite, com o seguinte resultado:

Menu Sprite com o rollover

O exemplo desta técnica está disponível aqui

Links interessantes sobre o assunto:

CSS Sprite Generator

HTMLDog

Leia também:

1. CSS3: propriedade box-shadow